vue3는 선택한 요소와 편집 데이터의 트리 트리 구조를 처리하고 다시 표시합니다.

문제 : el-tree 디스플레이 UI는 선택한 ID 확인에 따라 다시 표시해야합니다 - 엄격하게이 속성을 추가하면 부모-자식 연결 방법이 없습니다. setCheckedKeys를 사용하는 방법의 설명서를 읽었지만 여전히 적용 할 수없는 경우 부모 ID가 포함되어 있으면 다음 모든 자녀가 선택되지만 실제로는 하위 집합이 선택되지 않으면 부모가 선택되지 않거나 하위 집합이 모두 선택되지 않으면 부모가 절반 선택되는 효과가 있습니다. 하위 집합이 선택되지 않은 경우 부모가 선택되지 않거나, 하위 집합이 모두 선택되지 않은 경우 부모가 반 선택되고 부모가 반 선택되는 효과가 있습니다.

 <el-tree
 ref="treeRef"
 :data="data.nodeMenuList"
 :props="defaultProps"
 node-key="id"
 show-checkbox
 :default-expanded-keys="[1]"
 :default-checked-keys="defaultPermTreeSelect"
 @check="checkPermission"
 style="width: 100%"
 />
 // 폼 편집 버튼
 <template #handle="scope">
 <el-button type="primary" size="small" @click="handleEdit(scope)"> </el-button>
 <el-button type="danger" size="small" @click="handleDel(scope)"> </el-button>
 </template>

문제가 무엇인지 알기 때문에 쉽게 할 수 있습니다. 편집할 때 데이터에서 상위 ID를 제거하고 하위 집합 ID만 남기면 함수가 자연스럽게 완성됩니다.

const ruleFormRef = ref()
const treeRef = ref()
// 백엔드에서 반환되는 데이터 구조
const defaultProps = {
 children: 'children',
 label: 'title',
}
// 작업 편집 이유는 다음과 같습니다.{scope} 이 폼은 캡슐화되어 있으므로 이 폼을 사용하는 경우 여기 데이터에 주의하시기 바랍니다.
const handleEdit = ({ scope }: any) => {
 data.ruleForm = JSON.parse(JSON.stringify(scope.row))
 data.ruleForm.status = scope.row.status === 'Disable' ? '0' : '1'
 dialogTitle.value = '권한 편집 관리자 '
 const selectedRules = scope.row.rules.split(',').map(Number)
 // 현재 ID 데이터가 배열에 로드됩니다.
 const parentIds = selectedRules.map((item: any) => item)
 const idsArr: any = []
 // 재귀적으로 모든 부모 노드 ID를 찾고 선택한 데이터에서 부모 노드 ID를 필터링하여 모든 자식 노드를 가져옵니다.
 const processChildren = (children: any) => {
 children.forEach((child: any) => {
 if (child.children.length === 0 && parentIds.includes(child.id)) {
 idsArr.push(child.id)
 }
 if (child.children.length > 0) {
 processChildren(child.children)
 }
 })
 }
 // 노드 데이터 반복
 store.menuTreeList[0].children.forEach((child: any) => {
 // 레벨이 하나만 있는 경우
 if (child.children.length === 0 && parentIds.includes(child.id)) {
 idsArr.push(child.id)
 }
 // 다단계 노드
 if (child.children.length > 0) {
 processChildren(child.children)
 }
 })
 console.log(idsArr, 'idsArr') // 최종 출력은 부모 노드를 제거한 후의 데이터입니다.
 // 체크된 자식 노드
 defaultPermTreeSelect.value = idsArr // 이 단계에서 다음 틱을 추가할 수 있습니다.
 dialogVisible.value = true
}

여기서 노드를 선택할 때 백엔드 요구 사항이 부모 노드에 추가되어야하는 경우 백엔드가 부모 ID를 제출할 필요가없는 경우 여기에서도 처리를 수행해야합니다 그런 다음 선택한 값에 직접 제공해야합니다.

const checkPermission = (_checkedNodes: any, checkedKeys: any) => {
 const treeB = treeRef.value.getHalfCheckedKeys()
 data.ruleForm.rules = checkedKeys.checkedKeys.join(',') // 문자열로 배열, 여기서 형식은 백엔드 형식 요구 사항에 따라 달라집니다.
 
 if (treeB.length > 0) {
 data.ruleForm.rules = data.ruleForm.rules.concat(',', treeB.join(',')) //제출할 데이터를 스플라이스합니다.
 }
}