在vue2中,我想要单位和文字在两行展示;
html部分:
<el-table-column
label="文字 & (单位)"
:render-header="renderheader"
align="center"
prop="asd"
key="asd"
/>
js部分:
//实现table表头换行显示
renderheader(h, { column, $index }) {
return h("span", {}, [
h("span", {}, column.label.split("&")[0]),
h("br"),
h("span", {}, column.label.split("&")[1]),
]);
},
这样就可以实现,我是用的&作为分行的标志,你也可以改为别的,记得上下都改哦
在vue3的项目上,我同样把这一套搬过来用,结果,发生了报错;
于是,在查了官方文档中,这样改的
import {h} from "vue";//引入h
//实现table表头换行显示
const renderheader = ({ column }) => {
return h("span", {}, [
h("span", {}, column.label.split("&")[0]),
h("br"),
h("span", {}, column.label.split("&")[1]),
]);
};
即可以实现了;需要记住,html部分要设置
:render-header="renderheader"这个方法
key=""和key,并且key是不一样 的。
实现效果的对比