feat:优化

main/src/components/custom-table-tree/index.vue

@@ -2,14 +2,18 @@
   <div :class="`custom-table-tree ${shadow ? 'custom-table-tree__shadow' : ''}`">
     <div v-if="title" class="title">{{ title }}</div>
     <el-tree
-      node-key="id"
       :data="data"
+      :node-key="option.nodeKey"
       :show-checkbox="option.showCheckbox"
       :default-expanded-keys="option.defaultExpandedKeys"
       :default-checked-keys="option.defaultCheckedKeys"
-      :props="option.defaultProps"
+      :props="option.props ?? option.defaultProps"
       @node-click="handleNodeClick"
-    />
+    >
+      <template #default="{ data: rows }">
+        <slot :data="rows"></slot>
+      </template>
+    </el-tree>
   </div>
 </template>
 <script setup name="custom-table-tree">
@@ -21,7 +25,9 @@ const props = defineProps({
     type: Object,
     default: () => {
       return {
+        nodeKey: 'id',
         showCheckbox: false,
+        props: {},
         defaultProps: {
           children: 'children',
           label: 'label',
@@ -34,8 +40,8 @@ const props = defineProps({
 });
 const emit = defineEmits(['node-click']);
 
-const handleNodeClick = (data) => {
-  emit('node-click', data);
+const handleNodeClick = (data, node) => {
+  emit('node-click', data, node);
 };
 </script>
 <style lang="scss" scoped>

sub-government-affairs-service/src/views/dict/component/region/index.vue

@@ -3,13 +3,14 @@
     <div>
       <el-row :gutter="20">
         <el-col :span="4">
-          <el-tree
+          <!-- <el-tree
             style="max-width: 600px"
             :data="typeTree"
             node-key="areaCode"
             :props="{ children: 'areaChildVOS', label: 'areaName' }"
             @node-click="handleNodeClick"
-          />
+          /> -->
+          <custom-table-tree title="行政区域" :data="typeTree" :option="treeOption" @node-click="handleNodeClick" />
         </el-col>
         <el-col :span="20">
           <avue-crud
@@ -126,35 +127,13 @@ const state = reactive({
   currentRow: {},
 });
 
-let typeTree = ref([
-  // {
-  //   label: '耿马县',
-  //   id: '0',
-  //   level: '0',
-  //   children: [
-  //     {
-  //       label: '镇1',
-  //       level: '1',
-  //       id: '01',
-  //       children: [
-  //         { label: '村1', children: [], id: '0101', pId: '01', level: '2' },
-  //         { label: '村2', children: [], id: '0102', pId: '01', level: '2' },
-  //       ],
-  //       pId: '0',
-  //     },
-  //     { label: '镇2', level: '1', children: [], id: '02', pId: '0' },
-  //   ],
-  // },
-  // {
-  //   label: '县1',
-  //   id: '1',
-  //   level: '0',
-  //   children: [{ label: '镇1', children: [], id: '11', pId: '10', level: '1' }],
-  // },
-]);
-let townOptions = reactive([]);
-
-let infoData = reactive({
+const typeTree = ref([]);
+const treeOption = ref({
+  nodeKey: 'areaCode',
+  props: { children: 'areaChildVOS', label: 'areaName' },
+});
+const townOptions = reactive([]);
+const infoData = reactive({
   countyId: '',
   townId: '',
   name: '',