弹窗选择数据回显

 1、打开页面先深度克隆数据

 this.chooseQuestionList = this.constant.otherMethods.deepClone(
              this.details//父级组件传的已经选中的数据
            );
 deepClone(source) {
    if (!source && typeof source !== "object") {
      throw new Error("error arguments", "deepClone");
    }
    const targetObj = source.constructor === Array ? [] : {};
    Object.keys(source).forEach((keys) => {
      if (source[keys] && typeof source[keys] === "object") {
        targetObj[keys] = constantList.deepClone(source[keys]);
      } else {
        targetObj[keys] = source[keys];
      }
    });
    return targetObj;
  },

<el-table
          ref="questionTable"
          highlight-current-row
          v-loading="loading"
          :border="true"
          :data="allQuestionData"
          tooltip-effect="dark"
          style="width: 100%; margin-top: 25px"
          @select="onSelect"
          @selection-change="handleTableSectionChange"
          :row-key="recordRowKey"
        >
          <el-table-column
            align="center"
            reserve-selection
            type="selection"
            width="55"
          ></el-table-column>
          <el-table-column align="center" label="题目类型">
            <template slot-scope="scope">
              <span v-if="scope.row.quType === 1">单选题</span>
              <span v-else-if="scope.row.quType === 2">多选题</span>
              <span v-else-if="scope.row.quType === 3">判断题</span>
              <span v-else-if="scope.row.quType === 4">简答题</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="题目内容"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <span class="quContent">{{ scope.row.quContent }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="难度">
            <template slot-scope="scope">
              <span v-if="scope.row.level === 1">简单</span>
              <span v-if="scope.row.level === 2">中等</span>
              <span v-if="scope.row.level === 3">困难</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="quBankName"
            label="所属题库"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="center"
            prop="createPersonName"
            label="创建人"
          ></el-table-column>
          <el-table-column align="center" label="创建时间">
            <template slot-scope="scope">
              {{ scope.row.createTime }}
            </template>
          </el-table-column>
        </el-table>



onSelect(selection, row) {
      let flag = selection.find((obj) => obj.id === row.id);
      if (!flag) {
        const index = this.chooseQuestionList.findIndex(
          (item) => item.id === row.id
        );
        if (index > -1) {
          this.chooseQuestionList.splice(index, 1);
        }
      }
    },
    // 筛选试题
    handleTableSectionChange(sels) {
      sels.forEach((sel) => {
        // 检查是否已存在相同的项目
        let exists = this.chooseQuestionList.some((proj) => proj.id === sel.id);
        if (!exists) {
          this.chooseQuestionList.push(sel);
        }
      });
    },
 recordRowKey(row) {
      return row.id;
    },
//获取到列表数据后,添加默认勾选
this.$nextTick(() => {
              this.chooseQuestionList.forEach((row) => {
                this.allQuestionData.forEach((arr) => {
                  if (arr.id == row.id) {
                    this.$refs.questionTable.toggleRowSelection(arr, true);
                  }
                });
              });
            });

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值