el-select默认全选功能
查了好多资料，也尝试了好多次，最后终于实现了想要的结果。
先来看下最后的结果，下面是这次项目我遇到的难题：
刚打开页面时，就默认全选。
先讲一下我之前犯过的错误，上代码：
//html部分
<template>
<el-select
class="breakType"
v-model="breakValueType"
multiple
placeholder="请选择故障类型"
size="small"
value-key="id"
@change="changeBreakType"
>
<el-option
v-for="item in breakOptionType"
:key="item.id"
:label="item.label"
:value="item.id"
>
</el-option>
</el-select>
</template>
//data部分
breakValueType: [],
breakOptionType: [
{
id: "1",
label: "电流不平衡",
},
{
id: "2",
label: "控制器失控",
},
{
id: "3",
label: "灯具异常",
},
{
id: "4",
label: "过载",
},
{
id: "5",
label: "过流",
},
{
id: "6",
label: "过压",
},
{
id: "7",
label: "欠压",
},
{
id: "8",
label: "灯具漏电",
},
{
id: "9",
label: "箱变掉电",
},
],
//js部分
created() {
this.selectAll();
},
methods: {
selectAll() {
this.breakValueType = [];
this.breakOptionType.map((item) => {
this.breakValueType.push(item.label);
});
},
}
这是之前写的错误的，修改了多次后发现把label改成id就可以了。
下面的是改过之后的
created() {
this.selectAll();
},
methods: {
selectAll() {
this.breakValueType = [];
this.breakOptionType.map((item) => {
this.breakValueType.push(item.id);
});
},
}
下面的一部分也是关于el-select的，是在错误中发现的全选和全部选交替的部分，不过没写完。
下面这部分是用来记笔记的，
//js部分
created() {
this.selectAll();
},
methods: {
selectAll() {
if (this.breakValueType.length < this.breakOptionType.length) {
this.breakValueType = [];
this.breakOptionType.map((item) => {
this.breakValueType.push(item.id);
});
} else {
this.breakValueType = [];
}
},
}