提交

src/xt_pages/role/components/PermissionSettings.vue

 <template>
-  <el-dialog class="settingDialog" title="角色权限配置" width="750px" :visible.sync="visible">
+  <el-dialog
+    class="settingDialog"
+    title="角色权限配置"
+    width="750px"
+    :visible.sync="visible"
+  >
     <div class="roleSettings">
       <div class="roleName">
         <div class="roleNameLeft">
           <p>角色名称</p>
-          <el-input placeholder="请输入内容" v-model="input" :disabled="true"></el-input>
+          <el-input
+            placeholder="请输入内容"
+            v-model="input"
+            :disabled="true"
+          ></el-input>
         </div>
         <p style="color:#338AFB">删除该角色</p>
       </div>
         </div>
         <div class="roleMainRight">
           <div class="hasChoose">已选择权限</div>
-          <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
+          <el-tree
+            :data="data"
+            :props="defaultProps"
+            @node-click="handleNodeClick"
+          ></el-tree>
         </div>
       </div>
     </div>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="hide">取 消</el-button>
+      <el-button type="primary">保 存</el-button>
+    </div>
   </el-dialog>
 </template>
 
-
 <script>
 export default {
   data() {
   methods: {
     show() {
       this.visible = true;
+    },
+    hide() {
+      this.visible = false;
     }
   }
 };
 }
 </style>
 
-
 <style lang="scss">
 .settingDialog {
   .el-dialog__body {