公司动态
element-ui 动态表头动态数据渲染表格
html代码labelHead设置表头自适应el-table :datadata_list el-table-column :labeldate v-for(date, key) in header :render-headerlabelHead template scopescope {{data_list[scope.$index][key]}} /template /el-table-column /el-tablejs代码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]); } }只做记录。