Vue的antd多选下拉框增加全选操作
因为antd的多选下拉框没有提供全选操作,我做了一个简易的全选操作data(){return{categoryList, // 存放获取到的分选数据category: [], // 已选分类数据}}<a-selectplaceholder="请选择类别"showSearchv-model="category":maxTagCount="...
·
因为antd的多选下拉框没有提供全选操作,我做了一个简易的全选操作
data(){
return{
categoryList, // 存放获取到的分选数据
category: [], // 已选分类数据
}
}
<a-select
placeholder="请选择类别"
showSearch
v-model="category"
:maxTagCount="multipleMaxCount"
@change="categoryChange"
mode="multiple"
>
<a-select-option value="0" key="0">全选</a-select-option>
<a-select-option
v-for="option in categoryList"
:value="option.id"
:key="option.id"
>{{ option.value }}</a-select-option
>
</a-select>
首先是在option中,自己创造出一个全选的option,下边依然是通过for循环填入获取到的下拉数据,对全选的option定义value为0,是为了后面方便判断我们选择了这个选项
然后在categoryChange中使用了一个全选方法checkAll
categoryChange (value) {
this.category = this.checkAll(value, this.categoryList)
}
value是当前的所选数组
checkAll (arr, modelList) {
// arr:change中的数组 , modelList:下拉框List
let length = arr.length
let list = arr
arr.forEach(element => {
// 当数组中存在0,说明此时进行全选/取消全选
if (element === '0') {
// 当数组长度为最大长度且最后一个元素为0时,说明此时在全选的基础上又点击全选,则取消全选
if (length - 1 === modelList.length && arr[length - 1] === '0') {
list = []
} else {
// 当不是取消全选操作,只要数组中出现了0则说明进行了全选操作
list = []
for (let i in modelList) {
list.push(modelList[i].id)
}
}
}
})
return list
}
我的思路大概是:
- 当我循环change返回的数组时,遇到0,说明我们选项中有全选选项,说明此时我们想要进行全选/取消全选。
- 取消全选的判断条件就是当我们的arr数组的长度,等于了数据List数组的长度时,说明我们把所以的选项都选择了,这时,如果arr的最后一项的值是0,说明我们点击了全选选项。并且此时就是取消全选的操作。
- 取消全选操作将list清空,return返回给我们双向绑定的category。
- 此时,除了取消全选操作外,只要数组中出现0,则就应该是全选操作,清空list,并将数据List中所有数据push到list中,再返回给category。
更多推荐
已为社区贡献4条内容
所有评论(0)