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

data(){
 return{
  // 表格數(shù)據(jù)
  tableColumns: [],
  // 表頭數(shù)據(jù)
  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: '上海市普陀區(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
    }];
}

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

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

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

<el-table :data="tableColumns" >
  <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" >{{scope.row[scope.column.property]}}</span>
     <span v-else-if="scope.column.property==='sharesReturn'&&scope.row[scope.column.property]<0" >{{scope.row[scope.column.property]}}</span>
     <span v-else>{{scope.row[scope.column.property]}}</span>
    </template>
  </el-table-column>
</el-table>