手把手带你二次封装Element-UI el-table表格组件

背景：

用于展示后台返回的type===5的表格数据，返回的数据结构如下：

[
    {
        "data": "{\"heads\":[\"id\",\"内容类型\",\"违规类型\",\"内容\",\"扣除信誉分\",\"操作者\",\"状态\",\"处罚备注\",\"处罚时间\"],\"rows\":[{\"eles\":[\"96737\",\"封禁单个模板跳转能力\",\"群发推广\",\"8__mFyXSuZjOfC3kvojjLGTnB81k1c8hKjeJ9WG3XG4\",\"0\",\"auto_punish_vme\",\"ADDED\",\"[punish_id:536604064503311][dye:]测试\",\"2024-05-15 17:53:31\"]}]}",
        "name": "最新一次违规记录",
        "type": 5
    },
    {
        "data": "{\"heads\":[\"操作时间\",\"操作人\",\"操作类型\",\"封禁时长\",\"恶意类型\",\"举报来源\",\"操作备注\",\"解封信息\"],\"rows\":[{\"eles\":[\"2024-05-10 16:27:53\",\"wumeiyou\",\"短封\",\"2024-05-17 16:27:52\",\"网络辱骂\",\"COME_FROM_OP\",\"测试 dyeloginfo:[]\",\"操作时间：2024-05-17 16:27:56，操作人：sectimer_unban，备注：wxintimer timeout unban dyeloginfo:[]\"]},{\"eles\":[\"2024-05-10 16:27:53\",\"chanxinzhong\",\"测试\",\"2024-05-17 16:27:52\",\"网络辱骂\",\"COME_FROM_OP\",\"测试 dyeloginfo:[]\",\"操作时间：2024-05-17 16:27:56，操作人：sectimer_unban，备注：wxintimer timeout unban dyeloginfo:[]\"]}]}",
        "name": "封号记录",
        "type": 5
    }
]

type===5为表格数据，需要将返回的每个对象都为一个table处理，那可以把el-table的属性数据显示用父组件传过来，然后子组件去接受渲染。

官方的el-table组件使用到的Table Attributes：

data：显示的数据 【array】

border：是否带有纵向边框 【boolean默认false】

header-cell-style：表头单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有表头单元格设置一样的 Style。【Function({row, column, rowIndex, columnIndex})/Object】

Table-column Attributes：

label：显示的标题【string】

prop：对应列内容的字段名，也可以使用 property 属性【string】

prop：对应列内容的字段名，也可以使用 property 属性【string】

封装表格：

①接受父组件传过来的值：

  props: {
    tableDataList: { //表格列表
      type: Array,
    },
  },  

②处理数据

因为一开始拿到的数据需要使用JSON.parse去解析，然后再提取出heads跟rows字段，把处理好的数据push到formattedData。

 data() {
      return {
        formattedData: [], // 表格转换好的数据
      }
  },
  mounted() {
    this.tableDataList.forEach(item => {
      let dataObject = JSON.parse(item.data); // 将 data 字段解析为对象
      this.handleTableData(item.name, dataObject);
    });
  },
  methods: {
    handleTableData(name, dataObject) {
      this.renderTable(dataObject, name);
    },
    renderTable(dataObject, name) {
      let heads = dataObject.heads;
      let rows = dataObject.rows.map(row => row.eles); // 提取 eles 字段作为行数据
      this.formattedData.push({ name: name, heads: heads, rows: rows }); // 添加新的数据对象到 formattedData 数组中
    },
  }

③组件封装

<template>
  <!-- 表格处理 -->
  <div>
    <div class="box" v-for="(dataObject, index) in formattedData" :key="index">
      <p>{{ dataObject.name }}:</p>
      <el-table :data="dataObject.rows" border style="width: 100%" :header-cell-style="{fontSize: '14px', backgroundColor: '#f8f8f8',color:'#333'}">
        <el-table-column v-for="head in dataObject.heads" :key="head" :prop="head" :label="head">
          <template slot-scope="scope">
            {{ scope.row[dataObject.heads.indexOf(head)] }}
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.box {
  max-width: 1100px;
  margin-bottom: 20px;
}

</style>

④父组件调用

accessAcctAuditInfoList是存后台返回所有外层展示的更重字段数据，不止表格数据，这边因为是处理type===5的表格类型，先把表格字段的数据先遍历出来，传给子组件。

    <template v-if="accessAcctAuditInfoList && accessAcctAuditInfoList.filter(item => item.type === 5).length != 0">
      <div class="table_container">
        <tableData :tableDataList="accessAcctAuditInfoList.filter(item => item.type === 5)" />
      </div>
    </template>