vue element-ui中的树形表格id重复?
项目场景:提示:使用element-ui中的树形表格有重复id!问题描述:提示:这里描述项目中遇到的问题:例如:我递归查询时row-key=“id”,id中有重复的数据,不影响我使用树形表格,但是会报错!<el-table:data="treeTeams"style="width:100%; margin-bottom: 20px":row-key="getRowKey"border:laz
·
项目场景:
提示:使用element-ui中的树形表格有重复id!
问题描述:
提示:这里描述项目中遇到的问题:
例如:我递归查询时 row-key=“id”,id中有重复的数据,不影响我使用树形表格,但是会报错!
<el-table
:data="treeTeams"
style="width:100%; margin-bottom: 20px"
:row-key="getRowKey"
border
:lazy="true"
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
>
<el-table-column prop="id" label="用户id" sortable> </el-table-column>
<el-table-column prop="name" label="用户姓名"></el-table-column>
<el-table-column property="roleId" label="用户角色">
<template slot-scope="scope">
<span v-if="scope.row.roleId === 1" style="color:orange">普通用户</span>
<span v-if="scope.row.roleId === 2" style="color:green">经纪人</span>
<span v-if="scope.row.roleId === 4" style="color:red">分公司</span>
</template>
</el-table-column>
<el-table-column prop="results" label="业绩"></el-table-column>
</el-table>
原因分析:
提示:这里填写问题的分析:
例如:我这里返回的id中有重复的数据,所以会报错,树形表格不许有重复的数据出现!
解决方案:
提示:这里填写该问题的具体解决方案:
(1):我们的实体类返回数据的时候可以返回uuid!
(2):可以在前端进行处理,详细请看代码(我用的这种),切记使用这种方法是,row-key这个属性必须要动态绑定!不然会报错!如(:row-key=“getRowKey”)
//解决重复id
getRowKey(row){
if(row.propertyName){
return row.id
}else{
return row.id+'only'
}
},
更多推荐
已为社区贡献1条内容
所有评论(0)