弹窗选择数据回显

本文主要是介绍弹窗选择数据回显，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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

 

这篇关于弹窗选择数据回显的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---