vue element-ui table組件動態生成表頭和數據并修改單元格格式父子組件通信

2019-11-19 11:02:04

字體：大中小

來源：轉載

供稿：網友

父組件

定義表頭和表內容

data(){ return{  // 表格數據  tableColumns: [],  // 表頭數據  titleData:[], }}

引入并注冊子組件

import TableComponents from "../../components/table/table";//注冊子組件tablecomponents: {  tableC: TableComponents},

獲取表頭和表內容數據。（真實數據應該是從接口獲取的，由于是測試數據這里我先寫死）

mounted() {  this.titleData =     [{      name:'日期',      value:'date'    },{      name:'姓名',      value:'name'    },{      name:'地址',      value:'address'    },{      name:'匯率',      value:'sharesReturn'    }];  this.tableColumns =     [{      date: '2016-05-01',      name: '王小虎1',      address: '上海市普陀區金沙江路 1518 弄',      sharesReturn: 0.03    }, {      date: '2016-05-02',      name: '王小虎2',      address: '上海市普陀區金沙江路 1517 弄',      sharesReturn: 0.04    }, {      date: '2016-05-03',      name: '王小虎3',      address: '上海市普陀區金沙江路 1519 弄',      sharesReturn: -0.01    }, {      date: '2016-05-04',      name: '王小虎4',      address: '上海市普陀區金沙江路 1516 弄',      sharesReturn: 0.00    }];}

html代碼

<tableC :tableColumns="tableColumns" :titleData="titleData" ></tableC>

子組件

js代碼

export default { name: 'tbComponents', props: ['tableColumns','titleData'],}

重點來了

html要怎么寫呢？官網的文檔是這么寫的

el-table :data關聯的是表格里的數據

el-table-column :prop關聯的是表頭的值 :label關聯的是表頭的文本

html動態渲染

<el-table :data="tableColumns" style="width: 100%"> <el-table-column v-for="(item,key) in titleData" :key="key" :prop="item.value"   :label="item.name"></el-table-column></el-table>

效果如下：

最后剩下一個功能，如果匯率大于0，則顯示紅色，小于0則顯示綠色

先貼上完整代碼：

<el-table :data="tableColumns" style="width: 100%">  <el-table-column v-for="(item,key) in titleData" :key="key" :prop="item.value" :label="item.name">    <template slot-scope="scope">     <span v-if="scope.column.property==='sharesReturn'&&scope.row[scope.column.property]>0" style="color:red">{{scope.row[scope.column.property]}}</span>     <span v-else-if="scope.column.property==='sharesReturn'&&scope.row[scope.column.property]<0" style="color: #37B328">{{scope.row[scope.column.property]}}</span>     <span v-else>{{scope.row[scope.column.property]}}</span>    </template>  </el-table-column></el-table>

scope.row和scope.column分別代表什么呢？可以在界面輸出看看

先輸出scope.row