项目场景:

提示:使用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'
        }
    },
Logo

前往低代码交流专区

更多推荐