ADD:树形控件自定义节点

src/pages/access/list.vue

 <template>
-    <el-card shadow="never" class="border-0">
-        <ListHeader @refresh="getData"/>
-        <el-tree :data="tableData" 
-        :props="{label: 'name', children:'child'}" 
-        @node-click="handleNodeClick" node-key="id" 
-        :default-expand-all="defaultExpandKeys"/>
+    <el-card shadow="never" class="border-0" v-loading="loading">
+        <ListHeader @refresh="getData" />
+        <el-tree :data="tableData" :props="{ label: 'name', children: 'child' }" node-key="id"
+            :default-expand-keys="defaultExpandKeys">
+            <template #default="{ node, data }">
+                <div class="custom-tree-node">
+                    <el-tag size="small" :type="data.menu ? '' : 'info'"> {{ data.menu ? "菜单" : "权限" }} </el-tag>
+                    <el-icon v-if="data.icon" :size="16" class="ml-2">
+                        <component :is="data.icon" />
+                    </el-icon>
+                    <span> {{ data.name }}</span>
+                    <div class="ml-auto">
+                        <el-switch :modelValue="data.status" :active-value="1" :inactive-value="0" />
+                        <el-button text type="primary" size="small">修改</el-button>
+                        <el-button text type="primary" size="small">增加</el-button>
+                        <el-button text type="primary" size="small">删除</el-button>
+                    </div>
+                </div>
+            </template>
+        </el-tree>
     </el-card>
-    
 </template>
 
 <script setup>
@@ -31,13 +44,32 @@ const {
 
 } = useInitTable({
     getList: getRuleList,
-    onGetListSuccess:(res) =>{
+    onGetListSuccess: (res) => {
         tableData.value = res.list
-        defaultExpandKeys.value = res.list.map(o=>o.id)
+        defaultExpandKeys.value = res.list.map(o => o.id)
+        console.log(defaultExpandKeys.value)
 
     }
 })
 
 
 
-</script>
\ No newline at end of file
+</script>
+
+
+<style scoped>
+.custom-tree-node {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    padding-right: 8px;
+
+}
+
+/* 使用 :deep 去除全局样式 */
+:deep(.el-tree-node__content) {
+    padding: 20px 0;
+
+}
+</style>
\ No newline at end of file