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

     <el-selectv-model="query.web_ids"multiplecollapse-tagscollapse-tags-tooltip:max-collapse-tags="2"filterableplaceholder="网站"><li class="checkAllBox" style="padding: 0 32px 0 20px; border-bottom: 1px solid #cfcfcf"><el-checkboxlabel="全选"v-model="checkAll":indeterminate="indeterminate"@change="handleCheckAll"/></li><el-optionv-for="item in (menu.webList || [])":key="item.id":label="item.title + '('+ item.id +')'":value="item.id"/></el-select>

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 = falseif (val) {query.web_ids = menu.webList.map((_) => _.id)} else {query.web_ids = []}
}