如何在具有过滤选项的多选的 vue element-UI 中添加全选和取消全选选项？答案

【问题标题】：How to add an option to select-all and deselect-all in vue element-UI with multi select having filter option?如何在具有过滤选项的多选的 vue element-UI 中添加全选和取消全选选项？
【发布时间】：2020-01-05 00:48:27
【问题描述】：

我是 VueJs 的新手。我正在尝试创建一个组件，允许多个选择具有搜索选项并允许全选/取消全选选项。

我正在使用 vue-element-ui 库来完成此操作，https://element.eleme.io/#/en-US/component/select#basic-multiple-select。

为此，我想在选择下拉菜单中添加第一个选项。

我尝试过这样的事情：

<template>
        <el-select
          v-model="selectTag.values"
          placeholder="select profiles"
          multiple
          collapse-tags
          filterable
          remote
          @change="values => handleSelectAll(values, 'routingProfile')"
          :filter-method="handleFilter"
        >
          <el-option
            v-for="option in selectTag.options"
            :key="option.value"
            :label="option.label"
            :value="option.value"
          >
          </el-option>
        </el-select>
</template>
<script>
import { Select, Option } from 'element-ui';

export default {
  props: {},
  components: {
    [Select.name]: Select,
    [Option.name]: Option
  },
  data() {
    return {
      selectTag: {
        prvsState: [],
        loading: false,
        count: 0,
        values: [],
        options: [
          { value: 'all', label: 'SELECT/DESELECT ALL' },
          { value: 'value1', label: 'label1' },
          { value: 'value2', label: 'label2' }
        ]
      }
    };
  },
  methods: {
  handleFilter(query) {
  var searchQuery = query.toLowerCase();
  var formField = this.selectTag;
  var fieldOptions = formField.options;
  var filterOptions = [{ value: 'all', label: 'Select/unselect all' 
  }];
  fieldOptions.forEach(option => {
    let optionLabel = option.label.toLowerCase();
    if (optionLabel.includes(searchQuery)) {
      filterOptions.push(option);
    }
  });
  formField.options = filterOptions;
},
    handleSelectAll(selectedValues) {
      var fieldOptions = this.selectTag.options;
      var prvsState = this.selectTag.prvsState;
      if (selectedValues.includes('all')) {
        if (prvsState.includes('all')) {
          this.selectTag.values = [];
          this.selectTag.prvsState = [];
        } else {
          this.selectTag.prvsState = selectedValues;
          this.selectTag.values = [];
          fieldOptions.forEach(option => {
            if (option.value != 'all') {
              this.selectTag.values.push(option.value);
            }
          });
        }
      } else {
        this.selectTag.values = selectedValues;
        this.selectTag.prvsState = selectedValues;
      }
    }
  }
};
</script>

如果我禁用过滤器选项，它会正常工作。它不适用于搜索/过滤选项。请让我知道如何做这件事。或者请为此任务建议一些等效的 vueJs 库。任何帮助，将不胜感激。谢谢

【问题讨论】：

标签： javascript vue.js element-ui

【解决方案1】：

向输入添加更改侦听器，然后检查添加的值是否是您的全部选项。现在您可以将绑定的值更改为所有可用的值：

<el-select @change="isAllLocations" style="margin-left:1rem;width:160px;" multiple v-model="filterLocations" placeholder="Locations">
    <el-option v-for="item in searchLocations" :key="item.value" :label="item.label" :value="item.value">
    </el-option>
</el-select>


isAllLocations(a) {
    if(a[a.length-1] === 'All') {
        this.filterLocations = []
        this.searchLocations.forEach(loc => {
            if(loc.value !== 'All' ) {
                this.filterLocations.push(loc.value)
            }
        })
    }
}

【讨论】：

【解决方案2】：

我刚遇到类似的情况，所以我的解决方案是让按钮“全选”而不是“全选”作为选项。如果您想采用我的方法，那么您应该在单击按钮时调用此方法：

handleSelectAll() {
    this.selectTag.values = [];
    for(let i=0; i < this.selectTag.options.length; i++) {
        this.selectTag.values.push(this.selectTag.options[i].value);
      }
 },

【讨论】：