更改树学生数据来源，优化树显示效果

src/views/wypj/wypj/tree.vue

@@ -5,8 +5,10 @@
 
       <el-select class="w-400px" v-model="xh" filterable remote reserve-keyword placeholder="请输入学生姓名"
         :remote-method="remoteMethod" :loading="loading" @change="xhChange" clearable @clear="remoteMethod">
-        <el-option v-for="item in options" :key="item.xdxx_xsxh" :label="item.xdxx_xsxm + ' ' + item.xdxx_xsxh"
-          :value="item.xdxx_xsxh" />
+        <!-- <el-option v-for="item in options" :key="item.xdxx_xsxh" :label="item.xdxx_xsxm + ' ' + item.xdxx_xsxh"
+          :value="item.xdxx_xsxh" /> -->
+        <el-option v-for="item in options" :key="item.xdx_xsxh"
+          :label="item.xdx_xsxm + ' ' + item.grade_name + item.class_name" :value="item.xdx_xsxh" />
       </el-select>
     </div>
     <div id="d3" v-show="this.treeData"></div>
@@ -26,7 +28,7 @@ export default {
       loading: false,
       options: [],
       xh: undefined
-      // xh: 'G112233'
+      // xh: 'G778899'
 
     }
   },
@@ -43,25 +45,41 @@ export default {
       }).then(res => {
         if (res.code == '1') {
           if (res.data.data?.length === 0) return;
+          let n = 0;
           const data = this.treeData = {
             name: '',
             children: [{
               name: '',
               children: [{
                 name: '',
-                children: res.data.data.map(({ xdww_name, pfx_list }) => ({ name: xdww_name, children: pfx_list.map(({ xdwwp_name, wdwp_xs_df }) => ({ name: xdwwp_name + ' (' + wdwp_xs_df + ')' })) }))
+                //
+                children: res.data.data.map(
+                  ({ xdww_name, pfx_list }) => ({
+                    name: xdww_name,
+                    children: pfx_list.map(
+                      ({ xdwwp_name, wdwp_xs_df }) => {
+                        n++
+                        return ({ name: xdwwp_name + ' (' + wdwp_xs_df + ')' })
+                      }
+                    )
+                  }))
               }]
             }]
           }
 
           console.log('data : ', data)
           {
+            console.log('d3.select("#d3>svg") : ', d3.select("#d3>svg"))
+            // 删除元素
+            d3.select("#d3>svg").remove()
+
             const width = 1200;
+            const height = 400;
 
             // Compute the tree height; this approach will allow the height of the
             // SVG to scale according to the breadth (width) of the tree layout.
             const root = d3.hierarchy(data);
-            const dx = 100;
+            const dx = 700 / n;
             const dy = 80;
             console.log('dx,dy : ', dx, dy)
             // Create a tree layout.
@@ -82,8 +100,10 @@ export default {
             });
 
             // Compute the adjusted height of the tree.
-            const height = 400;
 
+
+
+            // 创建元素
             const svg = d3.select("#d3").append("svg")
               .attr("width", width)
               .attr("height", height)
@@ -210,7 +230,8 @@ export default {
     remoteMethod(keyword) {
       this.loading = true
       request({
-        url: '/xddy/dygl_xsczda_xs/index',
+        // url: '/xddy/dygl_xsczda_xs/index',
+        url: '/xddy/dygl_xsxjk/index',
         data: {
           keyword
         }
@@ -230,6 +251,9 @@ export default {
       this.getTreeData()
     }
   },
+  created() {
+    this.remoteMethod(undefined)
+  },
   mounted() {
     this.getTreeData()
   }