vue elementUI 动态渲染表格

          <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;
      });
    },
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值