弹窗选择数据回显

 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);
                  }
                });
              });
            });

 

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
弹窗中对数据进行修改后,点击"Save Changes"按钮进行保存。在改的js代码中,可以看到通过ajax请求将表单数据进行了序列化,并发送到"/exhibition/updatedex"的URL上。如果返回的数据中的errorCode为"100",则弹出"更新成功"的提示框,否则弹出"上传失败"的提示框。\[1\] 对应的数据回显的js代码中,通过ajax请求获取到后台传回的数据,并将数据注入到对应的HTML元素中。例如,通过document.getElementById('thumbnailupdated').src将图片的src属性设置为"http://localhost:8080/exhibition/"+data.fileName,通过$("#exNameupdated").val(data.exName)将输入框的值设置为data.exName的值。最后,通过$('#modal-edit').modal('show')弹出窗口。\[2\] 在操作按钮的HTML代码中,第二个标签是操作按钮,通过onclick事件调用updated函数,并传入exlist.exId作为参数。这个函数会通过ajax请求获取到对应exId的数据,并将数据注入到弹窗中,最后通过$('#modal-edit').modal('show')弹出窗口。\[3\] #### 引用[.reference_title] - *1* *2* *3* [点击弹窗数据回显并实现修改](https://blog.csdn.net/qq_45481620/article/details/121479481)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值