树的创建，递归建立

// elmentvue 框架 和 iview 框架
<template>
  <div>
    <Card class="tableCard">
    	<Table
        :columns="columns"
        border
        row-key="planItemCod"
        height="410"
        :data="dataList"
      >
        <!-- 计划金额 -->
        <template slot-scope="{ row, index }" slot="itemDesc">
          <Form :ref="'itemDesc' + row.uuid" :model="row" class="tableInputLong">
            <FormItem
              prop="itemDesc"
              :rules="{
                required: true,
                message: ' ',
                trigger: 'blur',
                pattern: /.+/,
              }"
              style="margin-top: 11px; margin-left: 20%"
            >
              <span v-if="!row.itemDescDisabled" class="ruleIcon"></span>

              <div style="position: relative">
                <Input
                  :disabled="row.itemDescDisabled"
                  v-model="row.itemDesc"
                  class="input-right"
                  :class="{
                    'check-input': row.itemDescRed,
                    'check-table': row.itemDescChange,
                  }"
                  :ref="'itemDesc' + index.toString()"
                  @on-blur="itemDescBlur(row, index)"
                  @on-focus="itemDescFocus(row, index)"
                />

                <span class="showWarnMessageTable" v-show="row.itemDescRed"
                  >请输入正确描述</span
                >
              </div>
            </FormItem>
          </Form>
        </template>
      </Table>
    </Card>
  </div>
</template>
<script>
   import axios from "axios";
   import app from "@/config/app";
   export default {
	name: "",
	 data() {
         return {
           columns: [
	        {
	          title: "项目编号",
	          key: "itemCod",
	          align: "center",
	          width: 150,
	          resizable: true,
	          render: (h, params) => {
	            let typeData = params.row.itemCod;
	            return h(
	              "div",
	              {
	                style: {
	                  textAlign: "left",
	                },
	              },
	              typeData
	            );
	          },
	        },
	        {
	          title: "项目",
	          key: "itemNam",
	          align: "left",
	          width: 500,
	          tree: true,
	          resizable: true,
	        },
	        {
	          title: "计划描述",
	          slot: "itemDesc",
	          align: "center",
	          resizable: true,
	        },
      		],
  			dataList: [], // 列表数据


		},
     },
      created() {
       // 查询树形结构
         this.getTreeTable();
       },
       mounted(){},
       method() {
		  	this.$net.send({
          server:  xxx, // 接口
          data: { msgid: '', XXX: 'xxx' },
        })
        .then((data) => {
          if (data.code === "200") {
            this.dataList = data.data;
            this.dataList[0].itemNam = "合计";
            this.getTableDis();
          }
        });
		},
	    getTableDis() {
	      this.dataList.forEach((item) => {
	        item._showChildren = true;
	        recursiveAddDisabledFlag(item);
	      });
	
	      function recursiveAddDisabledFlag(node) {
	        if (node.children && node.children.length > 0) {
	          // 当前节点有子节点，遍历子节点
	          node.children.forEach((child) => {
	            recursiveAddDisabledFlag(child);
	          });
	          // 当前节点设置为 disabled
	          node._showChildren = true; // 是否显示子节点
	          node.itemDescDisabled = true;
	        } else {
	          // 当前节点没有子节点，不设置为 disabled
	          node.itemDescDisabled = false;
	        }
	      }
	    },
	        // 填写描述
     itemDescBlur(row, index) {
      if ( !row.itemDescAmt) {
        row.itemDescRed = false;
      } else {
        row.itemDesc = "";
        this.dataList[index].itemDesc = "";
        row.itemDescRed = true;
      }
      this.updateNodeAmount(this.dataList, row.itemCod,row.fundSite, row.itemDesc);
     // this.sumMoneyMain(this.dataList);
    },
	sumMoneyMain(items) {
	      let sumMoney = 0;
	      items.forEach((item) => {
	        // 循环找到节点得金额
	        this.sumMoneyToItsParent(item);
	        // 判断流入流出 进行加减
	        sumMoney = accAdd(sumMoney, replaceComma(item.itemDesc) || 0);
	      });
	      return sumMoney;
	    },
	    sumMoneyToItsParent(item) {
	      let sumMoney = 0;
	      if (item.children && item.children.length > 0) {
	        item.children.forEach((childItem) => {
	          this.sumMoneyToItsParent(childItem);
	          if (childItem.planAmt == null) childItem.itemDesc= "";
	          if (childItem.fundSite == item.fundSite) {
	            sumMoney = accAdd(sumMoney, replaceComma(childItem.itemDesc) || 0);
	          } else {
	            sumMoney = accSub(sumMoney, replaceComma(childItem.itemDesc) || 0);
	          }
	        });
	        item.itemDesc= moneyFormat(sumMoney);
	      }
	    },
		 // 递归查找节点并更新金额
	    updateNodeAmount(nodes, targetNodeId, fundSite, newItemDesc) {
	      nodes.forEach((node) => {
	        if (node.itemCod === targetNodeId) {
	          // 找到目标节点，更新金额
	          node.itemDesc= newItemDesc;
	          node.fundSite = fundSite;
	          return;
	        } else if (node.children && node.children.length > 0) {
	          // 递归查找子节点
	          this.updateNodeAmount(node.children, targetNodeId, fundSite, newItemDesc);
	        }
	      });
	    },
	    
	planAmtFocus(row, index) {
      if (row.itemDesc) {
      		// 失去焦点时  要进行的操作
       // row.itemDesc= replaceComma(row.itemDesc);
      }
    },
	}
</script>

	

// 代码 -- 实体类