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

父組件

成都創(chuàng)新互聯(lián)是一家專業(yè)提供柯城企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、外貿(mào)網(wǎng)站建設(shè)、H5頁(yè)面制作、小程序制作等業(yè)務(wù)。10年已為柯城眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站設(shè)計(jì)公司優(yōu)惠進(jìn)行中。

定義表頭和表內(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代碼

子組件

js代碼

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

重點(diǎn)來(lái)了

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