下拉多选以及全选
项目中使用的是element-ui的el-select组件;
需求:
- 下拉的所有字段多选;
- 额外在下拉框中多一个全选选项,点击全选,则全选所有字段
templete中代码:
<el-select
class="select-options"
@change="selectValueChange"
v-model="selectValue"
multiple
placeholder="请选择"
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
options部分代码在我的项目中有很多,我写了一个js文件,页面用的时候就导入options就好了,要不然页面中的代码很长很长,其中加了一个全选,allcheck选项:
const TraveledInfoList = [
{
value: "allcheck",
label: "全选"
},
{
value: "expDescription",
label: "描述"
},
{
value: "classify",
label: "分类"
},
{
value: "travelTime",
label: "经验使用季节"
}
];
主要是selectValueChange方法:
selectValueChange(val) {
const allValues = [];
// 保留所有值
for (const item of this.options) {
allValues.push(item.value);
}
// 用来储存上一次的值,可以进行对比
const oldVal =
this.oldselectValue.length === 1 ? this.oldselectValue[0] : [];
// 若是全部选择
if (val.includes("allcheck")) {
this.selectValue = allValues;
}
// 取消全部选中 上次有 当前没有 表示取消全选
if (oldVal.includes("allcheck") && !val.includes("allcheck")) {
this.selectValue = [];
}
// 点击非全部选中 需要排除全部选中 以及 当前点击的选项
// 新老数据都有全部选中
if (oldVal.includes("allcheck") && val.includes("allcheck")) {
const index = val.indexOf("allcheck");
val.splice(index, 1); // 排除全选选项
this.selectValue = val;
}
// 全选未选 但是其他选项全部选上 则全选选上 上次和当前 都没有全选
if (!oldVal.includes("allcheck") && !val.includes("allcheck")) {
if (val.length === allValues.length - 1) {
this.selectValue = ["allcheck"].concat(val);
}
}
// 储存当前最后的结果 作为下次的老数据
this.oldselectValue[0] = this.selectValue;
},
效果如下:
- 在下拉列表中增加一个全选选项。
- 当点击全选之后选择全部下拉选项,
- 当点击某一个已经选择的选择则全选选择取消,所选选项也取消选择
如果项目中有涉及到类似需求,可直接调用该方法,做项目做了很多需求,以后慢慢都抽离出来整理,项目中常用的vue代码总结系列会一直更新,哈哈哈,欢迎一起探讨!