Vue的antd多选下拉框增加全选操作

因为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。

Vue的antd多选下拉框增加全选操作

猜你喜欢