极客观点
项目管理
HarmonyOS
使用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>
:data='tableData'这里的tableData应该是个数组，你写成对象了