ElementUI中Tree組件使用案例講解

更新時(shí)間：2022年12月09日 15:41:45 作者：Wmenghu

這篇文章主要介紹了ElementUI中Tree組件使用案例講解,本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

案例一：

要實(shí)現(xiàn)這種類型的樹(shù)控件，并且后邊相關(guān)操作：

1.1后端準(zhǔn)備工作

首先，數(shù)據(jù)庫(kù)表為：

查詢接口返回的實(shí)體類為：

@Data
@NoArgsConstructor
@RequiredArgsConstructor // 有參構(gòu)造
@EqualsAndHashCode(callSuper = false ,of = "name")// 表示以name去重寫(xiě)的Equals和HashCode
@Accessors(chain = true)
@TableName("t_department")
@ApiModel(value="Department對(duì)象", description="")
public class Department implements Serializable {
 
    private static final long serialVersionUID = 1L;
 
    @ApiModelProperty(value = "id")
    @TableId(value = "id", type = IdType.AUTO)
    private Integer id;
 
    @ApiModelProperty(value = "部門名稱")
    @Excel(name = "部門")
    @NonNull
    private String name;
 
    @ApiModelProperty(value = "父id")
    private Integer parentId;
 
    @ApiModelProperty(value = "路徑")
    private String depPath;
 
    @ApiModelProperty(value = "是否啟用")
    private Boolean enabled;
 
    @ApiModelProperty(value = "是否上級(jí)")
    private Boolean isParent;
 
    @ApiModelProperty(value = "子部門列表")
    @TableField(exist = false)
    private List<Department> children;
 
    @ApiModelProperty(value = "返回結(jié)果，存儲(chǔ)過(guò)程使用")
    @TableField(exist = false)
    private Integer result;
 
}

查詢接口返回的數(shù)據(jù)格式：通過(guò)屬性 children來(lái)判斷是否有子節(jié)點(diǎn)

[
  {
    "id": 1,
    "name": "股東會(huì)",
    "parentId": -1,
    "depPath": ".1",
    "enabled": true,
    "isParent": true,
    "children": [
      {
        "id": 2,
        "name": "董事會(huì)",
        "parentId": 1,
        "depPath": ".1.2",
        "enabled": true,
        "isParent": true,
        "children": [
          {
            "id": 3,
            "name": "總辦",
            "parentId": 2,
            "depPath": ".1.2.3",
            "enabled": true,
            "isParent": true,
            "children": [
              {
                "id": 4,
                "name": "財(cái)務(wù)部",
                "parentId": 3,
                "depPath": ".1.2.3.4",
                "enabled": true,
                "isParent": false,
                "children": [],
                "result": null
              },
              {
                "id": 5,
                "name": "市場(chǎng)部",
                "parentId": 3,
                "depPath": ".1.2.3.5",
                "enabled": true,
                "isParent": true,
                "children": [
                  {
                    "id": 6,
                    "name": "華東市場(chǎng)部",
                    "parentId": 5,
                    "depPath": "1.2.3.5.6",
                    "enabled": true,
                    "isParent": true,
                    "children": [
                      {
                        "id": 8,
                        "name": "上海市場(chǎng)部",
                        "parentId": 6,
                        "depPath": "1.2.3.5.6.8",
                        "enabled": true,
                        "isParent": false,
                        "children": [],
                        "result": null
                      }
                    ],
                    "result": null
                  },
                  {
                    "id": 7,
                    "name": "華南市場(chǎng)部",
                    "parentId": 5,
                    "depPath": "1.2.3.5.7",
                    "enabled": true,
                    "isParent": false,
                    "children": [],
                    "result": null
                  },
                  {
                    "id": 9,
                    "name": "西北市場(chǎng)部",
                    "parentId": 5,
                    "depPath": ".1.2.3.5.9",
                    "enabled": true,
                    "isParent": true,
                    "children": [
                      {
                        "id": 10,
                        "name": "貴陽(yáng)市場(chǎng)",
                        "parentId": 9,
                        "depPath": ".1.2.3.5.9.10",
                        "enabled": true,
                        "isParent": true,
                        "children": [
                          {
                            "id": 11,
                            "name": "烏當(dāng)區(qū)市場(chǎng)",
                            "parentId": 10,
                            "depPath": ".1.2.3.5.9.10.11",
                            "enabled": true,
                            "isParent": false,
                            "children": [],
                            "result": null
                          }
                        ],
                        "result": null
                      }
                    ],
                    "result": null
                  }
                ],
                "result": null
              },
              {
                "id": 12,
                "name": "技術(shù)部",
                "parentId": 3,
                "depPath": ".1.2.3.12",
                "enabled": true,
                "isParent": false,
                "children": [],
                "result": null
              },
              {
                "id": 13,
                "name": "運(yùn)維部",
                "parentId": 3,
                "depPath": ".1.2.3.13",
                "enabled": true,
                "isParent": false,
                "children": [],
                "result": null
              }
            ],
            "result": null
          }
        ],
        "result": null
      },
      {
        "id": 150,
        "name": "aaa",
        "parentId": 1,
        "depPath": ".1.150",
        "enabled": true,
        "isParent": true,
        "children": [
          {
            "id": 151,
            "name": "abbb",
            "parentId": 150,
            "depPath": ".1.150.151",
            "enabled": true,
            "isParent": false,
            "children": [],
            "result": null
          }
        ],
        "result": null
      },
      {
        "id": 154,
        "name": "ccc",
        "parentId": 1,
        "depPath": ".1.154",
        "enabled": true,
        "isParent": false,
        "children": [],
        "result": null
      },
      {
        "id": 157,
        "name": "dddd",
        "parentId": 1,
        "depPath": ".1.157",
        "enabled": true,
        "isParent": false,
        "children": [],
        "result": null
      }
    ],
    "result": null
  }
]

