Element Table 动态生成列并且不同的列显示不同的样式
Element Table 动态生成列并且不同的列显示不同的样式
tianyawhl
发布于 2020-02-25 12:28:47
发布于 2020-02-25 12:28:47
我们在使用表格控件时，经常需要动态生成表格的列，并且某些列要求特殊的样式（如右对齐）
表格样式---------------- 可以用cell-class-name 实现右对齐
表格头根据空格换行 --- 使用render-header
addPullRightClass和renderheader都是methods中的函数
el-table模板
<el-table :data="filterData2(tableData,searchContent)"
style="width: 100%" v-if="isShowTable1" border :cell-class-name="addPullRightClass">
<el-table-column
v-for="(item,index) in tableColumns"
:key="index"
:prop="item.prop"
:label="item.label"
:render-header="renderheader"
></el-table-column>
</el-table>数据格式
tableColumns: [
{
label: "日期 日期",
prop: "date"
},
{
label: "名称",
prop: "name"
},
{
label: "地址",
prop: "address"
}
],
tableData: [
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄"
},
{
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀区金沙江路 1517 弄"
},
{
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1519 弄"
},
{
date: "2016-05-03",
name: "王小虎",
address: "上海市普陀区金沙江路 1516 弄"
}
],样式右对齐函数（返回的是class）
addPullRightClass({row, column, rowIndex, columnIndex}){
//console.log(column)
if(column.property==="date" || column.property==="name"){
console.log("hi")
return "text-right"
}else{
return ""
}
}.text-right{text-align:right !important;}头部渲染函数（根据空格换行显示）
renderheader(h, { column, $index }) {
column.minWidth=110
return h("div", {style:{width:'100%',paddingLeft:0,lineHeight:'25px'}}, [
h("span", {style:{display:'block'}}, column.label.split(" ")[0]),
h("span", {style:{display:'block'}}, column.label.split(" ")[1])
]);
}, 本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读