element-ui实现动态表头的表格问题汇总
demo代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>el-table动态表头</title>
<link rel="stylesheet" type="text/css" href="./lib/element-ui/theme-chalk/index.css" />
</head>
<body>
<div id="app">
<el-table
:data="tableBody"
:header-cell-style="{ background: '#F3F4F7' }"
:header-row-style="{ fontWeight: 500, color: '#909399' }"
>
<el-table-column align="center" :label="tableHeadItem" v-for="(tableHeadItem, idx) in tableHead" :key="idx">
<template scope="scope">
<i class="el-icon-platform-eleme" style="font-size: 16px"></i>
{{tableBody[scope.$index][idx]}}
</template>
</el-table-column>
</el-table>
</div>
<script src="./lib/vue/vue.js"></script>
<script src="./lib/element-ui/index.js"></script>
<script type="text/javascript">
new Vue({
el: "#app",
data() {
return {
res: [
{
NAME: "王二",
VALUE: 1,
SEX: 2,
},
{
NAME: "张三",
VALUE: 1,
SEX: 1,
},
{
NAME: "李四",
VALUE: 2,
SEX: 1,
},
],
tableBody: [],
tableHead: [],
};
},
created() {
this.tableHead = Object.keys(this.res[0]); // 表头 [ "NAME", "VALUE", "SEX" ]
this.res.forEach((item) => {
this.tableBody.push(Object.values(item)); // 表体 [ ["王二", 1, 2], ["张三", 1, 1], ["李四"， 2, 1] ]
});
},
});
</script>
</body>
</html>动态表格是生成列，也就是每一个<el-table-column>然后再根据所有列去遍历生成行，这样一个过程，知道这些，要做的就是根据这么一个过程去生成这样一个数据格式就行了。
实现动态表格的延伸：
element-ui官方推荐的CDN引入使用element的任务组件都是没有问题的，但是如果将样式和组件库代码下载下来改为本地引入，icon组件将不能使用！
CDN引入：
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>请求资源：
请求的网络资源中多了一个element-icons.woff文件，原因：查看element中index.css中的icon的引入方式。
@font-face {
font-family: element-icons;
src: url(fonts/element-icons.woff) format("woff"), url(fonts/element-icons.ttf) format("truetype");
font-weight: 400;
font-display: "auto";
font-style: normal;
}解决方法：
复制字体图标资源链接下载下来，然后在element的index.css文件夹同级目录中新建fonts文件夹放入下载好的element-icons.woff和element-icons.ttf字体图标文件。