el-table表格根据后端返回数据自定义表格

【代码】el-table表格根据后端返回数据自定义表格。

新生代bug达人

745人浏览 · 2023-04-07 13:29:07

新生代bug达人 · 2023-04-07 13:29:07 发布

        //html部分  <el-table
                      border
                      ref="bookListRef"
                      //数据渲染
                      :data="list.datas"
                    >
                      <el-table-column
                        label="序号"
                        type="index"
                        align="center"
                      />
                      <el-table-column
                        //表头渲染
                        v-for="(tableColumn, ii) in list.title"
                        :label="tableColumn.columnName"
                        :key="ii"
                        :prop="tableColumn.columnField"
                        align="center"
                        :show-overflow-tooltip="true"
                      >
                      </el-table-column>
                    </el-table>
      //data数据格式
             list: {
        datas: [
          {
            deviceType: 2,
            orderDeviceProcessId: 1096,
            parentProcessId: 6,
            standard: "100%",
            taskBatchId: "ac50fcc359db4ad49dcb80457c3250a4",
            testTime: "2023-04-06 00:00:00~2023-04-06 14:11:00",
            testValue: "5435",
            testValueCount: "5435",
            truthValue: "5435",
            truthValueCount: "5435",
          },
        ],
        title: [
          {
            processId: 81,
            id: 1096,
            columnField: "standard",
            columnName: "正确率",
          },
          {
            processId: 81,
            id: 1096,
            columnField: "testValueCount",
            columnName: "累计被测设备",
          },
          {
            processId: 81,
            id: 1096,
            columnField: "truthValueCount",
            columnName: "累计真值系统",
          },
        ],
      },