搭建页面结构

  1. <template>
  2.   <div class="permission-container">
  3.     <div class="app-container">
  4.       <!-- 表格 -->
  5.       <el-card>
  6.         <div style="text-align: right; margin-bottom: 20px">
  7.           <el-button type="primary" size="small">添加权限</el-button>
  8.         </div>
  9.         <el-table border>
  10.           <el-table-column label="名称" />
  11.           <el-table-column label="标识" />
  12.           <el-table-column label="描述" />
  13.           <el-table-column label="操作">
  14.             <template>
  15.               <el-button type="text">添加</el-button>
  16.               <el-button type="text">编辑</el-button>
  17.               <el-button type="text">删除</el-button>
  18.             </template>
  19.           </el-table-column>
  20.         </el-table>
  21.       </el-card>
  22.     </div>
  23.   </div>
  24. </template>
  1. import request from '@/utils/request'
  3. // 获取权限列表
  4. export function getPermissionList(params) {
  5.   return request({
  6.     url: '/sys/permission',
  7.     params
  8.   })
  9. }
  10. // 新增权限
  11. export function addPermission(data) {
  12.   return request({
  13.     url: '/sys/permission',
  14.     method: 'post',
  15.     data
  16.   })
  17. }
  19. // 更新权限
  20. export function updatePermission(data) {
  21.   return request({
  22.     url: `/sys/permission/${data.id}`,
  23.     method: 'put',
  24.     data
  25.   })
  26. }
  28. // 删除权限
  29. export function delPermission(id) {
  30.   return request({
  31.     url: `/sys/permission/${id}`,
  32.     method: 'delete'
  33.   })
  34. }
  36. // 获取权限详情
  37. export function getPermissionDetail(id) {
  38.   return request({
  39.     url: `/sys/permission/${id}`
  40.   })
  41. }

获取数据

  1. import { getPermissionList } from '@/api/permission'
  2. import transTree from '@/utils/transTree'
  3. export default {
  4.   data() {
  5.     return {
  6.       list: []
  7.     }
  8.   },
  9.   mounted () {
  10.     this.getList()
  11.   },
  12.   methods: {
  13.     async getList() {
  14.       const res = await getPermissionList()
  15.       this.list = transTree(res.data)
  16.     }
  17.   }
  18. }

树形图渲染

导入之前封装的函数，查看elemnet文档发现 当前行数据有 children字段时 被视为树形数据 row-key="id"绑定属性会渲染出来属性结构

  1. <el-table :data="list" row-key="id" border>

添加功能

这里数据不是很多，用弹层组件直接使用 将绑定的默认值变为number类型的 需要加 : 不加就是字符串加上就是识别类型

  1. <el-dialog :visible="showDialog" title="弹层标题" @close="showDialog = false">
  2.   <el-form label-width="100px">
  3.     <el-form-item label="权限名称">
  4.       <el-input />
  5.     </el-form-item>
  6.     <el-form-item label="权限标识">
  7.       <el-input />
  8.     </el-form-item>
  9.     <el-form-item label="权限描述">
  10.       <el-input />
  11.     </el-form-item>
  12.     <el-form-item label="权限启用">
  13.       <el-switch
  14.         active-text="启用"
  15.         active-value="1"
  16.         inactive-text="不启用"
  17.         inactive-value="0"
  18.       />
  19.     </el-form-item>
  20.   </el-form>
  21.   <template #footer>
  22.     <div style="text-align: right;">
  23.       <el-button @click="showDialog = false">取消</el-button>
  24.       <el-button type="primary">确定</el-button>
  25.     </div>
  26.   </template>
  27. </el-dialog>

