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 = []
  }
}
相关推荐
mCell5 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip5 小时前
Node.js 子进程:child_process
前端·javascript
excel8 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel9 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼11 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping11 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙12 小时前
[译] Composition in CSS
前端·css
白水清风12 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix12 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户221520442780012 小时前
new、原型和原型链浅析
前端·javascript