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