elementui 动态生成表格el-table

当el-table元素中注入data对象数组后，在el-table-column中用prop属性来对应对象中的键名即可填入数据，用label属性来定义表格的列名。

1. template

<el-table :data="tableData">
	<el-table-column
	   v-for="item in tableHead"
	   :key="item.id"
	   :prop="item.id"
	   :label="item.name"
	></el-table-column>
</el-table>

注： tableHead是表头数据，tableData是表格数据。

2.data 数据：

data() {
   return {
      	//表头
		tableHead: [
			{
			  id: 'time',
			  name: '时间',
			  checked: true,   //默认选中
			},
			{
			  id: 'number',
			  name: '数量',
			  checked: false,    //默认不选
			},
		],
		//表中数据
		tableData: [
			time: '',
			number: '',
		]
	}
},

注： 因为el-table表格中的数据是通过prop绑定的，所以利用:prop="item.id"，而item.id指向tableData中的数据，所以表格拿到了数据。（tableHead中的id和tableData中的键名是对应的）