element-ui三級樹形控件與背景銜接問題

• • 環境
  • 出現的問題
  • 第一步
  • 第二步
  • 第三步

環境

此問題是基于Vue-cli項目的element-ui技術中樹形控件的問題

出現的問題

點選一級分類的權限按鈕會選中一級分類下包括所有二級分類,所有三級分類的權限,然後點選确定按鈕,之後檢視資料庫并重新整理浏覽器頁面,我們發現權限已經配置設定,頁面也可以正常顯示.

打開配置設定權限視窗–>點選需要賦予的權限(三級分類下的個别權限)–>點選确定按鈕,完成操作後檢視資料庫發現,權限已經賦予了,但是重新整理浏覽器頁面後我們再次點選配置設定權限視窗發現,該一級分類下的所有二級分類,和所有三級分類都被勾選了,前後端資料不一緻.

接下來為大家提供解決方案

第一步

在樹形控件中添加check-strictly屬性,屬性前加冒号,則值就可綁定data中的變量

<div>
	<el-tree
	    :props="defaultProps"
	    :data="permissions"
	    show-checkbox
	    node-key="menuId"
	    :default-checked-keys="rolePermissions"
	    ref="tree"
	    <!--   此屬性傳回值為boolean類型     -->
	    <!--   作用: 在顯示複選框的情況下，是否嚴格的遵循父子不互相關聯的做法，預設為 false     -->
	    :check-strictly="systemNodeFlag"
	  >
	</el-tree>
</div>
<span slot="footer" class="dialog-footer">
  <el-button @click="permissionDialogVisible = false">取 消</el-button>
  <el-button type="primary" @click="authorize">确 定</el-button>
</span>
           

第二步

data中定義該變量

data(){
    return {
      permissionDialogVisible:false,
      permissions:[],
      rolePermissions:[],
      systemNodeFlag:false,
      roleId:null,
      defaultProps: {
        children: 'menuList',
        label: 'name'
      }
    }
  },
           

第三步

發出ajax請求得到傳回的數組(數組中存使用者已有權限的id值),再給樹形控件節點指派之前先設定systemNodeFlag屬性為true,然後設定等頁面渲染後再給節點指派,指派完成後不要忘了設定systemNodeFlag屬性為false

openPermissionDialog(roleId){
      this.roleId=roleId;
      this.permissionDialogVisible= true;
      this.axios.get("/tree")
        .then(resp=>{
          this.permissions = resp.data.data;
          return this.axios.get(`/resource/${this.roleId}`);
        }).then(resp=>{
        this.rolePermissions = resp.data.data.map((item)=>{return item.resourceId});
        this.systemNodeFlag = true  //重點：給數節點指派之前 先設定為true
        this.$nextTick(() => {//等頁面渲染後，再做的處理。
          this.$refs.tree.setCheckedKeys(this.rolePermissions) //給樹節點指派
          this.systemNodeFlag = false //重點： 指派完成後 設定為false
        })
      })
    }
           

然後這個前後端資料不一緻的問題就結局了,第一次寫部落格,如有不足之處請多多包涵