16.组件复用

小伙伴们都看到了，这里两个表格非常像，但是不一样，考虑到两个表格可复用性非常大，因此我创建一个组件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参数来决定表格的显示样式，请求的地址等。如：

表格是否显示职称等级列

<el-table-column
    prop="titleLevel"
    label="职称级别"
    width="180"
    align="left" v-if="state=='jobtitle'">
</el-table-column>

职位名称or职称名称

<el-table-column
    prop="name"
    :label="state=='position'?'职位名称':'职称名称'"
    width="180"
    align="left">
</el-table-column>

增删改地址

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组件。