小伙伴们都看到了，这里两个表格非常像，但是不一样，考虑到两个表格可复用性非常大，因此我创建一个组件 PosMana 来实现这两个功能，组件注册成功后，按如下方式引用：
<el-tabs v-model="defaultTab" type="card">
<el-tab-pane label="部门管理" name="depMana">
<dep-mana></dep-mana>
</el-tab-pane>
<el-tab-pane label="职位管理" name="positionMana">
<pos-mana state="position"></pos-mana>
</el-tab-pane>
<el-tab-pane label="职称管理" name="jobTitleMana">
<pos-mana state="jobtitle"></pos-mana>
</el-tab-pane>
<el-tab-pane label="奖惩规则" name="ecCfg">
<ec-mana></ec-mana>
</el-tab-pane>
<el-tab-pane label="权限组" name="menuRole">
<menu-role></menu-role>
</el-tab-pane>
</el-tabs>
大家注意职位管理和职称管理是同一个组件，但是 state 参数不一样。在组件中，我将根据 state 参数来决定表格的显示样式，请求的地址等。如：
16.1 表格是否显示职称等级列
<el-table-column
prop="titleLevel"
label="职称级别"
width="180"
align="left" v-if="state=='jobtitle'">
</el-table-column>
16.2 职位名称 or 职称名称
<el-table-column
prop="name"
:label="state=='position'?'职位名称':'职称名称'"
width="180"
align="left">
</el-table-column>
16.3 增删改地址
doDelete(ids){
var _this = this;
_this.loading = true;
var url = this.state == 'position' ? '/system/basic/position/' : '/system/basic/joblevel/';
this.deleteRequest(url + ids).then(resp=> {
_this.loading = false;
if (resp && resp.status == 200) {
_this.loadTableData();
}
})
}
动态资源都根据 state 来动态调整，详细的小伙伴们可以参考 vuehr\src\components\system\basic\PosMana.vue 组件。
扫码关注微信公众号 江南一点雨，回复 2TB，获取超 2TB Java 学习教程~