欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue elementUI 动态渲染表格

程序员文章站 2022-06-07 22:34:42
...
          <el-table :data="tableData2" border style="width: 100%" max-height="300">
            <el-table-column prop="num" label="序号" align="left" width="50">
              <template slot-scope="scope">
                <div>{{scope.$index+1}}</div>
              </template>
            </el-table-column>
            <template v-for="(item, index) in table2ColNames">
              <el-table-column min-width="150" show-overflow-tooltip :key="index" :label="item">
                <template slot-scope="scope">
                  <div class="cellItem" style="display: inline-block;">
                    <div style="display: inline-block;">{{scope.row[item]}}</div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column min-width="100" :key="item" label="抽检结果">
                <template slot-scope="scope">
                  <div class="cellItem" style="display: inline-block;">
                    <div style="display: inline-block;">
                      <el-checkbox
                        ref="cellCheckBox"
                        label="错误"
                        :checked="scope.row.checkResultList[index] == 1"
                        :disabled="scope.row.disable == 1"
                        @change="handelCellClick(scope.row, scope.$index, item)"
                      />
                    </div>
                  </div>
                </template>
              </el-table-column>
            </template>
          </el-table>

data数据

    async watchTask(row) {
      this.dialogVisible = true;
      this.table2ColNames = [];
      this.taskData2 = [];
      this.detailType = row.checkStatus;
      let { data } = await this.$Axios.get(
        `${this.baseURL}/task/check?id=${row.id}`
      );
      if (data.code) {
        this.$message({
          type: "info",
          message: data.msg
        });
        return false;
      }
      if (data.length == 0) {
        this.tableData2 = [];
        this.table2ColNames = row.checkDataColumnList;
        return false;
      }
      data.forEach((item, i) => {
        let tableRow = {};
        this.table2ColNames = row.checkDataColumnList;
        tableRow["id"] = row.id;
        tableRow["disable"] = row.checkStatus;
        tableRow["checkResultList"] = item.checkResultList;
        const keyList = row.checkDataColumnList;
        const valueList = item.checkDataValueList;
        for (const index in keyList) {
          let colName = keyList[index];
          let colValue = valueList[index];
          tableRow[colName] = colValue;
        }
        this.tableData2[i]=tableRow;
      });
    },