el-tree业务

 <el-form-item label="选择节点" prop="node_ids"><el-checkboxv-if="regionList.length"v-model="selectAll":disabled="selectDisabled":indeterminate="isIndeterminate":show-checkbox="!selectDisabled"label="全选"@change="selectAllChange"/><el-treev-if="regionList.length"ref="tree"class="w-full":data="regionList"node-key="id"show-checkboxdefault-expand-all:default-checked-keys="formState.node_ids":props="defaultProps"@check-change="handleChange"/><span v-else class="text-[#2D2E33]">暂无数据</span></el-form-item>

const formState = reactive<WafData>({node_ids: [],
})

const selectAllChange = () => {if (selectAll.value) {const levelTwoNodes = regionList.value.flatMap((node: any) =>node.nodes ? node.nodes.map((child: any) => child.id) : [])tree.value.setCheckedKeys(levelTwoNodes) //pushData是树形节点的data} else {tree.value.setCheckedKeys([])}isIndeterminate.value = false
}
const handleChange = () => {formState.node_ids = tree.value.getCheckedKeys(true)//   .concat(tree.value.getHalfCheckedKeys(true))if (regionKeysLength.value === formState?.node_ids?.length) {selectAll.value = true} else {selectAll.value = false}const length = formState?.node_ids?.length as numberisIndeterminate.value =length > 0 && length < getAllChildren(regionList.value).length
}

//获取所有子节点数据
const getAllChildren = (nodeArr: any = [], arr: any = []) => {for (const item of nodeArr) {if (!item.nodes && item.id) arr.push(item.id)if (item.nodes && item.nodes.length) {getAllChildren(item.nodes, arr)}}return arr
}

watch(() => regionList.value,val => {regionKeysLength.value = getAllChildren(val).lengthif (regionKeysLength.value === formState?.node_ids?.length) {selectAll.value = true} else {selectAll.value = false}const length = formState?.node_ids?.length as numberisIndeterminate.value =length > 0 && length < getAllChildren(regionList.value).length},{ deep: true }
)

const handleConfirm = async () => {await Promise.all([formEl.value?.validate(), matchingView.value.validate()])/**新增或编辑 */const { id } = activeSite.valueconst expression = matchingView.value?.generateTemplate() as stringconst data = {site_id: id,rule_id: formState?.rule_id,name: formState?.name,operation: formState?.operation,expression,expression_template: JSON.stringify(ruleGroups.value),node_ids: tree.value.getCheckedKeys(true).join(','),region_id: undefined,priority: formState.priority}if (data.expression) {handleEditorUser(data)} else {ElNotification.error({title: '失败',message: '请输入匹配规则'})}
}

// 获取区域列表
const getRegion = () => {get_region_nodes({}).then(res => {let list = res.listlist = JSON.parse(JSON.stringify(list).replaceAll('region_id', 'id').replaceAll('region_name', 'name'))regionList.value = listif (JSON.stringify(regionList.value).indexOf('nodes') === -1) {selectDisabled.value = true} else {selectDisabled.value = false}regionKeysLength.value = getAllChildren(regionList.value).length}).finally(() => {})
}