小伙伴们都看到了，这里两个表格非常像，但是不一样，考虑到两个表格可复用性非常大，因此我创建一个组件PosMana来实现这两个功能，组件注册成功后，按如下方式引用：

  1. <el-tabs v-model="defaultTab" type="card">
  2.     <el-tab-pane label="部门管理" name="depMana">
  3.     <dep-mana></dep-mana>
  4.     </el-tab-pane>
  5.     <el-tab-pane label="职位管理" name="positionMana">
  6.     <pos-mana state="position"></pos-mana>
  7.     </el-tab-pane>
  8.     <el-tab-pane label="职称管理" name="jobTitleMana">
  9.     <pos-mana state="jobtitle"></pos-mana>
  10.     </el-tab-pane>
  11.     <el-tab-pane label="奖惩规则" name="ecCfg">
  12.     <ec-mana></ec-mana>
  13.     </el-tab-pane>
  14.     <el-tab-pane label="权限组" name="menuRole">
  15.     <menu-role></menu-role>
  16.     </el-tab-pane>
  17. </el-tabs>

大家注意职位管理和职称管理是同一个组件，但是state参数不一样。在组件中，我将根据state参数来决定表格的显示样式，请求的地址等。如：

表格是否显示职称等级列

  1. <el-table-column
  2.     prop="titleLevel"
  3.     label="职称级别"
  4.     width="180"
  5.     align="left" v-if="state=='jobtitle'">
  6. </el-table-column>

职位名称or职称名称

  1. <el-table-column
  2.     prop="name"
  3.     :label="state=='position'?'职位名称':'职称名称'"
  4.     width="180"
  5.     align="left">
  6. </el-table-column>

增删改地址

  1. doDelete(ids){
  2. var _this = this;
  3. _this.loading = true;
  4. var url = this.state == 'position' ? '/system/basic/position/' : '/system/basic/joblevel/';
  5. this.deleteRequest(url + ids).then(resp=> {
  6.     _this.loading = false;
  7.     if (resp && resp.status == 200) {
  8.     _this.loadTableData();
  9.     }
  10. })
  11. }

动态资源都根据state来动态调整，详细的小伙伴们可以参考vuehr\src\components\system\basic\PosMana.vue组件。