先上效果图
问题分析及解决:头部换行敲空格,换行是不行的,用eleemntUI自带的render-header函数
<template>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="date" label="日期//date" width="180" :render-header="renderheader"></el-table-column>
<el-table-column
v-for="(item, index) in headerList"
:key="index"
:prop="item.prop"
:render-header="renderheader"
:width="item.width"
:label="item.label"
show-overflow-tooltip
align="center"
>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
headerList: [
{label: '姓名//name', prop: 'name'},
{label: '地址', prop: 'address'},
],
tableData: [
{ date: "2016-05-02", name: "王小虎", address: "上海市普陀区金沙江路 1518 弄" },
{ date: "2016-05-04", name: "王小虎", address: "上海市普陀区金沙江路 1517 弄" },
],
};
},
methods: {
renderheader(h, { column }) { // renderheader函数得用到el-table-column上,而不是el-table
return h("span", {}, [
h("span", {}, column.label.split("//")[0]), // 其中//也可以用其他符号替代
h("br"),
h("span", {}, column.label.split("//")[1]),
]);
},
},
};
</script>
注: renderheader函数得用到el-table-column上,而不是el-table