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 = []
  }
}
相关推荐
冰暮流星19 小时前
css之线性渐变
前端·css
徐同保19 小时前
tailwindcss暗色主题切换
开发语言·前端·javascript
mapbar_front20 小时前
大厂精英为何在中小公司水土不服?
前端
生莫甲鲁浪戴20 小时前
Android Studio新手开发第二十七天
前端·javascript·android studio
2501_916008891 天前
Web 前端开发常用工具推荐与团队实践分享
android·前端·ios·小程序·uni-app·iphone·webview
SkylerHu1 天前
前端代码规范:husky+ lint-staged+pre-commit
前端·代码规范
菜鸟una1 天前
【微信小程序 + 消息订阅 + 授权】 微信小程序实现消息订阅流程介绍,代码示例(仅前端)
前端·vue.js·微信小程序·小程序·typescript·taro·1024程序员节
Yeats_Liao1 天前
Go Web 编程快速入门 05 - 表单处理:urlencoded 与 multipart
前端·golang·iphone
飞翔的佩奇1 天前
【完整源码+数据集+部署教程】【运动的&足球】足球场地区域图像分割系统源码&数据集全套:改进yolo11-RFAConv
前端·python·yolo·计算机视觉·数据集·yolo11·足球场地区域图像分割系统
拉不动的猪1 天前
h5后台切换检测利用visibilitychange的缺点分析
前端·javascript·面试