element 复选框带搜索跟全选

好的，针对您的问题，我可以提供以下解决方案：

1. 使用 Element UI 的 el-checkbox 组件实现复选框功能；
2. 在复选框的下方添加一个搜索框，用于搜索需要选择的选项；
3. 在复选框的左上角添加一个全选按钮，用于全选或取消全选所有选项。

代码示例：

<template>
  <div>
    <el-checkbox v-model="checkAll" @change="handleCheckAll">{{checkAll ? '取消全选' : '全选'}}</el-checkbox>
    <el-input v-model="searchText" placeholder="请输入搜索内容"></el-input>
    <div v-for="item in filteredOptions" :key="item.value">
      <el-checkbox :label="item.value" v-model="checkedValues">{{item.label}}</el-checkbox>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [{
        label: '选项1',
        value: 'option1'
      }, {
        label: '选项2',
        value: 'option2'
      }, {
        label: '选项3',
        value: 'option3'
      }],
      checkedValues: [],
      searchText: '',
      checkAll: false
    }
  },
  computed: {
    filteredOptions() {
      return this.options.filter(item => item.label.includes(this.searchText))
    }
  },
  methods: {
    handleCheckAll() {
      if (this.checkAll) {
        this.checkedValues = this.options.map(item => item.value)
      } else {
        this.checkedValues = []
      }
    }
  }
}
</script>

在上面的代码中，我们使用了 Element UI 的 el-checkbox 和 el-input 组件来实现复选框和搜索框。同时，在复选框的左上角添加了一个全选按钮，通过 computed 计算属性实现对搜索后的选项进行过滤。当用户勾选全选时，将所有选项的 value 值添加到 checkedValues 数组中；当用户取消全选时，将 checkedValues 数组清空。