vue+elementui实现下拉框（el-select）增加checkbox并可全选或取消

coder_wangs

已于 2022-06-15 17:08:35 修改

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js elementui javascript

于 2022-06-15 11:52:03 首次发布

本文链接：https://blog.youkuaiyun.com/web_wp/article/details/125294423

本文介绍了一个使用 Vue.js 开发的下拉选择组件，包含全选功能和自定义搜索功能。通过 `el-select` 组件，用户可以快速选择全国或多个城市的选项，同时搜索框支持模糊匹配，提高用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <div>
    <el-select v-model="city" filterable clearable multiple collapse-tags :filter-method="dataFilter" placeholder="请选择">
      <el-checkbox v-model="allCheckList" :disabled="checkAllIsShow" class="el-select-dropdown__item el-select-allTop">全选</el-checkbox>
      <div class="allPosition">
        <el-option v-for="item in cityList" :key="item.value" :label="item.label" :value="item.value">
          <span style="padding-left:20px;">{{ item.label }}</span>
        </el-option>
      </div>
    </el-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      city: [],
      cityList: [], //存储自定义城市搜索数据
      cityListCopy: [], //存储原始City数据
      checkAllIsShow: false //自定义搜索时-限制全选
    }
  },
  computed: {
    allCheckList: {
      get() {
        return this.cityList.every(item => this.city.indexOf(item.value) !== -1)
      },
      set(value) {
        this.city = []
        if (value) {
          this.cityList.forEach(item => {
            this.city.push(item.value)
          })
        }
      }
    }
  },
  created() {
    let arr = [
      {
        cityId: '-1',
        cityName: '全国'
      },
      {
        cityId: '1',
        cityName: '北京'
      },
      {
        cityId: '2',
        cityName: '上海'
      },
      {
        cityId: '3',
        cityName: '太原'
      },
      {
        cityId: '4',
        cityName: '新乡'
      },
      {
        cityId: '5',
        cityName: '永安'
      }
    ]
    //模拟请求
    setTimeout(() => {
      this.cityList = arr.map(item => {
        return {
          label: item.cityName,
          value: Number(item.cityId)
        }
      })
      this.cityListCopy = arr.map(item => {
        return {
          label: item.cityName,
          value: Number(item.cityId)
        }
      })
    }, 1000)
  },
  methods: {
    //自定义搜索方法
    dataFilter(val) {
      if (val) {
        this.checkAllIsShow = true
        this.cityList = this.cityList.filter(item => {
          return item.label.indexOf(val) !== -1
        })
      } else {
        this.checkAllIsShow = false
        this.cityList = this.cityListCopy
      }
      return true
    }
  }
}
</script>
<style scoped>
.el-select-allTop {
  width: 100%;
  border-bottom: 1px solid rgba(204, 204, 204, 0.596);
}
.allPosition {
  overflow: auto;
  height: 200px;
}
</style>

结果展示