element 多选框,element ui下拉多选
本文主要介绍了元素加下拉框实现全选的示例代码。本文介绍的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。
目录
简单使用下拉框全选互斥下拉框全选互斥实现多个下拉框互斥实现通用全选
前言
实习的时候真的能学到很多东西，但是学到的东西真的需要沉淀一下，不然之后马上就忘了。
下拉框的简单使用
该方法使用起来相对简单。
El-select v-model= user . name placeholder=请选择
El-option v-for= name list中的项目:key= item :label= item :value= item
/el选项
/el-select
首先，您需要使用el-select和el-option。el-select是下拉框，所以需要使用v-model双向绑定数据。El-option是下拉框中的选项。
从“vue”导入{ reactive，tore fs }；
恒定状态=反应({
名称列表：[clz ， czh ， ccc]，
用户：{
名称： ，
},
});
const { nameList，user }=tore fs(state)；
全选互斥
要求：在下拉框中选择所有和其他项目。点击全选后不能选择其他项目，选择其他项目后不能选择所有项目。
下拉框多选
我们先简单了解一下下拉框中的多选。
理论上只需要给el-select加上multiple就可以实现多选，但是效果不是很好。选中的会挤在一起。
这时我们可以添加collapse-tags属性，这样只显示一个选项，不显示的以数量的形式跟在后面。
添加collapse-tags-tooltip属性，也可以实现当鼠标悬停在X上时，所有选中的选项都会显示出来。
代码：
El-选择
v-model=form.ages
Placeholder=请选择
多个的
折叠标签
折叠标签工具提示
el选项
v-for=年龄列表中的项目
:key=item
:label=item
:value=item
/el选项
/el-select
从“vue”导入{ reactive，tore fs }；
恒定状态=反应({
年龄列表：[所有，19，20，21，22]，
表单：{
年龄：[]，
},
});
const { ageList，form }=tore fs(state)；
全选互斥的实现
这主要是通过disabled属性实现的，但是属性值变成了一个返回布尔值的函数。
El-选择
v-model=form.ages
Placeholder=请选择
多个的
折叠标签
折叠标签工具提示
el选项
v-for=年龄列表中的项目
:key=item
:label=item
:value=item
:disabled=checkAge
/el选项
/el-select
const checkAge=()={
返回true
};
如您所见，当bound checkAge返回true时，不能选择所有选项。
明白原理之后，我们只需要理清思路。
首先，checkAge bind要把选中的项(item)作为参数传递给check，从而得到选中的项。
然后，就是这个想法。我们只在两种情况下禁止选举：
“全部”被选中，所有未被选中的选项此时都不会被选中。此时选择所有选项，也就是说只有这两种情况返回true，其他时候返回false。
const checkAge=(item)={
if(form . value . ages . includes( all )item！== all) {
//当选择“全部”时，“并非所有选项”都被禁用。
返回true
} else if(！form . value . ages . includes( all )item=== all ){
//如果选择了“并非所有选项”，则“所有选项”将被禁用。
返回true
}
返回false
};
是不是很简单，但是还没有结束。会有一些类似上面的小问题。
当我们没有选择的时候，我们不可能选择所有的选项。这是因为上面没有选择所有选项时的判断写成了没有选择所有选项时，所以一开始确实没有选择所有选项，所以不能选择。所以在开始的时候，你应该判断是否有一个错误的选择。如果不是，您将返回“false”。
const checkAge=(item)={
if(form . value . ages . length===0){
返回false
}
if(form . value . ages . includes( all )item！== all) {
返回true
} else if(！form . value . ages . includes( all )item=== all ){
返回true
}
返回false
};
多个下拉框互斥
多个下拉框不能同时选择同一个选项。
El-select v-model= hobbys . hobby 1 placeholder=请选择一项爱好
el选项
v-for=爱好列表中的项目
:key=item
:label=item
:value=item
:disabled=checkHobby(item)
/el选项
/el-select
上面有三个下拉框，依次是爱好1、爱好2、爱好3。
从“vue”导入{ reactive，tore fs }；
恒定状态=反应({
爱好列表：[听歌，动漫，前端]，
爱好：{
爱好1: ，
爱好2: ，
爱好3: ，
},
});
const { hobbyList，hobbys }=tore fs(state)；
像往常一样，通过将方法绑定到disabled属性来传递选定的值。
多个下拉框互斥的实现比较简单。你只需要遍历选中的值，看看它是否等于要选择的值。如果是，禁止选择(返回true)。如果可以遍历，也就是这个选项没有被其他下拉框选中，那么可以选择(返回false)。
const checkHobby=(item)={
for(hobbys . value中的const hobbyKey
//如果已经有选中该选项的下拉框，禁止再次选中。
if(item===hobbys . value[hobbyKey]){
返回true
}
}
返回false
};
一般全选的实现
什么是一般选择？其实只是为了区分以上所有的独家精选。通常单击全选复选框，所有选项都会被选中。
El-选择
v-model=form.ages
Placeholder=请选择
多个的
折叠标签
折叠标签工具提示
El-checkbox v-model= checked /全选
el选项
v-for=年龄列表中的项目
:key=item
:label=item
:value=item
/el选项
/el-select
从“vue”导入{ reactive，tore fs }；
恒定状态=反应({
年龄列表：[19，20，21，22]，
表单：{
年龄：[]，
},
已检查：错误，
});
const { ageList，form，checked }=tore fs(state)；
此时全选和后面的选项是没有关联的，所以我们可以通过添加一个change事件来修改后面选项的选择，但是当复选框状态发生变化时。
El-checkbox v-model= checked @ change= handleCheckallChange /Select All
const handleCheckAllChange=()={
if (checked.value) {
form . value . ages=age list . value；
}否则{
form . value . ages=[]；
}
};
此时，我们可以单击全选复选框，同时更改以下选项的选中状态。但是，当选择了以下所有选项时，不能同时将“全选”复选框更改为“选中”状态。
您可以添加监听器来监听选定的结果。如果发生变化，监听器将被触发，并根据所选结果的长度和选项的总长度进行比较。
手表(
()=form.value.ages，
(新值)={
checked . value=new value . length===age list . value . length；
}
);
如果要添加中间状态，需要使用element-plus复选框的不确定属性。
此时，复选框的状态不再只是选中，而是不定和v-model同时工作。
当Terminate为false时，v-model为true，状态为indeterminate为false，v-model为false，状态为空。当Terminate为true时，状态为-。因此，要实现中间状态，只有选择的选项数小于总选项数，且选择的选项数不为零，Terminate的值为真。
El-复选框
v-model=已检查
:不确定=
form . ages . length age list . length form . ages . length！==0
@change=handleCheckAllChange
/全选
以上就是本文关于element-plus下拉框实现全选的示例代码。请搜索我们以前的文章或继续浏览下面的相关文章，以获得更多关于element-plus下拉框的完整选择的信息。希望你以后能支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。