1.2前端代碼

從官網(wǎng)上復(fù)制一個(gè)模板過(guò)來(lái)，搜索的話，直接往下找一個(gè)有搜索框的，把搜索框復(fù)制過(guò)來(lái)，復(fù)制好就可以開(kāi)始修改，寫(xiě)增刪改查的方法調(diào)用了。

寫(xiě)好的代碼如下：

<template>
  <div style="width: 550px;">
    <el-input
      placeholder="請(qǐng)輸入部門名稱進(jìn)行搜索..."
      prefix-icon="el-icon-search"
      v-model="filterText">
    </el-input>
 
    <el-tree
      :data="deps"
      :props="defaultProps"
      :filter-node-method="filterNode"
      :expand-on-click-node="false"
      ref="tree">
      <!-- slot-scope可以自定義樹(shù)節(jié)點(diǎn)里的內(nèi)容，node當(dāng)前節(jié)點(diǎn)的node對(duì)象，data后端對(duì)應(yīng)返回的數(shù)據(jù) -->
      <span class="custom-tree-node" slot-scope="{ node, data }" style="display:flex; justify-content: space-between;width: 100%;">
        <span>{{ data.name }}</span>
        <span>
          <el-button
            type="primary"
            size="mini"
            class="depBtn"
            @click="() => showAddDep(data)">
            添加部門
          </el-button>
          <el-button
            type="danger"
            size="mini"
            class="depBtn"
            @click="() => deleteDep(data)">
            刪除部門
          </el-button>
        </span>
      </span>
    </el-tree>
 
    <!-- 添加部門的彈出框 -->
    <el-dialog
      title="添加部門"
      :visible.sync="dialogVisible"
      width="30%">
      <div>
        <table>
          <tr>
            <td><el-tag>上級(jí)部門</el-tag></td>
            <td><el-tag>{{pname}}</el-tag></td>
          </tr>
          <tr>
            <td><el-tag>部門名稱</el-tag></td>
            <td><el-input v-model="dep.name" placeholder="請(qǐng)輸入部門名稱..."></el-input></td>
          </tr>
        </table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="doAddDep">確 定</el-button>
      </span>
    </el-dialog>
 
  </div>
