前言

本次讲解的是elemen和element-plus来通过table的标签render-header来实现的

效果图

element中使用

代码

<template><div><el-table :data="tableData" style="width: 100%" height="250"><el-table-column v-for="col of columns" :key="col.prop":prop="col.prop" :label="col.label" align="center" header-align="center" show-overflow-tooltip :render-header="renderHeader"></el-table-column></el-table></div>
</template>
<script>
export default {data() {return {columns: [{label: '日期',prop: 'date'},{label: '姓名',prop: 'name'},{label: '省份',prop: 'province'},{label: '市区',prop: 'city'},{label: '地址',prop: 'address'},{label: '邮编',prop: 'zip'},{label: '这是测试字段01',prop: 'test01'},{label: '这是测试字段02',prop: 'test02'},{label: '这是测试字段03',prop: 'test03'},{label: '这是测试字段04',prop: 'test04'}],tableData: [{date: '2016-05-03',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333,test01: '这是一条测试数据.这是一条测试数据.这是一条测试数据.',test02: '这是一条测试数据.这是一条测试数据.这是一条测试数据.',test03: '这是一条测试数据.这是一条测试数据.这是一条测试数据.',test04: '这是一条测试数据.这是一条测试数据.这是一条测试数据.'}, {date: '2016-05-02',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333,test01: '测试',test02: '测试',test03: '测试',test04: '测试'}, {date: '2016-05-04',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333,test01: '测试',test02: '测试',test03: '测试',test04: '测试'}, {date: '2016-05-01',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333,test01: '测试',test02: '测试',test03: '测试',test04: '测试'}, {date: '2016-05-08',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333,test01: '测试',test02: '测试',test03: '测试',test04: '测试'}, {date: '2016-05-06',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333,test01: '测试',test02: '测试',test03: '测试',test04: '测试'}, {date: '2016-05-07',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333,test01: '测试',test02: '测试',test03: '测试',test04: '测试'}]}},methods: {// 表头部重新渲染renderHeader(h, { column, $index }) {// 新建一个 spanlet span = document.createElement('span');// 设置表头名称span.innerText = column.label;// 临时插入 documentdocument.body.appendChild(span);// 重点：获取 span 最小宽度，设置当前列，注意这里加了 20，字段较多时还是有挤压，且渲染后的 div 内左右 padding 都是 10，所以 +20 。（可能还有边距/边框等值，需要根据实际情况加上）column.minWidth = span.getBoundingClientRect().width + 20;// 移除 document 中临时的 spandocument.body.removeChild(span);return h('span', column.label);}}
}
</script>

element-plus中使用:没有了h

代码

<template><div><el-table :data="tableData" style="width: 100%" height="250"><el-table-column v-for="col of columns" :key="col.prop" :prop="col.prop" :label="col.label" :render-header="renderHeader" align="center" header-align="center" show-overflow-tooltip ></el-table-column></el-table></div>
</template>
<script>
export default {name: 'trendsTableHeader',data () {return {columns: [{label: '日期',prop: 'date'},{label: '姓名',prop: 'name'},{label: '省份',prop: 'province'},{label: '市区',prop: 'city'},{label: '地址',prop: 'address'},{label: '邮编',prop: 'zip'},{label: '这是测试字段01',prop: 'test01'},{label: '这是测试字段02',prop: 'test02'},{label: '这是测试字段03',prop: 'test03'},{label: '这是测试字段04',prop: 'test04'}],tableData: [{date: '2016-05-03',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333,test01: '这是一条测试数据.这是一条测试数据.这是一条测试数据.',test02: '这是一条测试数据.这是一条测试数据.这是一条测试数据.',test03: '这是一条测试数据.这是一条测试数据.这是一条测试数据.',test04: '这是一条测试数据.这是一条测试数据.这是一条测试数据.'}, {date: '2016-05-02',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333,test01: '测试',test02: '测试',test03: '测试',test04: '测试'}, {date: '2016-05-04',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333,test01: '测试',test02: '测试',test03: '测试',test04: '测试'}, {date: '2016-05-01',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333,test01: '测试',test02: '测试',test03: '测试',test04: '测试'}, {date: '2016-05-08',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333,test01: '测试',test02: '测试',test03: '测试',test04: '测试'}, {date: '2016-05-06',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333,test01: '测试',test02: '测试',test03: '测试',test04: '测试'}, {date: '2016-05-07',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333,test01: '测试',test02: '测试',test03: '测试',test04: '测试'}]}},methods: {// 表头部重新渲染renderHeader ({ column, $index }) {// 新建一个 spanconst span = document.createElement('span')// 设置表头名称span.innerText = column.label// 临时插入 documentdocument.body.appendChild(span)// 重点：获取 span 最小宽度，设置当前列，注意这里加了 20，字段较多时还是有挤压，且渲染后的 div 内左右 padding 都是 10，所以 +20 。（可能还有边距/边框等值，需要根据实际情况加上）column.minWidth = span.getBoundingClientRect().width + 20// 移除 document 中临时的 spandocument.body.removeChild(span)return column.label}}
}
</script>