文章目录
- 样式
- 模板
el-tree 组件跳转: 点击跳转
样式
模板
- html
javascript"><!-- 左侧树形列表 -->
<a-col :span="4"><a-card class="card-height"><template #title><a-input-searchstyle="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-treev-elseref="treeRef":data="treeData"style="max-width: 243px"show-checkboxnode-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-editstyle="font-size: 16px;color: rgb(80, 210, 102);margin-right: 5px;"@click="handleEditNode(data)"/><icon-plusv-if="data.nodeType == '区域'"style="font-size: 16px;color: rgb(59, 90, 252);margin-right: 5px;"@click="handleAddNode(data)"/><a-popconfirmcontent="确定要删除"@ok="handleDelete(data)"><icon-deletestyle="font-size: 16px; color: rgb(245, 78, 78)"/></a-popconfirm></span></span></template></el-tree></a-scrollbar></a-spin></a-card></a-col>
- js
javascript">/*** @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(); // 给当前节点添加随机IDif (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);
}