</template>
 
<script>
export default {
    data(){
      return{
        // 樹(shù)的搜索條件
        filterText: '',
        // 樹(shù)的數(shù)據(jù)
        deps: [],
        // 樹(shù)的配置
        defaultProps: {
          children: 'children',
          label: 'name'
        },
        // 添加彈出框
        dialogVisible: false,
        // 添加的部門數(shù)據(jù)
        dep:{
          name:'',
          parentId: -1
        },
        // 上級(jí)部門名稱
        pname: ''
      }
    },
    mounted(){
      this.initDeps();
    },
    methods: {
      // 初始化數(shù)據(jù)
      initDeps(){
        this.getRequest('/system/basic/department/').then(resp=>{
          this.deps = resp;
        })
      },
      // 樹(shù)的搜索
      filterNode(value, data) {
        if (!value) return true;
        return data.name.indexOf(value) !== -1;
      },
      // 添加彈框
      showAddDep(data){
        console.log(data)
        this.dep.parentId = data.id;
        this.pname = data.name;
        this.dialogVisible = 'true'
      },
      // 添加
      doAddDep(){
        this.postRequest('/system/basic/department/',this.dep).then(resp=>{
          if(resp.code==200){
            resp.obj.children = []
            this.addDep2Deps(this.deps,resp.obj);
            this.initDep();
            this.dialogVisible = false;
          }
        })
      },
      initDep(){
        this.dep = {
          name: '',
          parentId: -1
        }
        this.panme = ''
      },
      // 添加成功后手動(dòng)的給樹(shù)加數(shù)據(jù)
      addDep2Deps(deps,dep){
        for(let i = 0; i<deps.length; i++){
          let d= deps[i];
          if(d.id == dep.parentId){
            d.children = d.children.concat(dep);
            if(d.children.length>0){
              d.isParent = true;
            }
            return;
          }else{
            // 遞歸
            this.addDep2Deps(d.children,dep);
          }
        }
      },
      // 刪除
      deleteDep(data){
        console.log(data)
        if(data.isParent){
          this.$message.error("父部門無(wú)法刪除");
        }else{
          this.$confirm('此操作將永久['+data.name+']部門, 是否繼續(xù)?', '提示', {
            confirmButtonText: '確定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.deleteRequest('/system/basic/department/'+data.id).then(resp=>{
              if(resp.code==200){
                this.removeDepFromDeps(null,this.deps,data.id);
              }
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消刪除'
            });          
          });
        }
      },
      // 手動(dòng)刪除  (父部門，總部門數(shù)據(jù)，要?jiǎng)h除的部門id)
      removeDepFromDeps(p,deps,id){
        for(let i=0; i<deps.length; i++){
          let d = deps[i];
          if(d.id==id){
            deps.splice(i,1);
            if(deps.length==0){
              p.isParent = false;
            }
            return;
          }else{
            this.removeDepFromDeps(d,d.children,id);
          }
        }
      }
    },
    watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      }
    }
}
</script>
 
<style>
.depBtn{
  padding: 3px;
}
</style>

需要注意的是：

1：樹(shù)組件中 :data="deps" 加載樹(shù)組建的數(shù)據(jù)。:props="defaultProps" 加載樹(shù)組件的配置，其中l(wèi)abel是給個(gè)枝葉的名字對(duì)應(yīng)的字段，children是子節(jié)點(diǎn)對(duì)應(yīng)的字段。:filter-node-method="filterNode" 樹(shù)組件的搜索,filterNode過(guò)濾的回調(diào)，這個(gè)官網(wǎng)拷貝即可。:expand-on-click-node="false" 關(guān)閉點(diǎn)擊折疊，只有點(diǎn)擊前面的小三角才能展開(kāi)折疊。

2：搜索框綁定的數(shù)據(jù)filterText，下面監(jiān)聽(tīng)這個(gè)數(shù)據(jù)的改變，如果改變了，就調(diào)用樹(shù)的filter方法（this.$refs.tree.filter(val);），進(jìn)行過(guò)濾，這個(gè)方法的回調(diào)在樹(shù)組件的屬性中定義:filter-node-method="filterNode" ，也就是輸入框值改變了，會(huì)去掉filterNode這個(gè)方法，這個(gè)方法傳入兩個(gè)值，value是文本框輸入值，data是樹(shù)組件的數(shù)據(jù)，value為空直接返回，不為空則過(guò)濾。

3：添加部門的時(shí)候，添加成功后不能單純的掉接口，重新請(qǐng)求一次樹(shù)中的數(shù)據(jù)，這樣的話，每添加一個(gè)部門，整個(gè)樹(shù)就會(huì)折疊起來(lái)。這時(shí)候就需要不調(diào)接口請(qǐng)求新的數(shù)據(jù)，在js中操作樹(shù)中的數(shù)據(jù)this.deps，讓它和數(shù)據(jù)庫(kù)保持同步。首先在成功后調(diào)用方法： addDep2Deps(deps,dep) 這個(gè)方法第一個(gè)參數(shù)是整個(gè)樹(shù)中的數(shù)據(jù)，第二個(gè)參數(shù)是新添加的樹(shù)的數(shù)據(jù)（這個(gè)數(shù)據(jù)是添加成功接口回顯的數(shù)據(jù)，也就是添加的這條記錄信息）在這個(gè)方法中，會(huì)循環(huán)，找到對(duì)應(yīng)的父節(jié)點(diǎn)，給它的子節(jié)點(diǎn)拼接數(shù)據(jù)，修改父節(jié)點(diǎn)isParent屬性（是否有孩子），之后就一直遞歸，知道添加完成為止。這個(gè)數(shù)據(jù)添加成功后，清空彈出框中輸入的信息，關(guān)閉彈出框。

4：刪除操作，同樣，刪除時(shí)也要手動(dòng)的在js中把這條數(shù)據(jù)刪除，不能請(qǐng)求新數(shù)據(jù)，請(qǐng)求新數(shù)據(jù)會(huì)導(dǎo)致樹(shù)整個(gè)關(guān)閉，用戶體驗(yàn)十分不好，需要在js中把樹(shù)中的數(shù)據(jù)和數(shù)據(jù)庫(kù)中進(jìn)行同步。

調(diào)用接口刪除成功后，調(diào)用removeDepFromDeps(p,deps,id)方法，在js中進(jìn)行數(shù)據(jù)刪除，調(diào)用時(shí)，第一個(gè)參數(shù)傳null表示從頂層節(jié)點(diǎn)開(kāi)始往下找，第二個(gè)參數(shù)是樹(shù)的數(shù)據(jù)，第三個(gè)參數(shù)是要?jiǎng)h除部門的id。同樣進(jìn)行循環(huán)，添加中比較的是父節(jié)點(diǎn)的id，刪除是，比較的就是這個(gè)葉子的id，如果相同，那就刪除，同時(shí)，判斷把這個(gè)葉子刪掉后，這個(gè)枝下面還有沒(méi)有葉子，因?yàn)橛腥~子的枝是不能刪除的，所以要再判斷一下修改isParent的狀態(tài)，之后還是一樣，在一層中沒(méi)有查詢到的話，就遞歸到下一層去找。

案例二

這種前面帶有選擇框的，進(jìn)行授權(quán)操作

2.1后端準(zhǔn)備

對(duì)應(yīng)的數(shù)據(jù)庫(kù)表

對(duì)應(yīng)的實(shí)體類：

@Data
@EqualsAndHashCode(callSuper = false)
@Accessors(chain = true)
@TableName("t_menu")
@ApiModel(value="Menu對(duì)象", description="")
public class Menu implements Serializable {
 
    private static final long serialVersionUID = 1L;
 
    @ApiModelProperty(value = "id")
    @TableId(value = "id", type = IdType.AUTO)
    private Integer id;
 
    @ApiModelProperty(value = "url")
    private String url;
 
    @ApiModelProperty(value = "path")
    private String path;
 
    @ApiModelProperty(value = "組件")
    private String component;
 
    @ApiModelProperty(value = "菜單名")
    private String name;
 
    @ApiModelProperty(value = "圖標(biāo)")
    private String iconCls;
 
    @ApiModelProperty(value = "是否保持激活")
    private Boolean keepAlive;
 
    @ApiModelProperty(value = "是否要求權(quán)限")
    private Boolean requireAuth;
 
    @ApiModelProperty(value = "父id")
    private Integer parentId;
 
    @ApiModelProperty(value = "是否啟用")
    private Boolean enabled;
 
    @ApiModelProperty(value = "子菜單")
    @TableField(exist = false) // 告訴mybatisplus這個(gè)字段不在表中，查詢的時(shí)候不要去查
    private List<Menu> children;
 
    @ApiModelProperty(value = "角色列表")
    @TableField(exist = false)
    private List<Role> roles;
 
}

查詢接口返回的數(shù)據(jù)

{
  "code": 200,
  "message": "查詢成功",
  "obj": [
    {
      "id": 1,
      "url": null,
      "path": null,
      "component": null,
      "name": "所有",
      "iconCls": null,
      "keepAlive": null,
      "requireAuth": null,
      "parentId": null,
      "enabled": null,
      "children": [
        {
          "id": 2,
          "url": null,
          "path": null,
          "component": null,
          "name": "員工資料",
          "iconCls": null,
          "keepAlive": null,
          "requireAuth": null,
          "parentId": null,
          "enabled": null,
          "children": [
            {
              "id": 7,
              "url": null,
              "path": null,
              "component": null,
              "name": "基本資料",
              "iconCls": null,
              "keepAlive": null,
              "requireAuth": null,
              "parentId": null,
              "enabled": null,
              "children": null,
              "roles": null
            },
            {
              "id": 8,
              "url": null,
              "path": null,
              "component": null,
              "name": "高級(jí)資料",
              "iconCls": null,
              "keepAlive": null,
              "requireAuth": null,
              "parentId": null,
              "enabled": null,
              "children": null,
              "roles": null
            }
          ],
          "roles": null
        },
        {
          "id": 3,
          "url": null,
          "path": null,
          "component": null,
          "name": "人事管理",
          "iconCls": null,
          "keepAlive": null,
          "requireAuth": null,
          "parentId": null,
          "enabled": null,
          "children": [
            {
              "id": 9,
              "url": null,
              "path": null,
              "component": null,
              "name": "員工資料",
              "iconCls": null,
              "keepAlive": null,
              "requireAuth": null,
              "parentId": null,
              "enabled": null,
              "children": null,
              "roles": null
            },
            {
              "id": 10,
              "url": null,
              "path": null,
              "component": null,
              "name": "員工獎(jiǎng)懲",
              "iconCls": null,
              "keepAlive": null,
              "requireAuth": null,
              "parentId": null,
              "enabled": null,
              "children": null,
              "roles": null
            },
            {
              "id": 11,
              "url": null,
              "path": null,
              "component": null,
              "name": "員工培訓(xùn)",
              "iconCls": null,
              "keepAlive": null,
              "requireAuth": null,
              "parentId": null,
              "enabled": null,
              "children": null,
              "roles": null
            },
            {
              "id": 12,
              "url": null,
              "path": null,
              "component": null,
              "name": "員工調(diào)薪",
              "iconCls": null,
              "keepAlive": null,
              "requireAuth": null,
              "parentId": null,
              "enabled": null,
              "children": null,
              "roles": null
            },
            {
              "id": 13,
              "url": null,
              "path": null,
              "component": null,
              "name": "員工調(diào)動(dòng)",
              "iconCls": null,
              "keepAlive": null,
              "requireAuth": null,
              "parentId": null,
              "enabled": null,
              "children": null,
              "roles": null
            }
          ],
          "roles": null
        },
        {
          "id": 4,
          "url": null,
          "path": null,
          "component": null,
          "name": "薪資管理",
          "iconCls": null,
          "keepAlive": null,
          "requireAuth": null,
          "parentId": null,
          "enabled": null,
          "children": [
            {
              "id": 14,
              "url": null,
              "path": null,
              "component": null,
              "name": "工資賬套管理",
              "iconCls": null,
              "keepAlive": null,
              "requireAuth": null,
              "parentId": null,
              "enabled": null,
              "children": null,
              "roles": null
            },
            {
              "id": 15,
              "url": null,
              "path": null,
              "component": null,
              "name": "員工賬套設(shè)置",
              "iconCls": null,
              "keepAlive": null,
              "requireAuth": null,
              "parentId": null,
              "enabled": null,
              "children": null,
              "roles": null
            },
            {
              "id": 16,
              "url": null,
              "path": null,
              "component": null,
              "name": "工資表管理",
              "iconCls": null,
              "keepAlive": null,
              "requireAuth": null,
              "parentId": null,
              "enabled": null,
              "children": null,
              "roles": null
            },
            {
              "id": 17,
              "url": null,
              "path": null,
              "component": null,
              "name": "月末處理",
              "iconCls": null,
              "keepAlive": null,
              "requireAuth": null,
              "parentId": null,
              "enabled": null,
              "children": null,
              "roles": null
            },
            {
              "id": 18,
              "url": null,
              "path": null,
              "component": null,
              "name": "工資表查詢",
              "iconCls": null,
              "keepAlive": null,
              "requireAuth": null,
              "parentId": null,
              "enabled": null,
              "children": null,
              "roles": null
            }
          ],
          "roles": null
        },
        {
          "id": 5,
          "url": null,
          "path": null,
          "component": null,
          "name": "統(tǒng)計(jì)管理",
          "iconCls": null,
          "keepAlive": null,
          "requireAuth": null,
          "parentId": null,
          "enabled": null,
          "children": [
            {
              "id": 19,
              "url": null,
              "path": null,
              "component": null,
              "name": "綜合信息統(tǒng)計(jì)",
              "iconCls": null,
              "keepAlive": null,
              "requireAuth": null,
              "parentId": null,
              "enabled": null,
              "children": null,
              "roles": null
            },
            {
              "id": 20,
              "url": null,
              "path": null,
              "component": null,
              "name": "員工積分統(tǒng)計(jì)",
              "iconCls": null,
              "keepAlive": null,
              "requireAuth": null,
              "parentId": null,
              "enabled": null,
              "children": null,
              "roles": null
            },
            {
              "id": 21,
              "url": null,
              "path": null,
              "component": null,
              "name": "人事信息統(tǒng)計(jì)",
              "iconCls": null,
              "keepAlive": null,
              "requireAuth": null,
              "parentId": null,
              "enabled": null,
              "children": null,
              "roles": null
            },
            {
              "id": 22,
              "url": null,
              "path": null,
              "component": null,
              "name": "人事記錄統(tǒng)計(jì)",
              "iconCls": null,
              "keepAlive": null,
              "requireAuth": null,
              "parentId": null,
              "enabled": null,
              "children": null,
              "roles": null
            }
          ],
          "roles": null
        },
        {
          "id": 6,
          "url": null,
          "path": null,
          "component": null,
          "name": "系統(tǒng)管理",
          "iconCls": null,
          "keepAlive": null,
          "requireAuth": null,
          "parentId": null,
          "enabled": null,
          "children": [
            {
              "id": 23,
              "url": null,
              "path": null,
              "component": null,
              "name": "基礎(chǔ)信息設(shè)置",
              "iconCls": null,
              "keepAlive": null,
              "requireAuth": null,
              "parentId": null,
              "enabled": null,
              "children": null,
              "roles": null
            },
            {
              "id": 24,
              "url": null,
              "path": null,
              "component": null,
              "name": "系統(tǒng)管理",
              "iconCls": null,
              "keepAlive": null,
              "requireAuth": null,
              "parentId": null,
              "enabled": null,
              "children": null,
              "roles": null
            },
            {
              "id": 25,
              "url": null,
              "path": null,
              "component": null,
              "name": "操作日志管理",
              "iconCls": null,
              "keepAlive": null,
              "requireAuth": null,
              "parentId": null,
              "enabled": null,
              "children": null,
              "roles": null
            },
            {
              "id": 26,
              "url": null,
              "path": null,
              "component": null,
              "name": "操作員管理",
              "iconCls": null,
              "keepAlive": null,
              "requireAuth": null,
              "parentId": null,
              "enabled": null,
              "children": null,
              "roles": null
            },
            {
              "id": 27,
              "url": null,
              "path": null,
              "component": null,
              "name": "備份恢復(fù)數(shù)據(jù)庫(kù)",
              "iconCls": null,
              "keepAlive": null,
              "requireAuth": null,
              "parentId": null,
              "enabled": null,
              "children": null,
              "roles": null
            },
            {
              "id": 28,
              "url": null,
              "path": null,
              "component": null,
              "name": "初始化數(shù)據(jù)庫(kù)",
              "iconCls": null,
              "keepAlive": null,
              "requireAuth": null,
              "parentId": null,
              "enabled": null,
              "children": null,
              "roles": null
            }
          ],
          "roles": null
        }
      ],
      "roles": null
    }
  ]
}

2.2前端代碼

<template>
  <div>
    <!-- 添加角色  -->
    <div class="permissManaTool">
        <el-input size="small" placeholder="請(qǐng)輸入角色英文名" v-model="role.name">
          <template slot="prepend">ROLE_</template>
        </el-input>
        <el-input size="small" placeholder="請(qǐng)輸入角色中文名" v-model="role.nameZh" @keydown.enter.native="addRole"></el-input>
        <el-button size="small" type="primary" icon="el-icon-plus" @click="addRole">添加角色</el-button>
    </div>
    <!-- 手風(fēng)琴  -->
    <div style="margin-top:10px; width:660px">
      <el-collapse v-model="activeName" accordion @change="change">
        <el-collapse-item :title="r.nameZh" :name="r.id" v-for="(r,index) in roles" :key="index">
          <!-- 卡片 -->
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>可訪問(wèn)資源</span>
              <el-button style="float: right; padding: 3px 0; color: #ff0000;" type="text" icon="el-icon-delete" @click="doDeleteRole(r)"></el-button>
            </div>
            <div>
              <!-- 樹(shù) -->
              <el-tree 
                show-checkbox
                node-key="id"
                ref="tree"
                :key="index"
                :default-checked-keys="selectMenus" 
                :data="allMenus" :props="defaultProps"></el-tree>
                <div style="display:flex; justify-content: flex-end">
                  <el-button size="mini" @click="cancelUpdate">取消修改</el-button>
                  <el-button size="mini" type="primary" @click="doUpdate(r.id,index)">確定修改</el-button>
                </div>
            </div>
          </el-card>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>
 
