Element-UI的Select组件实现全选
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
·
选中状态变化的时候,分五种情况
1、点击全选,选中全部
2、全选状态下,再次点击全选,取消全部选中
3、全选状态下,取消了某个选中,就需要取消 全选 和 当前这个数据 的选中
4、没有全选,但是勾选了除全选外的所有数据,就是全选了,就选中所有
5、没有全选,但也没有勾选除全选外的所有数据,不做处理
<template>
<div>
<el-select v-model="chooseData" multiple placeholder="请选择" style="width: 300px" @change='selectAll'>
<el-option v-for="item in selectOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
</template>
<script>
export default {
data () {
return {
selectOptions: [
{ value: 'ALL_SELECT', label: '全选' },
{ value: '1', label: '苹果' },
{ value: '2', label: '橘子' },
{ value: '3', label: '葡萄' },
{ value: '4', label: '西瓜' },
{ value: '5', label: '芒果' },
{ value: '6', label: '山竹' }
],
oldChooseData: [],
chooseData: []
};
},
methods: {
selectAll (val) {
const allValues = this.selectOptions.map(item => {
return item.value;
});
// 用来储存上一次选择的值,可进行对比
const oldVal = this.oldChooseData.length > 0 ? this.oldChooseData : [];
// 若选择全部
if (val.includes('ALL_SELECT')) {
this.chooseData = allValues;
}
// 取消全部选中, 上次有, 当前没有, 表示取消全选
if (oldVal.includes('ALL_SELECT') && !val.includes('ALL_SELECT')) {
this.chooseData = [];
}
// 点击非全部选中,需要排除全部选中 以及 当前点击的选项
// 新老数据都有全部选中
if (oldVal.includes('ALL_SELECT') && val.includes('ALL_SELECT')) {
const index = val.indexOf('ALL_SELECT');
val.splice(index, 1); // 排除全选选项
this.chooseData = val;
}
// 全选未选,但是其他选项都全部选上了,则全选选上
if (!oldVal.includes('ALL_SELECT') && !val.includes('ALL_SELECT')) {
if (val.length === allValues.length - 1) {
this.chooseData = ['ALL_SELECT'].concat(val);
}
}
// 储存当前选择的最后结果 作为下次的老数据
this.oldChooseData = this.chooseData;
}
}
};
</script>
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:2 个月前 )
c345bb45
1 年前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 1 年前
新一代开源开发者平台 GitCode,通过集成代码托管服务、代码仓库以及可信赖的开源组件库,让开发者可以在云端进行代码托管和开发。旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。
更多推荐

所有评论(0)