动态生成html-Element-ui实现动态表头的表格问题汇总

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

演示代码：

  
    
    
    <link rel="stylesheet" type="text/css" href="./lib/element-ui/theme-chalk/index.css" />
  
  
    

			
        
          
            
            {{tableBody[scope.$index][idx]}}
          
        
      
    
    
    
    
      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] ]
					});
        },
      });
    
  

动态表是生成列，即根据每一行后面的所有列来遍历生成的行。 这样一个过程，知道了这一点动态生成html，你要做的就是按照这样一个过程生成这样一个数据格式。

实现动态表单的扩展：

element-ui官方推荐的CDN使用element导入任务组件是没有问题的，但是如果下载样式和组件库代码并导入到本地，图标组件就无法使用了！

CDN简介：

请求资源：

请求的网络资源中有一个附加的 element-icons.woff 文件。 原因：检查element中index.css中图标的导入形式。

@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;
}

解决方案：

复制字体图标资源链接下载动态生成html，然后在element的index.css文件夹同级目录下创建fonts文件夹，并加载下载的element-icons.woff和element-icons.ttf字体图标文件。