vue+elementUI實現許可權的部門管理

汪小蓉發表於2018-05-22
VueUI
回頭看寫過的專案，發現以前感覺有難度的地方，現在想想很簡單，在此記錄一下，不對的地方歡迎吐槽！！！
複製程式碼

1.實現效果

vue+elementUI實現許可權的部門管理

2.需求分析

主要用於平臺各個部門不同許可權的操作，將指定的賬號放到對應的許可權部門下，然後根據後臺返回的賬號資訊，顯示對應的模組；
複製程式碼

3.直接上程式碼

更多elementUI詳情：element.eleme.io/#/zh-CN/com…

模板使用：

-解析-

（1）indeterminate 屬性用以表示 checkbox 的不確定狀態，一般用於實現全選的效果；

（2）v-modal繫結的是資料中改項的布林值，用於顯示是否勾選的狀態；

（3）@change的事件中，用來根據第一級的選擇狀態處理子級的選中狀態；

<template>
  <el-checkbox  :label="item.id" :indeterminate="!item.checkAll" 
       v-model="item.checkAll" @change="handleCheckAllChange(item)" > {{item.title}}
  </el-checkbox>
        <el-checkbox-group  class="sonItem"  v-model="item.checkedCities"   
           @change="handleCheckedCitiesChange(item)">
                <el-checkbox v-for="items in item.child" :label="items.cid" :key="items.cid">
                   {{items.name}}
                 </el-checkbox>
        </el-checkbox-group>
</template>
複製程式碼

資料處理：

-解析：-

checkAll:判斷母項是否被全選的狀態； checkedCities:儲存選中項，傳送給後臺；

 data(){
      return {
      itemOptions: [
          {
            title: "商品管理", id: "shangpin",  checkAll:false,checkedCities:[],
            child: [
              {name: '商品管理', cid: 'Commodityanagement'},
              {name: '分類管理', cid: 'ClassificationManagement'}, {
              name: '品牌管理', cid: 'BrandManagement'},
              {name: '評價管理', cid: 'ManagementConsulting'},
              ],
          },
          {title: '交易管理', id: "jiaoyi",checkAll:false,checkedCities:[],
            child: [
              {name: "訂單管理", cid: 'orderManagement'},
              {name: "退貨處理", cid: "returnManagement"},
              {name: "異議處理", cid: "ObjectionHandling"},
              ]
          },
          {
            title: '會員管理', id: "huiyuan",checkAll:false,checkedCities:[],
            child: [
              {name: "會員管理", cid: 'MemberManagement'},
              {name: "會員等級", cid: "MembershipGrade"},
              {name: "會員積分", cid: "MemberIntegral"},
              {name: "積分規則", cid: 'IntegralRules'},
            ]
          },
        ],
              }
    },
複製程式碼

方法處理：

    methods:{
//        全選按鈕
      handleCheckAllChange(item) {
        if(item.checkAll==true){
          for(var i=0;i<item.child.length;i++){
            item.checkedCities.push(item.child[i].cid);
          }
        }else{
          item.checkedCities=[];
        }
      },
//      單選按鈕
      handleCheckedCitiesChange(item) {
        if(item.checkedCities.length==item.child.length){
          item.checkAll=true;
        }else{
          item.checkAll=false;
        }
      },
 }
複製程式碼

相關文章