数组树状子节点显示在列表

<template>
  <div class="qingwu">

        <el-table
          :data="list"
          @selection-change="handleSelectionChange"
          row-key="id"
          :lazy="true"
          :load="load"
          :tree-props="{ children: 'area', hasChildren: 'hasChildren' }"
        >
          <el-table-column prop="id" label="编号"></el-table-column>
          <el-table-column prop="name" label="城市"></el-table-column>
          <el-table-column prop="money" label="工资"></el-table-column>

          <el-table-column label="操作" fixed="right" width="120px">
            <template slot-scope="scope">
              <el-button
                v-show="!scope.row.area"
                icon="el-icon-edit"
                @click="
                  $router.push({
                    name: 'urban_averge_wage_form',
                    params: { id: scope.row.id },
                  })
                "
                >编辑</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      isJuded: false,
      list: [],
      select_id: "",
    };
  },
  watch: {},
  computed: {},
  methods: {
    handleSelectionChange: function (e) {
      let ids = [];
      e.forEach((v) => {
        ids.push(v.id);
      });
      this.select_id = ids.join(",");
    },
    get_area_list: function () {
      let _this = this;
      this.$get(this.$api.city_wage_list).then(function (res) {
        var tempArray = [];

        for (var i = 0; i < res.data.length; i++) {}

        _this.list = res.data;

        //_this.list = res.data;
      });
    },
    load: function (e, treeNode, resolve) {
      let treeNodes = treeNode; // 无效代码
      this.$post(this.$api.getAreaChildren, { area_id: e.area_id }).then(
        (res) => {
          resolve(res);
        }
      );
    },
    // 删除处理
    del: function (id) {
      let _this = this;
      if (this.$isEmpty(id)) {
        return this.$message.error("请先选择删除的对象");
      }
      this.$post(this.$api.delArea, { id: id }).then(function (res) {
        if (res.code == 200) {
          _this.get_area_list();
          return _this.$message.success("删除成功");
        } else {
          return _this.$message.error("删除失败");
        }
      });
    },
  },
  created() {
    this.get_area_list();
  },
};
</script>
<style lang="scss" scoped>
</style>