<script>
export default {
    data(){
      return{
        role:{
          name:'',
          nameZh:''
        },
        activeName : '-1',
        roles:[],
        allMenus: [],
        // 樹(shù)菜單的屬性，children子菜單的屬性，label顯示出來(lái)的名字,都是后端接口返回來(lái)的字段名字
        defaultProps: {
          children: 'children',
          label: 'name'
        },
        // 樹(shù)中選中的節(jié)點(diǎn)
        selectMenus: []
      }
    },
    mounted(){
      this.initRoles();
      
    },
    methods:{
      // 初始化所有菜單
      initAllMenus(){
        this.getRequest('/system/basic/permiss/menus').then(resp=>{
          if(resp.code==200){
            this.allMenus = resp.obj;
          }
        })
      },
      // 根據(jù)角色id獲取菜單
      initSelectdMenus(rid){
        this.getRequest('/system/basic/permiss/mid/'+rid).then(resp=>{
          if(resp.code==200){
            this.selectMenus = resp.obj;
          }
        })
      },
      // 獲取角色列表
      initRoles(){
        this.getRequest('/system/basic/permiss/').then(resp=>{
          if(resp.code==200){
            this.roles = resp.obj;
          }
        })
      },
      // 手風(fēng)琴點(diǎn)擊事件，展開(kāi)rid是每個(gè)name，name對(duì)應(yīng)著后端字段id，關(guān)閉時(shí)rid為空
      change(rid){
        if(rid){
          this.initAllMenus();
          this.initSelectdMenus(rid);
        }
      },
      // 修改角色權(quán)限 
      doUpdate(rid,index){
        // 拿到這個(gè)手風(fēng)琴下面的樹(shù)
        let tree = this.$refs.tree[index];
        // 傳true只打印葉子節(jié)點(diǎn)的id
        let selectedKeys = tree.getCheckedKeys(true);
        let url = '/system/basic/permiss/?rid='+ rid;
        selectedKeys.forEach(key => {
          url += '&mids='+ key;
        });
        this.putRequest(url).then(resp=>{
          if(resp.code==200){
            this.activeName = '-1'
          }
        })
      },
      cancelUpdate(){
        this.activeName = '-1'
      },
      // 添加角色
      addRole(){
        if(this.role.name && this.role.nameZh){
          this.postRequest('/system/basic/permiss/',this.role).then(resp=>{
            if(resp.code==200){
              this.initRoles();
              this.role.name = '';
              this.role.nameZh = '';
            }
          })
        }else{
          this.$message.error("所有字段不能為空");
        }
      },
      // 刪除角色
      doDeleteRole(role){
        this.$confirm('此操作將永久刪除'+role.nameZh+'角色, 是否繼續(xù)?', '提示', {
          confirmButtonText: '確定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.deleteRequest('/system/basic/permiss/role/'+r.id).then(resp => {
            if(resp.code == 200){
              
              this.initRoles();
            }else{
              this.$message.error(resp.message)
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消刪除'
          });          
        });
      }
    }
}
</script>
 
