Element ui 表格树形控件的使用

Element ui 表格树形控件的使用

注意点：

• element ui已经做好了封装，主要是下面三句代码：

<el-table
        :data="items"
        row-key="id"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      >

• 必须要指定 row-key，:tree-props可以不写，会有默认值。
• 数据里面需要有chirdren字段，也可以是hasChildren（boolean类型）字段。
• 如果不是懒加载，后端不要设置hasChildren这个属性，否则不能显示树形；如果是懒加载，则需要设置hasChildren字段。

部分实现代码如下：

• 前端：

<template>
  <div>
    <el-table
      :data="dictList"
      :load="loadChildrens"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      row-key="id"
      style="width:100%"
      border
      lazy
    >
      <el-table-column label="名称" width="230" align="left">
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="dictCode" label="编码" width="220" align="left">
<!--        <template slot-scope="scope">
          <span>{{ scope.row.dictCode }}</span>
        </template>-->
      </el-table-column>
      <el-table-column label="值" width="230" align="left">
        <template slot-scope="scope">
          <span>{{ scope.row.value }}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.createTime }}</span>
        </template>
      </el-table-column>

    </el-table>
  </div>
</template>

<script>
import dict from '@/api/dict'
export default {
  data() {
    return {
      dictList: []
    }
  },
  created() {
    this.getDictList(1) // 获取第一级
  },
  methods: {
    getDictList(id) { // 查询第一级的内容
      dict.getDictList(id)
        .then(response => {
          this.dictList = response.data
        })
    },
    loadChildrens(tree, treeNode, resolve) { // 查询下面的层级内容，类似递归
      dict.getDictList(tree.id)
        .then(response => {
          resolve(response.data)
        })
    }
  }
}
</script>

<style scoped>

</style>

• 后端
  1.实体类：重点hasChildren; // 数据库中不存在

@Data
@ApiModel(description = "数据字典")
@TableName("dict")
public class Dict extends BaseEnity {

    private static final long serialVersionUID = 1L;

    @ApiModelProperty(value = "逻辑删除(1:已删除，0:未删除)")
    @TableLogic
    @TableField("is_deleted")
    private Integer isDeleted;

    @ApiModelProperty(value = "其他参数")
    @TableField(exist = false)
    private Map<String,Object> param = new HashMap<>();

    @ApiModelProperty(value = "上级id")
    @TableField("parent_id")
    private Long parentId;

    @ApiModelProperty(value = "名称")
    @TableField("name")
    private String name;

    @ApiModelProperty(value = "值")
    @TableField("value")
    private String value;

    @ApiModelProperty(value = "编码")
    @TableField("dict_code")
    private String dictCode;

    @ApiModelProperty(value = "是否包含子节点")
    @TableField(exist = false)
    private boolean hasChildren; // 数据库中不存在

}

2.逻辑处理

@Service
public class DictServiceImpl extends ServiceImpl<DictMapper, Dict> implements DictService {

    /**
     *     @Autowired
     *     protected M baseMapper;
     *     ServiceImpl 源码中已经做了mapper自动注入，因此在这里可以不用再注入
     */

    // 根据id查询子数据列表
    @Override
    public List<Dict> findChildData(Long id) {
        QueryWrapper<Dict> wrapper = new QueryWrapper();
        wrapper.eq("parent_id",id); // select * from dict where parent_id = id
        List<Dict> dictList = baseMapper.selectList(wrapper);
        // 遍历List，向list集合中每个dict对象设置hasChildren
        for (Dict dict:dictList
             ) {
            boolean hasChildren = this.isHasChildren(dict.getId());
            dict.setHasChildren(hasChildren);
        }

        return dictList;
    }

    // 判断id下面 是否有 子结点hasChildren
    public boolean isHasChildren(Long id){
        QueryWrapper<Dict> wrapper = new QueryWrapper();
        wrapper.eq("parent_id",id);
        Integer count = baseMapper.selectCount(wrapper);
        return count>0;
    }

}

启发文章：https://www.cnblogs.com/pzw23/p/12058457.html