用了这么久的element-ui库,一直没有做小结,借此机会慢慢深入。
今天这里主要讲述一下el-checkbox群的使用方式。
借element-ui官方checkbox中的demo:indeterminate 状态
<template>
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
<div style="margin: 15px 0;"></div>
<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
<el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
</el-checkbox-group>
</template>
<script>
const cityOptions = ['上海', '北京', '广州', '深圳'];
export default {
data() {
return {
checkAll: false,
checkedCities: ['上海', '北京'],
cities: cityOptions,
isIndeterminate: true
};
},
methods: {
handleCheckAllChange(val) {
this.checkedCities = val ? cityOptions : [];
this.isIndeterminate = false;
},
handleCheckedCitiesChange(value) {
let checkedCount = value.length;
this.checkAll = checkedCount === this.cities.length;
this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
}
}
};
</script>
之前看到这个全选反选的总觉得有点啰嗦,因为外面套了一层el-checkbox-group标签。
先说下他的缺点:当参数形式为[{},{}],需要二次加工处理。
这时候接口出来的全部数据需要单独加工之后赋值给cityOptions;
举例说明: 如下
//data中定义的数据
//出参
dataList:[
{
id:1,
flowName:"测试1"
},{
id:2,
flowName:"测试2"
}
],
//已选值
checkedLists:[1],
//二次接收dataList
checkedMiddle:[],
//标签组件使用:
<!-- 全选标签 -->
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
<!-- 多选项标签 -->
<el-checkbox-group v-model="checkedLists" @change="handleCheckedObjChange">
<el-checkbox v-for="dataObj in dataList" :label="dataObj.id" :key="dataObj.id" >
</el-checkbox>
</el-checkbox-group>
//create执行
created() {
this.checkedMiddle = this.dataList.map(item => {
return item.id
})
console.log(this.checkedMiddle,"打印试试")
},
//method方法
methods: {
//全选
handleCheckAllChange(val){
this.checkedLists = val ? this.checkedMiddle : [];
this.isIndeterminate = false;
},
}
上面举例中的:变量checkedMiddle相当于官方demo中的cityOptions
需要注意:el-checkbox标签中的:label="dataObj.id" 要和<el-checkbox-group>v-model绑定的数据形式是一致的。
<el-checkbox v-for="dataObj in dataList" :label="dataObj.id" :key="dataObj.id" >
</el-checkbox>
所以同学们使用的时候觉得不方便,也可以去掉el-checkbox-group。直接用el-chekbox也是可以的。不过全选反选的方法就需要自己写了。