【vue+element UI】实现带全选、反选、联级、搜索的下拉多选框

在Vue中使用Element UI实现带有全选、反选、联级和搜索功能的下拉多选框，可以通过el-select和el-option组件配合el-checkbox-group来实现。以下是一个简单的实现示例：

<template>
  <el-select v-model="selectedValues" multiple placeholder="请选择" filterable :filter-method="filterMethod">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
      <span style="float: left">{{ item.label }}</span>
      <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
    </el-option>
    <el-button slot="append" icon="el-icon-plus" @click="handleSelectAll">全选</el-button>
  </el-select>
</template>
 
<script>
export default {
  data() {
    return {
      selectedValues: [],
      options: [{ value: 'Option1', label: '选项1' }, { value: 'Option2', label: '选项2' }, ...], // 填充你的选项
    };
  },
  methods: {
    handleSelectAll() {
      this.selectedValues = this.options.map(item => item.value); // 全选操作
    },
    filterMethod(query, item) {
      return item.label.indexOf(query) > -1; // 自定义搜索方法
    }
  }
};
</script>

在这个示例中，el-select组件被用来创建多选框，multiple属性使其可以选择多个值。filterable属性允许用户搜索选项。filter-method属性定义了一个自定义的过滤方法，用于搜索选项。el-option组件用于展示每个选项，并且可以通过v-for指令循环渲染。el-button作为插槽添加到el-select的尾部，用作“全选”按钮的触发器。

在methods中，handleSelectAll方法实现了全选功能，将所有选项的值赋给selectedValues，从而选中所有选项。filterMethod方法用于实现自定义的搜索逻辑。

请根据实际需求调整options数组，以及可能需要的样式调整。