ElementUI的checkbox小操作
起因
今天在工作的时候,碰到一个比较有意思的小问题,就是Element的checkbox选择问题。
想要实现选中1个另外一个也自动被选中,取消选中另一个也被取消选中。
成品
步骤
- 首先获取点击的checkbox
- 查看当前点击的需不需要其他一起变化
- 判断当前点击的是选中还是取消
- 其他按钮跟着变化
原理
ElementUI中的checkbox会把数据存到一个数组,对数组进行增加或者减少就可以。
代码
部分代码
-
定义checkbox
<el-checkbox-group v-model="checkList" @change="checkOthers"> <el-checkbox label="1"></el-checkbox> <el-checkbox label="2"></el-checkbox> <el-checkbox label="3"></el-checkbox> <el-checkbox label="4"></el-checkbox> <el-checkbox label="5"></el-checkbox> </el-checkbox-group>
-
定义data
data(){ return { checkList: [], // 选中的值 prevCheckList: [], // 之前选中的值 changedValue: [], // 改变的值 bindData: [['1','2'],['3','5']] // 绑定的值 } },
-
定义methods
methods:{ checkOthers(){ // 获取改变的值(changedValue),通过合并两个数组并遍历,changedValue的个数应该是1 [this.changedValue = ''] = this.checkList.concat(this.prevCheckList).filter(function(v, i, arr) { return arr.indexOf(v) === arr.lastIndexOf(v); }); // 遍历绑定的数据 for(const val of this.bindData){ // 如果changedValue在此数组中 if(val.indexOf(this.changedValue) !== -1){ // 如果选中的列表中包含changedValue,说明changedValue是新选中的值 if(this.checkList.indexOf(this.changedValue) !== -1){ // 首先将changedValue和与他绑定的值增加到checkList,然后去重复 this.checkList = Array.from(new Set(this.checkList.concat(val))) }else{ // 走到这里说明changedValue是被取消选中的值,将与changedValue绑定的值都取消选中 this.checkList = this.checkList.filter(item =>{ if(val.indexOf(item) === -1){ return item } }) } } } // 更新prevCheckList this.prevCheckList = this.checkList.concat() } }
整体代码
<template>
<div id="app">
<el-row>
<el-col :span="8" :offset="8">
<el-card shadow="always">
<span>要求:1和2的状态同步变化,3和5的状态同步变化。</span>
<el-divider>xiaoluo</el-divider>
<el-checkbox-group v-model="checkList" @change="checkOthers">
<el-checkbox label="1"></el-checkbox>
<el-checkbox label="2"></el-checkbox>
<el-checkbox label="3"></el-checkbox>
<el-checkbox label="4"></el-checkbox>
<el-checkbox label="5"></el-checkbox>
</el-checkbox-group>
</el-card>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
name: 'App',
components: {
},
data(){
return {
checkList: [], // 选中的值
prevCheckList: [], // 之前选中的值
changedValue: [], // 改变的值
bindData: [['1','2'],['3','5']] // 绑定的值
}
},
methods:{
checkOthers(){
// 获取改变的值(changedValue),通过合并两个数组并遍历,changedValue的个数应该是1
[this.changedValue = ''] = this.checkList.concat(this.prevCheckList).filter(function(v, i, arr) {
return arr.indexOf(v) === arr.lastIndexOf(v);
});
// 遍历绑定的数据
for(const val of this.bindData){
// 如果changedValue在此数组中
if(val.indexOf(this.changedValue) !== -1){
// 如果选中的列表中包含changedValue,说明changedValue是新选中的值
if(this.checkList.indexOf(this.changedValue) !== -1){
// 首先将changedValue和与他绑定的值增加到checkList,然后去重复
this.checkList = Array.from(new Set(this.checkList.concat(val)))
}else{
// 走到这里说明changedValue是被取消选中的值,将与changedValue绑定的值都取消选中
this.checkList = this.checkList.filter(item =>{
if(val.indexOf(item) === -1){
return item
}
})
}
}
}
// 更新prevCheckList
this.prevCheckList = this.checkList.concat()
}
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
欢迎关注公众号!xiaoluo的前端之路
更多优质文章等你来读。