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

Hao.Zhou2023-11-29 20:29

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 = []
  }
}