Vue3 gère la sélection et l'édition des données echo de l'arborescence Tree d'elementPlus

 <!-- 添加角色 请求菜单
  :props="{ children: 'children', label: 'name' }" children:后端返回的子集结构的key label：name后端返回的名字
  ：data="menus"  menus是后端返回的菜单权限列表
  -->
        <el-tree
          ref="elTreeRef"
          :data="menus"
          show-checkbox
          node-key="id"
          @check="handleCheckChange"
          :props="{ children: 'children', label: 'name' }"
        />

1 : Cliquez sur Nouveau pour faire apparaître le composant Arbre

		**1-1：首先调接口获取你的权限列表数据**

//我调取了 直接在vuex获取就可以了
//传到<el-tree :data="menus"/> 显示Tree结构 如下图
const menus = computed(() => {
    
    
  return store.state.entireMenu;
});

2 : Sélectionnez l'option Arbre

选中触发  @check事件

// 选中的权限
import {
    
    ref}  from  'vue'
const otherInfo=ref({
    
    })
const handleCheckChange = (data1: any, data2: any) => {
    
     
  // 选中的子节点(系统总览下的核心技术39);
  const checkedKeys = data2.checkedKeys;
  // 父节点38
  const halfCheckedKeys = data2.halfCheckedKeys;
  // 另外一种可能如果当前的父子节点选中之后 会全部存放在checkedKeys
  const menuList = [...checkedKeys, ...halfCheckedKeys];
  otherInfo.value = {
    
     menuList: menuList };
};

3 : Une fois la sélection terminée, cliquez sur OK pour envoyer la demande

import {
    
    useStore}  from '@/store'
const store=useStore()
//拿着选中的数据调用接口即可 这里接口在veux写好的，不在展示具体的代码
const handleConfirmClick=()=>{
    
    
  store.dispatch("system/createPageDataAction", {
    
    
      pageName:'role',
      newData: {
    
     ...otherInfo},
    });
}  

-------------------- Opérations d'édition

Nous savons tous que la liste peut définir la portée scope.row pour obtenir les données de la ligne actuelle

  <template #handler="scope">
        <div class="handle-btns">
          <el-button
            v-if="isUpdate"
            type="text"
            size="mini"
            icon="el-icon-edit"
            @click="editCallback(scope.row)"
            >编辑</el-button
          >
          
        </div>
      </template>
 	<script setup  lang='ts'> 
 	  import {
    
    nextTick}  from 'vue';
 	  import {
    
     ElTree } from "element-plus";
	  const  MenuMapLeafKeys=()=>{
    
    
		 const leftKeys: number[] = []
         const _recurseGetLeaf = (menuList: any[]) => {
    
    
         for (const menu of menuList) {
    
    
            if (menu.children) {
    
    
                _recurseGetLeaf(menu.children);
            } else {
    
    
                leftKeys.push(menu.id)
            }
         }
       }
     _recurseGetLeaf(menuList)
     return leftKeys
   }
 	  const elTreeRef = ref<InstanceType<typeof ElTree>>(); 
 	 // 点击编辑 拿到当前行的数据
	  const editCallback = (item: any) => {
    
    
	  //调用上面的函数 遍历出菜单的id
      const leafKeys = MenuMapLeafKeys(item.menuList);
      nextTick(() => {
    
    
        elTreeRef.value?.setCheckedKeys(leafKeys, false);
      });
    };

	</script>

N'oubliez pas d'ouvrir votre fenêtre contextuelle lorsque vous cliquez sur Nouveau et Modifier.
Les miens sont tous emballés. Ici, je vais partager le code sur Tree.