Element Table 动态生成列并且不同的列显示不同的样式

  • 2020 年 2 月 25 日
  • 笔记

我们在使用表格控件时，经常需要动态生成表格的列，并且某些列要求特殊的样式（如右对齐）

表格样式—————-  可以用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])      ]);  },

VirMach 便宜 VPS

QNews

QNews