el-select par défaut sélectionner toutes les fonctions
J'ai vérifié beaucoup d'informations et essayé plusieurs fois, et j'ai finalement obtenu le résultat souhaité.
Regardons d'abord le résultat final. Voici les problèmes que j'ai rencontrés dans ce projet:
Lors de la première ouverture de la page, tous sont sélectionnés par défaut.
Permettez-moi de parler des erreurs que j'ai faites auparavant, le code:
//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);
});
},
}
Ceci est une erreur écrite avant. Après l'avoir modifiée plusieurs fois, j'ai trouvé qu'il suffisait de changer l'étiquette en id.
Ce qui suit est après le changement
created() {
this.selectAll();
},
methods: {
selectAll() {
this.breakValueType = [];
this.breakOptionType.map((item) => {
this.breakValueType.push(item.id);
});
},
}
La partie suivante concerne également el-select, qui est la partie alternative de sélectionner tout et sélectionner tout trouvé dans l'erreur, mais ce n'est pas terminé.
La partie suivante est pour prendre des notes,
//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 = [];
}
},
}