快捷導(dǎo)航

vue element-ui table組件動(dòng)態(tài)生成表頭和數(shù)據(jù)并修改單元格格式父子組件通信

更新時(shí)間：2019年08月15日 13:58:02 作者：CcChan

這篇文章主要介紹了vue element-ui table組件動(dòng)態(tài)生成表頭和數(shù)據(jù)并修改單元格格式父子組件通信,需要的朋友可以參考下

父組件

定義表頭和表內(nèi)容

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

引入并注冊(cè)子組件

import TableComponents from "../../components/table/table";
//注冊(cè)子組件table
components: {
  tableC: TableComponents
},

獲取表頭和表內(nèi)容數(shù)據(jù)。（真實(shí)數(shù)據(jù)應(yīng)該是從接口獲取的，由于是測(cè)試數(shù)據(jù)這里我先寫死）

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

html代碼

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

子組件

js代碼

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

重點(diǎn)來了

html要怎么寫呢？官網(wǎng)的文檔是這么寫的

el-table :data關(guān)聯(lián)的是表格里的數(shù)據(jù)

el-table-column :prop關(guān)聯(lián)的是表頭的值 :label關(guān)聯(lián)的是表頭的文本

html動(dòng)態(tài)渲染

<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>

效果如下：

最后剩下一個(gè)功能，如果匯率大于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

由此可見scope.row代表當(dāng)前行的數(shù)據(jù)

再來輸出scope.column

得到這樣一個(gè)對(duì)象，仔細(xì)看看，我們可以發(fā)現(xiàn)一點(diǎn)門路

由此可見scope.column.property代表當(dāng)前列的值

合并起來，當(dāng)前單元格的值應(yīng)該是scope.row[scope.column.property]

總結(jié)

以上所述是小編給大家介紹的vue element-ui table組件動(dòng)態(tài)生成表頭和數(shù)據(jù)并修改單元格格式父子組件通信,希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

您可能感興趣的文章: