element-ui中el-cascader实现全选功能
el-cascader一层级实现全选功能前言由于特殊需要,需要在多个検索バー统一使用el-cascader来实现.但由于element并未提供改功能,简单做下总结业务需求在只有一层级的数据中(没有children)实现全选功能工具codepen在线编码element-ui官网-级联选择器代码可以直接copy到在线编码工具中HTML<script src="//unpkg.com/vue/di
·
el-cascader一层级实现全选功能
前言
由于特殊需要,需要在多个検索バー统一使用el-cascader来实现.但由于element并未提供改功能,简单做下总结
业务需求
在只有一层级的数据中(没有children)实现全选功能
工具
代码
可以直接copy到在线编码工具中
HTML
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.15.7/lib/index.js"></script>
<div id="app">
<!-- 核心代码 -->
<el-cascader
v-model="checkedForm.org_names"
:options="org_options"
:props="props"
collapse-tags
@change="cardChange"
clearable></el-cascader>
</div>
CSS
@import url("//unpkg.com/element-ui@2.15.7/lib/theme-chalk/index.css");
JS
var Main = {
data() {
return {
props: { multiple: true },
earlySelected: [],
checkedForm: {
org_names: []
},
// 对于半全选,判断全选功能的进入或是退出
flag: false,
org_options: [
{
value: "",
label: "全て"
},
{
value: "1",
label: "东南"
},
{
value: "2",
label: "西北"
},
{
value: "3",
label: "东北"
},
{
value: "4",
label: "西南"
}
]
};
},
methods: {
cardChange(event) {
const currentSelected = event.map((items) => items[0]);
const differenceMakers = [
...currentSelected.filter((item) => !this.earlySelected.includes(item)),
...this.earlySelected.filter((item) => !currentSelected.includes(item))
];
if (differenceMakers.includes("")) {
if (currentSelected.includes("")) {
// 全選択
this.checkedForm.org_names = this.org_options.map(
(item) => item["value"]
);
this.flag = true
} else {
// 全選択解消
this.checkedForm.org_names = [];
this.flag = false
}
} else {
const options = this.org_options
.map((item) => item["value"])
.filter((item) => item);
const optionsSelectedCurrent = currentSelected.filter((item) => item);
if (options.length === optionsSelectedCurrent.length) {
this.checkedForm.org_names = this.org_options.map(
(item) => item["value"]
);
this.flag = true
} else if (options.length > optionsSelectedCurrent.length) {
this.checkedForm.org_names = this.flag ? this.org_options
.filter((item) => item["value"])
.filter((item) => item["value"] !== differenceMakers[0])
.map((item) => item["value"]) : event.map((items) => items[0]);
this.flag = false
} else {
this.checkedForm.org_names = [];
}
}
this.earlySelected = this.checkedForm.org_names;
}
}
};
var Ctor = Vue.extend(Main);
new Ctor().$mount("#app");
思路分析
注意
- 绑定的值并不是提交的值,基于自己需求做处理。
更多推荐
已为社区贡献1条内容
所有评论(0)