use el-table to make a table for dynamic data acquisition. Bind the data : data="tableData" in the el-table tag, add the prop attribute to the el-table-column tag, initialize the tableData in script, tableData: null , and the data cannot be generated according to the official website tableData: [] , as shown in the following figure

:

:

what is the cause of this problem?

related codes

<template>
  <div>
    <el-table border style="width: 100%" :data="tableData">
      <el-table-column type="index" align="center"></el-table-column>
      <el-table-column label="" prop="serveName" align="center"></el-table-column>
      <el-table-column label="" align="center">
        <el-table-column label="" prop="address" align="center" width="180">
          <template slot-scope="scope">
            <!-- {{ scope.row }} -->
            <el-button size="small" class="el-icon-plus" @click="handleAddTop_address"></el-button>
            <el-tree ref="expandMenuList" class="expand-tree"
              v-if="isLoadingTree"
              :data="addressTreeData"
              node-key="id"
              highlight-current
              :props="defaultProps"
              :expand-on-click-node="false"
              :render-content="renderContent"
              :default-expanded-keys="defaultExpandKeys"
              @node-click="handleNodeClick"></el-tree>
          </template>
        </el-table-column>
        <el-table-column label="" prop="port" align="center" width="180">
          <template slot-scope="scope">
            <!-- {{ scope.row }} -->
            <el-button size="small" class="el-icon-plus" @click="handleAddTop_port"></el-button>
            <el-tree ref="expandMenuList" class="expand-tree"
              v-if="isLoadingTree"
              :data="portTreeData"
              node-key="id"
              highlight-current
              :props="defaultProps"
              :expand-on-click-node="false"
              :render-content="renderContent"
              :default-expanded-keys="defaultExpandKeys"
              @node-click="handleNodeClick"></el-tree>
          </template>
        </el-table-column>
        <el-table-column label="" prop="localhost" align="center" width="200"></el-table-column>
        <el-table-column label="" prop="intro" align="center"></el-table-column>
        <el-table-column label="" prop="products" align="center"></el-table-column>
      </el-table-column>
      <el-table-column label="" prop="remarks" align="center"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import TreeRender from "./tree_render"
// import slotTree from "./slot_tree"
import address from "../../api/address.js"
export default {
  data(){
    return{
       tableData: {
         serveName: "",
         address: "",
         port: "",
         localhost: "",
         intro: "",
         products: "",
         remarks: ""
      },
      maxexpandId: address.maxexpandId,//id
      non_maxexpandId: address.maxexpandId,//id()
      isLoadingTree: false,//
      portTreeData: port.treelist,
      defaultProps: {
        children: "children",
        label: "name"
      },
      defaultExpandKeys: [],
    }
  },
  mounted(){
    this.initExpand()
  },
  methods: {
    initExpand(){
      this.addressTreeData.map((a) => {
        this.defaultExpandKeys.push(a.id)
      });
      this.isLoadingTree = true;
    },
    handleNodeClick(d,n,s){//
      },
      renderContent(h,{node,data,store}){//
      },
      handleAddTop_address(){
      },
      handleAddTop_port(){
      },
      handleAdd(s,d,n){//
        console.log(s,d,n)
      },
      handleEdit(s,d,n){//
        console.log(s,d,n)
      },
      handleDelete(s,d,n){//
      },
  },
}
</script>

<style>
.expand{
  width:100%;
  height:80%;
  overflow:hidden;
}
.expand>div{
  height:85%;
  padding-top:20px;
  width:50%;
  margin:20px auto;
  max-width:400px;
  overflow-y:auto;
}
.expand>div::-webkit-scrollbar-track{
  box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  border-radius:5px;
}
.expand>div::-webkit-scrollbar-thumb{
  background-color:rgba(50, 65, 87, 0.5);
  outline:1px solid slategrey;
  border-radius:5px;
}
.expand>div::-webkit-scrollbar{
  width:10px;
}
.expand-tree{
  border:none;
  margin-top:10px;
}
.expand-tree .el-tree-node.is-current,
.expand-tree .el-tree-node:hover{
  overflow:hidden;
}
.expand-tree .is-current>.el-tree-node__content .tree-btn,
.expand-tree .el-tree-node__content:hover .tree-btn{
  display:inline-block;
}
.expand-tree .is-current>.el-tree-node__content .tree-label{
  font-weight:600;
  white-space:normal;
}
</style>