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 = []
  }
}
相关推荐
2501_9159184115 分钟前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
程序员的世界你不懂1 小时前
【Flask】测试平台开发,新增说明书编写和展示功能 第二十三篇
java·前端·数据库
索迪迈科技1 小时前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育
gnip1 小时前
JavaScript二叉树相关概念
前端
attitude.x2 小时前
PyTorch 动态图的灵活性与实用技巧
前端·人工智能·深度学习
β添砖java2 小时前
CSS3核心技术
前端·css·css3
空山新雨(大队长)2 小时前
HTML第八课:HTML4和HTML5的区别
前端·html·html5
猫头虎-前端技术3 小时前
浏览器兼容性问题全解:CSS 前缀、Grid/Flex 布局兼容方案与跨浏览器调试技巧
前端·css·node.js·bootstrap·ecmascript·css3·媒体
阿珊和她的猫3 小时前
探索 CSS 过渡:打造流畅网页交互体验
前端·css