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