给弹层绑定数据

  1. <el-dialog :visible="showDialog" title="弹层标题" @close="showDialog = false">
  2.   <!-- 表单内容 -->
  3.   <el-form label-width="100px">
  4.     <el-form-item label="权限名称">
  5.       <el-input v-model="formData.name" />
  6.     </el-form-item>
  7.     <el-form-item label="权限标识">
  8.       <el-input v-model="formData.code" />
  9.     </el-form-item>
  10.     <el-form-item label="权限描述">
  11.       <el-input v-model="formData.description" />
  12.     </el-form-item>
  13.     <el-form-item label="权限启用">
  14.       <el-switch
  15.         v-model="formData.enVisible"
  16.         active-text="启用"
  17.         active-value="1"
  18.         inactive-text="不启用"
  19.         inactive-value="0"
  20.       />
  21.     </el-form-item>
  22.   </el-form>
  24.   <template #footer>
  25.     <div style="text-align: right;">
  26.       <el-button @click="showDialog = false">取消</el-button>
  27.       <el-button type="primary">确定</el-button>
  28.     </div>
  29.   </template>
  30. </el-dialog>
  33. <script>
  34. import { getPermissionList } from '@/api/permission'
  35. import transTree from '@/utils/transTree'
  36. export default {
  37.   data() {
  38.     return {
  39.       showDialog: false,
  40.       formData: {
  41.         enVisible: '0', // 开启
  42.         name: '', // 名称
  43.         code: '', // 权限标识
  44.         description: '', // 描述
  45.         type: '', // 类型
  46.         pid: '' // 添加到哪个节点下
  47.       }
  48.     }
  49.   }
  50. }
  51. </script>

功能

最上方法的添加 与 表格中的添加不同 type用来区别 pid 两个地方使用同一个函数 传入不同的参数来区别 一个函数需要多个传参的时候 建议写成对象形式 函数形参解构赋值 对象参数写法可以无视参数顺序

  1. // 最上方的添加
  2. <el-button  @click="add({pid:'',type:1})">添加权限</el-button>
  3. // 表格中的添加
  4. <el-button type="text" @click="add({pid:row.id,type:2})">添加</el-button>
  6. add({ pid, type }) {
  7.   this.showDialog = true
  8.   this.formData.pid = pid
  9.   this.formData.type = type
  10. },
  1. methods: {
  2.   async getList() {
  3.     const res = await getPermissionList()
  4.     this.list = transTree(res.data)
  5.   },
  6.     add({ pid, type }) {
  7.       this.showDialog = true
  8.       this.formData.pid = pid
  9.       this.formData.type = type
  10.     },
  11.       closeDialog() {
  12.         this.showDialog = false
  13.         this.formData = {
  14.           enVisible: 1, // 开启
  15.           name: '', // 名称
  16.           code: '', // 权限标识
  17.           description: '', // 描述
  18.           type: '', // 类型
  19.           pid: '' // 添加到哪个节点下
  20.         }
  21.       },
  22.         async confim () {
  23.           await addPermission(this.formData)
  24.           this.$message.success('新增权限成功')
  25.           // 重新获取列表
  26.           this.getList()
  27.           // 关闭弹层
  28.           this.closeDialog()
  29.         },
  30.   }

删除功能

根据id删除

  1.  async deletePer(id) {
  2.             try {
  3.               await delPermission(id)
  4.               this.$message.success('删除权限点成功')
  5.               this.getList()
  6.             } catch (error) {
  7.               this.$message.error(error)
  8.             }
  9.           }

编辑功能

  1. async editor(id) {
  2.       const { data } = await getPermissionDetail(id)
  3.       this.formData = data
  4.       this.showDialog = true
  5.     }
  1.  async confim () {
  2.       if (this.formData.id) {
  3.         await updatePermission(this.formData)
  4.       } else {
  5.         await addPermission(this.formData)
  6.       }
  7.       this.$message.success(`${this.formData.id ? '修改' : '新增'}权限成功`)
  8.       // 重新获取列表
  9.       this.getList()
  10.       // 关闭弹层
  11.       this.closeDialog()
  12.     },

按钮权限

如果是二级页面 不能继续添加 需要隐藏掉添加按钮 给 添加按钮 v-if 用当前行的数据里面type来做判断

  1. v-if="row.type === 1"