el-select多选下拉框实现全选功能

html 复制代码
     <el-select
            v-model="query.web_ids"
            multiple
            collapse-tags
            collapse-tags-tooltip
            :max-collapse-tags="2"
            filterable
            placeholder="网站">
          <li class="checkAllBox" style="padding: 0 32px 0 20px; border-bottom: 1px solid #cfcfcf">
            <el-checkbox
                label="全选"
                v-model="checkAll"
                :indeterminate="indeterminate"
                @change="handleCheckAll"
            />
          </li>
          <el-option
              v-for="item in (menu.webList || [])"
              :key="item.id"
              :label="item.title + '('+ item.id +')'"
              :value="item.id"
          />
        </el-select>
ts 复制代码
const checkAll = ref(false);
const indeterminate = ref(true);

//使用watch监听
watch(() => query.web_ids, (newVal, oldVal) => {
  if (newVal?.length) {
    indeterminate.value = true;
  }
  if(newVal?.length === menu.webList?.length){
    indeterminate.value = false;
    checkAll.value = true
  }
})
const handleCheckAll = (val: CheckboxValueType) => {
  indeterminate.value = false
  if (val) {
    query.web_ids = menu.webList.map((_) => _.id)
  } else {
    query.web_ids = []
  }
}
相关推荐
Jagger_1 分钟前
敏捷开发流程-精简版
前端·后端
FIN666833 分钟前
昂瑞微冲刺科创板:创新驱动,引领射频芯片国产化新征程
前端·安全·前端框架·信息与通信·芯片
GISer_Jing34 分钟前
ByteDance——jy真题
前端·javascript·面试
睡美人的小仙女12734 分钟前
浏览器为何屏蔽本地文件路径?
前端
真的想不出名儿36 分钟前
Vue 中 props 传递数据的坑
前端·javascript·vue.js
FIN666837 分钟前
昂瑞微:深耕射频“芯”赛道以硬核实力冲刺科创板大门
前端·人工智能·科技·前端框架·信息与通信·智能
阳光阴郁大boy37 分钟前
星座运势网站技术解析:从零打造现代化Web应用
前端·javascript
烛阴1 小时前
武装你的Python“工具箱”:盘点10个你必须熟练掌握的核心方法
前端·python
sorryhc1 小时前
如何设计一个架构良好的前端请求库?
前端·javascript·架构
Queen_sy1 小时前
vue3 el-date-picker 日期选择器校验规则-选择日期范围不能超过七天
javascript·vue.js·elementui