vue element-ui table组件动态生成表头和数据并修改单元格格式组件动态生成表头和数据并修改单元格格式 父父
子组件通信子组件通信
主要介绍了vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信,需要的朋友可以参考下
父组件父组件
定义表头和表内容
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要怎么写呢?官网的文档是这么写的
评论0