<style>
.permissManaTool{
  display: flex;
  justify-content: flex-start;
}
.permissManaTool .el-input{
  width: 300px;
  margin-right: 10px;
}
</style>

值得注意的是：

1：每個(gè)角色下面展開(kāi)的權(quán)限樹(shù)列表用的是手風(fēng)琴組件（折疊面板）這里還要給樹(shù)加上key，因?yàn)槊總€(gè)手風(fēng)琴下面都是一個(gè)樹(shù) 折疊面板餓了嗎官網(wǎng)

2：樹(shù)要展示前面的選擇框，要給樹(shù)組件加上show-checkbox屬性。:default-checked-keys="selectMenus" 默認(rèn)選中的key，這個(gè)selectMenus需要去data中定義一個(gè)數(shù)組。

3：在添加時(shí)，可通過(guò) let tree = this.$refs.tree[index]; 拿到整個(gè)手風(fēng)琴下面的樹(shù)，let selectedKeys = tree.getCheckedKeys(true) 獲取選中節(jié)點(diǎn)的id，修改成功后，把手風(fēng)琴的折疊屬性，定義成-1，折疊即可，因?yàn)橄麓卧俅蜷_(kāi)的時(shí)候，會(huì)去數(shù)據(jù)庫(kù)查出這個(gè)角色對(duì)應(yīng)菜單的最新數(shù)據(jù)。

到此這篇關(guān)于ElementUI中Tree組件使用的文章就介紹到這了,更多相關(guān)ElementUI中Tree組件使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: