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

來源：懂視網責編：小采時間：2020-11-27 21:52:14

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

vue element-ui table組件動態生成表頭和數據并修改單元格格式父子組件通信:父組件定義表頭和表內容 data(){ return{ // 表格數據 tableColumns: [], // 表頭數據 titleData:[], } } 引入并注冊子組件 import TableComponents from ../../components/table/table; //注冊子組件table c

推薦度：

點擊下載本文 文檔為doc格式

導讀vue element-ui table組件動態生成表頭和數據并修改單元格格式父子組件通信:父組件定義表頭和表內容 data(){ return{ // 表格數據 tableColumns: [], // 表頭數據 titleData:[], } } 引入并注冊子組件 import TableComponents from ../../components/table/table; //注冊子組件table c

父組件

定義表頭和表內容

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

引入并注冊子組件

import TableComponents from "../../components/table/table";
//注冊子組件table
components: {
 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