目錄

• 1、實現效果
• 2、後端實現
• 2.1 實體類
• 2.2 中的資料結構
• 2.3 後端介面
• 2.4 swagger測試後端結構功能是否正常
• 3、前端實現
• 3.1 頁面中引入el-table元件
• 3.2 實現效果

1、實現效果

2、後端實現

2.1 實體類

@Data
@ApiModel(description = "資料字典")
@TableName("diwww.cppcns.comct")
public class Dict {

    private static final long serialVersionUID = 1L;

    @ApiModelProperty(value = "id")
    private Long id;

    @ApiModelProperty(value = "建立時間")
    @onFormat(pattern = "yyyy-MM-dd HH:mm:ss")
    @TableField("create_time")
    private Date createTime;

    @ApiModelProperty(value = "更新時間")
    @TableField("update_time")
    private Date updateTime;

    @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 http://www.cppcns.com
 
boolean hasChildren;

}

上面必須包含一個hasChildren屬性，即使資料庫中沒有該屬性，這是element框架要求的。

2.2 資料庫中的資料結構

2.3 後端介面

如果完全用後端實現的話，那寫個遞迴把所有資料按照層次結構查詢完並封裝好即可。但element的table元件給我們封裝好了一些東西，我們只需要在這裡根據上級id查詢子資料列表即可。

controller程式碼：

 //根據上級id查詢子資料列表
    @ApiOperation(value = "根據上級id查詢子資料列表")
    @GetMapping("findChildData/{id}")
    public Result findChildData(@PathVariable Long id){
        List<Dict> list = dictService.findChil
 
dData(id);
        return Result.ok(list);
    }

service

service實現類

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

    //根據上級id查詢子資料列表
    @Override
    public List<Dict> findChildData(Long id) {
        QueryWrapper<Dict> wrapper=new QueryWrapper<>();
        wrapper.eq("parent_id",id);
        List<Dict> list = baseMapper.selectList(wrapper);
        //向list集合中的每個dict物件中設定hasChildren
        list.forEach(x->{
            Long dictId = x.getId();
            boolean isChild = this.isChildren(dictId);
            x.setHasChildren(isChild);
        });
        return list;
    }

    //判斷id下面是否有子資料
    private boolean isChildren(Long id){
        QueryWrapper<Dict> wrapper=new QueryWrapper<>();
        wrapper.eq("parent_id",id);
        Integer count = baseMapper.selectCount(wrapper);
        return count > 0;
    }
}

2.4 swagger測試後端結構功能是否正常

3、前端實現

3.1 頁面中引入el-table元件

list.

<template>
  <div class="app-container">

    <el-tabhttp://www.cppcns.comle
      :data="list"
      style="width: 100%"
      row-key="id"
      border
      lazy
      :load="getChildrens"
      :tree-props="{children: 'children',hasChildren: 'hasChildren'}">
      <el-table-column label="名稱" width="230" align="left">
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>

      <el-table-column label="編碼" width="220">
        <template slot-scope="{row}">
          {{ row.dictCode }}
        </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 {
  name: 'list',data(){
    return{
      list:[],//資料字典列表陣列
      dialogImportVisible:false,//設定彈框是否彈出
    }
  },created() {
    this.getDictList(1)
  },methods:{
    //資料字典列表
    getDictList(id){
      dict.dictList(id)
        .then(response=>{
            this.list=response.data
        })
    },getChildrens(tree,treeNode,resolve) {
      dict.dictList(tree.id).then(response => {
        resolve(response.data)
      })
    },}
}
</script>

<style scoped>

</style>

上面關鍵的方法是getChildrens這個方法，在每一層呼叫後端介面將子節點資料查詢出來，並加入樹形結構的表格資料中。

呼叫後端結構的工具js檔案 dict.js

import request from '@/utils/request'

export default {
  //資料字典列表
  dictList(id){
    return request({
      url: `/admin/cmn/dict/findChildData/${id}`,method: 'get'
    })
  },}

3.2 實現效果

前後端測試都沒有問題，由於使用的是懶載入，只有去點選父節點的時候，子節點的資料才會被載入，避免因資料量太大導致系統卡頓。

到此這篇關於Vue elementUI實現樹形結構表格與懶載入的文章就介紹到這了,更多相關Vue elementUI內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！