【VUE2,通过回调、插槽、实现父子组件的高度解耦和高度通信】

budgtDiff代码：

<template>
  <el-row>
    <PlanLeafList v-slot="{data}" :plan-id="$route.params.id" :load="load">
      <el-row>
        <ResponsiveDescriptions v-if="data.projectApplication" colon :xs="1" :sm="2" border>
          <el-descriptions-item label="执行机构">{{
            data.projectApplication.dept ? data.projectApplication.dept.name : '无'
          }}
          </el-descriptions-item>
          <el-descriptions-item label="项目编号">{{
            data.projectApplication.projectCode ? data.projectApplication.projectCode
            : '无'
          }}
          </el-descriptions-item>
          <el-descriptions-item label="项目名称">{{
            data.projectApplication.projectName ? data.projectApplication.projectName
            : '无'
          }}
          </el-descriptions-item>
          <el-descriptions-item label="项目所处阶段">{{
            data.projectApplication ?
              (data.projectApplication.planProjec ? dict.label.project_plan_status[data.projectApplication.planProject.planStatus] : '无') : '无'
          }}
          </el-descriptions-item>
        </ResponsiveDescriptions>
        <el-table
          border
          :data="data.budgetExpenditureDiffUnitList"
          row-key="id"
          :cell-class-name="getCellStyle"
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
          :cell-style="{textAlign:'center'}"
          :header-cell-style="{textAlign:'center'}"
          default-expand-all
        >
          <el-table-column label="预算名称" prop="budgetName" width="120">
            <template slot-scope="scope">
              {{ scope.row.budgetName }}
            </template>

          </el-table-column>
          <el-table-column label="预算金额" prop="budgetAmount" width="100" align="right">
            <template #default="scope">
              {{ scope.row.budgetAmount ? scope.row.budgetAmount.toFixed(2) : '' }}
            </template>
          </el-table-column>
          <el-table-column label="实际发生数（元）" prop="expenditureAmount" width="120" align="right">
            <template #default="scope">
              {{ scope.row.expenditureAmount ? scope.row.expenditureAmount.toFixed(2) : '' }}
            </template>
          </el-table-column>
          <el-table-column label="预算与实际差异（预算-实际）（元）" align="right">
            <template #default="scope">
              {{
                scope.row.budgetAmount && scope.row.expenditureAmount ? (scope.row.budgetAmount - scope.row.expenditureAmount).toFixed(2) : ''
              }}
            </template>
          </el-table-column>
          <el-table-column label="完成率 实际/预算*%" align="right">
            <template #default="scope">
              {{
                scope.row.budgetAmount && scope.row.expenditureAmount ? `${(scope.row.expenditureAmount / scope.row.budgetAmount).toFixed(2)}%` : ''
              }}
            </template>
          </el-table-column>
          <!--        <el-table-column label="差异说明" prop="reason" />-->
        </el-table>
      </el-row>
    </PlanLeafList>
  </el-row>
</template>
<script>
import { initData } from '@/api/data'
import ResponsiveDescriptions from '@/components/ResponsiveDescriptions/index.vue'
import PlanLeafList from '@/views/project/statistics/planLeafList.vue'

export default {
  name: 'ProjectBudgetDiff',
  components: { PlanLeafList, ResponsiveDescriptions },
  methods: {
    getCellStyle({ row, column, rowIndex, columnIndex }) {
      console.log('ssss')
      if (columnIndex === 2) {
        return 'cell-budget'
      }
      if (columnIndex === 3) {
        return 'cell-actual'
      }
      if (columnIndex === 4) {
        return 'cell-diff'
      }
      return null
    },
    load(id, callback) {
      console.log('load ', id, callback)
      initData(`api/analysis/project/budget`, {
        id: id
      }).then(result => {
        callback(result)
      }).catch(() => {
        callback(null)
      })
    }
  }
}
</script>
<style scoped lang="scss">
::v-deep .cell-budget {
  background: green;
  color: black;
}

::v-deep .cell-actual {
  background: yellow;
  color: black;
}

::v-deep .cell-diff {

}
</style>

planLeafList代码：

<template>
  <el-row v-loading="loading">
    <el-empty v-if="list.length===0" :image-size="200" />
    <ExpandCard
      v-for="(item,index) in list"
      :key="index"
      v-loading="item.loading"
      :header="item.data.projectName"
      :lazy-load="() => lazyLoad(item)"
    >
      <slot v-if="item.detail" :data="item.detail" />
    </ExpandCard>
  </el-row>
</template>

<script>
import { initData } from '@/api/data'
import ExpandCard from '@/components/ExpandCard/index.vue'

export default {
  name: 'PlanLeafList',
  components: { ExpandCard },
  props: {
    planId: String,
    load: Function
  },
  data() {
    return {
      loading: false,
      list: [],
      states: []
    }
  },
  created() {
    this.loading = true
    initData(`api/project/plan/leaf`, {
      id: this.planId
    }).then(result => {
      this.list = result.map(value => {
        return {
          loading: false,
          data: value,
          detail: null
        }
      })
    }).finally(() => {
      this.loading = false
    })
  },
  methods: {
    lazyLoad(item) {
      if (this.load) {
        const loadFn = this.load
        item.loading = true // 下拉框点击时，触发这个方法，这个方法调用了从父组件传来的方法（是可以由父组件自定义的方法），下一个方法就是使用从父组件传过来的方法，然后通过回调，可以从
        loadFn(item.data.id, (data) => {
          item.detail = data
          item.loading = false
        })
      }
    }
  }
}
</script>

<style scoped lang="scss">
.el-card {
  margin-bottom: 20px ;
  margin-left: 20px;
  margin-right: 20px;

  &:first-child {
    margin-top: 20px;
  }
}
</style>