ElementPlus 组件中的 el-tree 属性

样式

模板

1. html

<!-- 左侧树形列表 -->
<a-col :span="4">
   <a-card class="card-height">
     <template #title>
       <a-input-search
         style="width: 90%"
         placeholder="请输入关键字进行搜索"
         @input="handleSearchTree"
       />
     </template>
     <template #extra>
       <a-link @click="handleAdd"><icon-plus /> 添加 </a-link>
     </template>
     <a-spin :loading="loading" style="width: 100%; height: 100%">
       <a-scrollbar style="height: 640px; overflow: auto">
         <a-empty v-if="!treeData.length" />
         <el-tree
           v-else
           ref="treeRef"
           :data="treeData"
           style="max-width: 243px"
           show-checkbox
           node-key="id"
           default-expand-all
           :props="{
             children: 'children',
             label: 'cameraName',
           }"
           :default-checked-keys="defaultKey"
           :filter-node-method="filterNode"
           :expand-on-click-node="false"
           @check="handleClickNode"
         >
           <template #default="{ node, data }">
             <span class="custom-tree-node">
               <span>
                 <icon-folder style="font-size: 16px; margin-right: 1px" />
                 {{ node.label }}
               </span>
               <span>
                 <icon-edit
                   style="
                     font-size: 16px;
                     color: rgb(80, 210, 102);
                     margin-right: 5px;
                   "
                   @click="handleEditNode(data)"
                 />
                 <icon-plus
                   v-if="data.nodeType == '区域'"
                   style="
                     font-size: 16px;
                     color: rgb(59, 90, 252);
                     margin-right: 5px;
                   "
                   @click="handleAddNode(data)"
                 />
                 <a-popconfirm
                   content="确定要删除"
                   @ok="handleDelete(data)"
                 >
                   <icon-delete
                     style="font-size: 16px; color: rgb(245, 78, 78)"
                   />
                 </a-popconfirm>
               </span>
             </span>
           </template>
         </el-tree>
       </a-scrollbar>
     </a-spin>
   </a-card>
 </a-col>

2. js

/**
 * @description : 左侧设备列表树
 * @author : 'Hukang'
 * @param : ''
 * @date : 2024-12-20 18:08:25
 */
const treeData = ref([]); //树的列表信息
const loading = ref(true); // 加载中状态
const defaultKey = ref([]);
// 获取左侧列表
function getDirData(structId) {
  defaultKey.value.length = 0;
  loading.value = true;
  get_camera_tree(structId).then((res) => {
    if (res.code == 200) {
      loading.value = false;
      treeData.value = res.data;
      // 添加随机ID到树中的每个节点
      for (let index = 0; index < treeData.value.length; index++) {
        const element = treeData.value[index];
        addRandomIDToTree(element);
      }
      defaultKey.value.push(res.data[0]?.id); // 默认选中节点
    } else {
      Message.info(res.msg);
      setTimeout(() => {
        loading.value = false;
      }, 2000);
    }
  });
}

// 树节点添加随机 key，生成随机ID的函数
function generateRandomID() {
  return Math.random().toString(36).substr(2, 9); // 生成一个长度为 9 的随机字符序列作为ID
}
// 遍历并添加随机ID的函数
function addRandomIDToTree(root) {
  if (!root) {
    return;
  }
  root.idKey = generateRandomID(); // 给当前节点添加随机ID
  if (root.children) {
    // 递归遍历子节点
    for (let child of root.children) {
      addRandomIDToTree(child);
    }
  }
}
// 添加子节点树
const parentId = ref();
function handleAddNode(data) {
  formArea.value = {};
  checkedKeys.value.length = 0;
  parentId.value = data.id;
  visible.value = true;
  titleTxt.value = '添加摄像机';
  formArea.value.nodeType = '摄像机';
}

// 删除
function handleDelete(data) {
  delete_camera(data.id).then((res) => {
    if (res.code == 200) {
      Message.success('删除成功');
      fetchData();
    }
  });
}

const visible = ref(false);
const titleTxt = ref();
// 重命名
function handleEditNode(data) {
  formArea.value = {};
  get_camera_id(data.id).then((res) => {
    if (res.code == 200) {
      formArea.value = res.data;
    } else {
      Message.error(res.msg);
    }
  });
  titleTxt.value = '编辑';
  visible.value = true;
}
// 树节点搜索
const treeRef = ref();
const filterNode = (value, data) => {
  if (!value) return true;
  return data.cameraName.includes(value);
};
function handleSearchTree(data) {
  treeRef.value!.filter(data);
}

const flag = ref('');
function handleClickNode(id, e) {
  console.log(id.cameraName, e.checkedKeys);
}