el-table 动态表格实现+原生表格实现代码

1.接口数据

"titles": [
            "日期",
            "类型",
            "用户数",
            "累计活跃用户",
            "累计活跃率",
            "数据日期",
            "数据更新时间"
        ],
         "datas": [
            {
                "日期": "20220213",
                "类型": "内部用户",
                "用户数": "885577",
                "累计活跃用户": "312776",
                "累计活跃率": "3.12776885577E11",
                "数据日期": 1646064000000,
                "数据更新时间": 1646355601797
            },
            {
                "日期": "20220220",
                "类型": "内部用户",
                "用户数": "856552",
                "累计活跃用户": "311031",
                "累计活跃率": "3.11031856552E11",
                "数据日期": 1646064000000,
                "数据更新时间": 1646355601836
            },]

后台给了一个表头数组跟表格数据，剩下的问题就要前端自己造数据

   组装函数
             arrdata =titles.map((item, index) => {
            let a = {}
            a['propName'] = item
            a['propItem'] = 'propId' + index
            return a
          })
          arrdata2 = datas.map((mas) => {
            let b = {}
            Object.keys(mas).forEach((value, index) => {
              b['propId' + index] = mas[value]
            })
            return b
          })
          this.tableColumnList = arrdata;
          this.dataList = arrdata2;

表格代码

<el-table v-loading="dataListLoading"
              :data="dataList"
              border
              align="center">

      <el-table-column :label="item.propName"
                       :property="item.propItem"
                       v-for="item in tableColumnList"
                       :key="item.prop"
                       align="center">
        <template slot-scope="scope">
          <span>{{scope.row[scope.column.property]}}</span>
        </template>
      </el-table-column>
    </el-table>

说明

注意：tableColumnList就是实现动态的关键因素！
prop跟表中的字段是一一对应的，propName就是每个字段的中文名，也即在表头显示的名字。

动态表格与element一般表格在使用方法上的两个区别：

1、label与property的赋值方式
动态表格，表格的label和property是动态根据后台返回的数据(或者从js获取)来取值的，后台返回的数据就是上面的tableColumnList。

通过 :label=“item.propName” 取得tableColumnList中的propName，也就是表头每一列的名字；
通过 :property=“item.propItem” 取得tableColumnList中对象的prop，也就是后台实体类中的属性名，
2、属性和数据双向绑定方式,也就是 scope.row.

通过 scope.row[scope.column.property] 来获取每一个属性对应的数据，
scope.column.property 中的property取的就是 :property=“item.propItem” 中的值；

原生写法vue

 <table cellpadding="20"
           border="1"
           cellspacing="0">
      <thead>
        <tr>
          <td v-for="(item,index) in arr"
              :key="index">{{item}}</td>

        </tr>
      </thead>
      <tbody id="contain"></tbody>
    </table>

数据一样

   arr: ["日期",
        "类型",
        "用户数",
        "累计活跃用户",
        "累计活跃率",
        "数据日期",
        "数据更新时间"],
    }
 datas = [
        {
     
          "日期": "20220112",
          "类型": "内部用户",
          "用户数": "884304",
          "累计活跃用户": "278064",
          "累计活跃率": "0.3144439016446833",
          "数据日期": 1645459200000,
          "数据更新时间": 1645750802450
        },
        {
    
          "日期": "20220111",
          "类型": "内部用户",
          "用户数": "884268",
          "累计活跃用户": "276740",
          "累计活跃率": "0.3129594195424916",
          "数据日期": 1645459200000,
          "数据更新时间": 1645750803406
        }
      ]

代码实现部分

  let list = []
      this.datas.forEach(item => {
        let arr2 = Object.values(item)
        if (arr2.length) {
          list.push(arr2)
        }
      })
      let contain = document.getElementById('contain')
      console.log(contain, 'contain');

      var str = '';
      //外层循环,生成tr
      for (var i = 0; i <= list.length - 1; i++) {
        // 外层循环生成tr标签,循环几次,就生成几个tr标签
        // 因为tr标签中还要有td内容,要将两个tr标签,分开,写成拼接的形式
        str += '<tr>';

        // 第一个单元格是单独生成的,不参与内层循环,是 当前 外层循环 索引下标+1
        str += ``;

        //当前行,对应的二维数组，循环的对象是 arr[i] , 
        //生成 arr[i] 的所有的索引下标，通过索引下标,获取对应的数据。
        // 起始数值是0 终止数值是 arr[i]的最大索引下标，arr[i]的length-1
        for (var j = 0; j <= list[i].length - 1; j++) {
          // 每一个单元的内容,就是当前二维数组单元的数据内容
          // 获取二维数组, 数组变量[一维索引][二维索引] 一维索引是i 二维索引是j
          str += `<td>${list[i][j]}</td>`;
        }
        str += '</tr>';
      }
      // 将定义好的内容,写入到taody标签中
      contain.innerHTML = str;