el-table的:data使用疑问

Question

使用el-table做一个动态获取数据的表格，在el-table标签中绑定数据:data='tableData',el-table-column标签中添加prop属性，script中为tableData初始化，tableData: null出不来数据，按照官网所写tableData:[]也出不来数据,如下图：

换一种写法：

   tableData: {
        serveName: '',
        address: '',
        port: '',
        localhost: '',
        intro: '',
        products: '',
        remarks: ''
      },

出现如下样子：

请问出现这种问题的原因是什么？

相关代码

<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>

Answer 1

tableData 应该是数组，你给的对象；遍历对象的话key就是每个属性的key值
如下所示：
const arr = [1,2,3,4]
const obj = {a:1, b:2,c:3, d:4}

console.log(Object.keys(arr))//["0", "1", "2", "3"]
console.log(Object.keys(obj))//["a", "b", "c", "d"]

在组件的第一个el-table-item里面，你写的是type=index，理应值应该等于数组下标+1 -> 1,2,3,4。而你给的是对象，所以就出现了对象里key值后面加个1的情况

Answer 2

这是我在我本地将你的代码运行了一下，遇到问题有变量命名重复，scope.row 使用混乱，建议先搞清楚是什么再上手写，要不会遇到不可以预期的错误

仅供参考

Answer 3

数据类型有问题呀，明明官方要求是数组，你却写个对象，就像外卖小哥只给你送外卖，联系到你你却跟他要快递一样

Answer 4

你的代码放出来

Answer 5

tableData是个个数组啊，里面装的是对象
tableData=[{},{},{},{}]类似这样的

Answer 6

:data='tableData'这里的tableData应该是个数组，你写成对象了

 tableData: [{
        serveName: '',
        address: '',
        port: '',
        localhost: '',
        intro: '',
        products: '',
        remarks: ''
      },
        {
        serveName: '',
        address: '',
        port: '',
        localhost: '',
        intro: '',
        products: '',
        remarks: ''
      }]