1.显示的dialog
<!-- 选中标签 --> <el-dialog :visible.sync="checkTag" :title="userTitle" width="30%" @close="tagID = []"> <div v-loading="listLoadingTag" element-loading-text="心急吃不了热豆腐"> <div class="tages"> <el-checkbox-group v-model="checkedTags" > <el-checkbox v-for="(item,index) in tages" :indeterminate="item.status === ‘half_checked‘" :label="index" :key="index" @change="changeCheckCss(index)"> {{ item.label_name }} </el-checkbox> </el-checkbox-group> </div> </div> <span slot="footer" class="dialog-footer"> <el-button @click="handelCloseTag">取 消</el-button> <el-button type="primary" @click="submitcheckTag">确 定</el-button> </span> </el-dialog>
2.切换状态
changeCheckCss(index) { this.tages[index].status = false },
3.拿到只改变发生改变的数据处理逻辑
this.submitTags = [] // 筛选出新选中的值 for (let i = 0; i < this.checkedTags.length; i++) { let num = 0 for (let j = 0; j < this.CopycheckedTags.length; j++) { if (this.checkedTags[i] === this.CopycheckedTags[j]) { num += 1 break } } if (num === 0) { const obj = { id: this.tages[this.checkedTags[i]].id, status: ‘checked‘ } this.submitTags.push(obj) } } // 筛选冲被取消选中的值 for (let i = 0; i < this.CopycheckedTags.length; i++) { let num = 0 for (let j = 0; j < this.checkedTags.length; j++) { if (this.CopycheckedTags[i] === this.checkedTags[j]) { num += 1 break } } if (num === 0) { const obj = { id: this.tages[this.CopycheckedTags[i]].id, status: ‘not_checked‘ } this.submitTags.push(obj) } }
原文:https://www.cnblogs.com/wangliko/p/10917537.html