Vue ElementUI el-table 表头不换行且宽度自适应
参考此篇文章,在此记录自己的理解和使用。APIel-table设置属性render-header代码<template><div><el-table :data="tableData" style="width: 100%" height="250"><el-table-column v-for="col of columns" :key="col.pro
·
参考 此篇文章 ,在此记录自己的理解和使用。
API
el-table 设置属性 render-header
代码
<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 }) {
// 新建一个 span
let span = document.createElement('span');
// 设置表头名称
span.innerText = column.label;
// 临时插入 document
document.body.appendChild(span);
// 重点:获取 span 最小宽度,设置当前列,注意这里加了 20,字段较多时还是有挤压,且渲染后的 div 内左右 padding 都是 10,所以 +20 。(可能还有边距/边框等值,需要根据实际情况加上)
column.minWidth = span.getBoundingClientRect().width + 20;
// 移除 document 中临时的 span
document.body.removeChild(span);
return h('span', column.label);
}
}
}
</script>
知识点
1. 代码第 8 行,设置方法 renderHeader;
2. 代码第 142 - 154 行,注释中详细说明设置表头宽度;
3. 代码第 6 行,表头和单元格都居中显示;
4. 代码第 7 行,当内容过长被隐藏时显示 tooltip,可参考此篇详细说明
效果
更多推荐
已为社区贡献10条内容
所有评论(0)