element-ui 动态表头动态数据渲染表格

html代码：labelHead设置表头自适应

<el-table :data="data_list">
	<el-table-column  :label="date" v-for="(date, key) in header" :render-header="labelHead">
		<template scope="scope">
			{{data_list[scope.$index][key]}}
		</template>
	</el-table-column>
</el-table>

js代码：

data() {
	return {
		header:["A","B", "C"],  //表头数据
		data_list:[    //内容数据
			[1, 2, 3],
			[4,5,6]
		]
	}
},
methods:{
	labelHead(h,{column,index}){
		let l = column.label.length;
		let f = 12; //每个字大小，其实是每个字的比例值，大概会比字体大小差不多大一点，
		column.minWidth = f*l; //字大小乘个数即长度 ,注意不要加px像素，这里minWidth只是一个比例值，不是真正的长度
		//然后将列标题放在一个div块中，注意块的宽度一定要100%，否则表格显示不完全
		return h('span',{class:'table-head',style:{width:'100%'}},[column.label]);
	}
}

只做记录。