element-ui实现动态表头的表格问题汇总

demo代码：

  
    
    
    
  
  
    

			
        
          
        
      
    
    <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>
  

动态表格是生成列，也就是每一个然后再根据所有列去遍历生成行，这样一个过程，知道这些，要做的就是根据这么一个过程去生成这样一个数据格式就行了。

实现动态表格的延伸：

element-ui官方推荐的CDN引入使用element的任务组件都是没有问题的，但是如果将样式和组件库代码下载下来改为本地引入，icon组件将不能使用！

CDN引入：

<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字体图标文件。