当前位置: 首页> 文旅> 艺术 > 弹窗选择数据回显

弹窗选择数据回显

时间:2025/8/24 3:43:24来源:https://blog.csdn.net/weixin_47218354/article/details/141891822 浏览次数:0次

 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-tableref="questionTable"highlight-current-rowv-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-columnalign="center"reserve-selectiontype="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-columnalign="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-columnalign="center"prop="quBankName"label="所属题库"show-overflow-tooltip></el-table-column><el-table-columnalign="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);}});});});

 

关键字:弹窗选择数据回显

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: