vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信

 

这篇文章主要介绍了vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信,需要的朋友可以参考下

父组件

定义表头和表内容

1 2 3 4 5 6 7 8

data(){  return{   // 表格数据   tableColumns: [],   // 表头数据   titleData:[],  } }

引入并注册子组件

1 2 3 4 5

import TableComponents from "../../components/table/table"; //注册子组件table components: {   tableC: TableComponents },

获取表头和表内容数据。（真实数据应该是从接口获取的，由于是测试数据这里我先写死）

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

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

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

子组件

js代码

1 2 3 4

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

重点来了

html要怎么写呢？官网的文档是这么写的

el-table :data关联的是表格里的数据

el-table-column :prop关联的是表头的值 :label关联的是表头的文本

html动态渲染

1 2 3 4

<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则显示绿色

先贴上完整代码：

1 2 3 4 5 6 7 8 9

<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代表 当前行 的数据

再来输出scope.column

得到这样一个对象，仔细看看，我们可以发现一点门路

由此可见scope.column.property代表 当前列的值

合并起来，当前单元格的值应该是scope.row[scope.column.property]