角色权限设计

src/views/role/index.vue

@@ -68,24 +68,41 @@
             :data="functionList"
             v-loading="loading"
           >
-            <!-- <el-table-column type="selection" width="60" align="center"></el-table-column> -->
+        
             <el-table-column type="expand">
               <template style="width:80%;" slot-scope="scope">
-                <div :id="scope.row.id">
-                  <el-table
+                <div >
+                  <!-- <el-table
                     :data="scope.row.children"
-                    row-key="id"
+                     :row-key="getRowKeys"
                     border
-                  >
-                    <el-table-column type="selection" width="60" align="center">
+                    @selection-change="handleSelectionChange"
+                  > -->
 
-                    </el-table-column>
-                    <el-table-column label="功能名称" align="left" prop="name">
+                  <el-table
+                      border
+                      :data="scope.row.children"
+                      row-key="id"
+                      ref="multiTable"
+                      @selection-change="handleSelectionChange"
+                    >
 
+                    <!-- <el-table-column type="selection" width="60" align="center"> -->
+
+                    <!-- </el-table-column> -->
+                    <el-table-column label="功能名称" align="left" prop="name">
+                        
+                      <template slot-scope="scope">
+                         <el-checkbox-group v-model="checkList" style="display:inline-block" @change="handleCheckedCitiesChange">
+                          <el-checkbox :label="scope.row.id">{{scope.row.name}}</el-checkbox></el-checkbox-group>
+                      </template>
                     </el-table-column>
                     <el-table-column label="操作" align="center">
+                      <template slot-scope="scope">
+                        <span v-if="checkList.filter(item=>item==scope.row.id)[0]">添加</span>
+                      </template>
                       <!-- <span v-if="multipleSelection">{{multipleSelection}}</span> -->
-                      <span>添加</span>
+                      
                     </el-table-column>
                   </el-table>
                 </div>
@@ -97,6 +114,8 @@
               </template>
             </el-table-column>
           </el-table>
+  
+
         </el-form-item>
          <el-form-item label="数据权限" prop="data" v-if="showDataList">
             <el-cascader
@@ -130,6 +149,11 @@ export default {
   },
   data() {
     return {
+      //  getRowKeys(row){
+			// 	return row.id
+			// },
+      checkList:[],
+     checked: true,
       visible: false,
       loading: false,
       btnLoading: false,
@@ -151,7 +175,7 @@ export default {
       },
       rules: {
         name: [{ required: true, message: '请输入部门名称', trigger: 'blur' },],
-        function: [{ required: true, message: '请选择功能权限', trigger: 'change' },],
+        // function: [{ required: true, message: '请选择功能权限', trigger: 'change' },],
       },
     }
   },
@@ -169,6 +193,20 @@ export default {
     }
   },
   methods: {
+   
+   handleCheckedCitiesChange(value) {
+        console.log(value)
+      },
+
+
+
+      handleSelectionChange(val) {
+        console.log( val,this.$refs.multipleTable.selection)
+        
+        // this.$refs.multipleTable.toggleRowSelection(val[0])
+        this.multipleSelection = val;
+      },
+
     normalizer(node) {
       return {
         id: node.id,