1.开发页面时，按钮开发避坑指南

以用户模块页面为例介绍，相关vue文件位置：src/components/system-setting/user/index.vue，这里为了前后端配合控制按钮权限是否展示，使用了 v-if 语法。

  1.  <el-button-group v-if="tableList.buttonGroupIsShow">
  2.           <el-button type="primary" @click="fSearch" icon="Search" v-if="tableList.buttonList.select">查询</el-button>
  3.           <el-button type="success" @click="fCreateEdit('insert')" icon="Plus" v-if="tableList.buttonList.insert">新增</el-button>
  4.           <el-button type="primary" @click="fCreateEdit('update')" icon="Edit" v-if="tableList.buttonList.update">修改</el-button>
  5.           <el-button type="danger" @click="fDelete('delete')" icon="Delete" v-if="tableList.buttonList.delete">删除</el-button>
  6.   </el-button-group>

v-if 语法里面定义了按钮列表，这里的按钮列表需要和后端定义的按钮代码一致。

  1. // tableList.buttonList，本页面可展示的按钮列表全部先定义
  3. buttonList: {
  4. insert: 'insert',
  5. delete: 'delete',
  6. update: 'update',
  7. select: 'select',
  8. },

后端按钮表已经集成的按钮清单，即前端需要使用的按钮 en_name 必须和后端的定义保持一致，这样才能做到页面元素权限精准控制。
image.png