示例图片
需求
- 上方区域展示已选择账号姓名，点击x可以删除
- 下方表格选择人员，可选择多个，分页切换支持回显
<template>
<el-dialog
title="选择人员"
:visible.sync="dialogVisible"
append-to-body width="700px">
<div class="">
<el-tag v-for="(item, idx) in user_check_list" :key="idx" closable @close="handleClose2(idx)" class="tag_style">{{ item }}</el-tag>
<br>
<hr>
<br>
<el-row :gutter="20">
<el-col :span="10">
<el-input v-model="search_account" placeholder="请输入账号"></el-input>
</el-col>
<el-col :span="2">
<el-button type="primary" icon="el-icon-search" @click="searchModel"></el-button>
</el-col>
</el-row>
<br>
<el-table :data="user_List" ref="multipleTable" border v-loading="Loading" @select="singleElection" class="tables">
<el-table-column type="selection" width="55"></el-table-column>
<template v-for="(col, index) in userTableColumns">
<el-table-column :key="index" :prop="col.prop" :label="col.label" :width="col.width" :formatter="col.formatter" v-bind="col" show-overflow-tooltip>
</el-table-column>
</template>
</el-table>
<el-pagination background @current-change="handleCurrentChange" :current-page="pageNum" :page-size="5" :page-sizes="[5]" layout="total, prev, pager, next, jumper" :total="pageTotal">
</el-pagination>
</div>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="saveUser">保存</el-button>
</div>
</el-dialog>
</template>
export default {
data () {
return {
// 选择人员
userTableColumns: [
{
label: '账号',
prop: 'username'
},
{
label: '角色',
prop: 'roleName'
},
{
label: '邮箱',
prop: 'email'
}
],
dialogVisible: false,
search_account: '',
user_List: [],
multipleSelection: [],
user_check_list: [],
pageNum: 1,
pageTotal: 0
}
},
mounted () {
this.getUserList()
},
methods: {
async searchModel () {
this.pageNum = 1;
await this.getUserList();
},
getUserList () {
const data = []
/* const params = {
pageNumber: this.pageNum,
pageSize: 5,
username: this.search_account
};
this.Loading = true;
await this.$ajax(apiUserList, params).then(async (res) => {
if (res.code === this.$OK) { */
const res = {
data: {
"list":[
{"pageNumber":null,"pageSize":25,"start":0,"isLimit":true,"id":271,"domainCode":"ABUP-OTA","createTime":null,"updateTime":null,"createUname":"xingquan","createRemark":null,"createUid":66,"orderField":"create_time","orderType":"desc","searchText":null,"token":null,"domainPlatform":"1","supplierUser":"","language":"cn","dataResources":[],"vehicleModelPermission":null,"username":"yi.xu4","email":"Yi.Xu4@lotuscars.com.cn","roleName":"测试角色"},{"pageNumber":null,"pageSize":25,"start":0,"isLimit":true,"id":270,"domainCode":"ABUP-OTA","createTime":null,"updateTime":null,"createUname":"xingquan","createRemark":null,"createUid":66,"orderField":"create_time","orderType":"desc","searchText":null,"token":null,"domainPlatform":"1","supplierUser":"","language":"cn","dataResources":[],"vehicleModelPermission":null,"username":"e-qiong.zheng","email":"e-qiong.zheng@geely.com","roleName":"超级管理员"},{"pageNumber":null,"pageSize":25,"start":0,"isLimit":true,"id":269,"domainCode":"ABUP-OTA","createTime":null,"updateTime":null,"createUname":"xingquan","createRemark":null,"createUid":66,"orderField":"create_time","orderType":"desc","searchText":null,"token":null,"domainPlatform":"1","supplierUser":"","language":"cn","dataResources":[],"vehicleModelPermission":null,"username":"zhangweiwei2","email":"ww18339806556@163.com","roleName":"超级管理员"},{"pageNumber":null,"pageSize":25,"start":0,"isLimit":true,"id":268,"domainCode":"ABUP-OTA","createTime":null,"updateTime":null,"createUname":"xingquan","createRemark":null,"createUid":66,"orderField":"create_time","orderType":"desc","searchText":null,"token":null,"domainPlatform":"1","supplierUser":"","language":"cn","dataResources":[],"vehicleModelPermission":null,"username":"zhangweiwei1","email":"2220605506@qq.com","roleName":"超级管理员"},{"pageNumber":null,"pageSize":25,"start":0,"isLimit":true,"id":267,"domainCode":"ABUP-OTA","createTime":null,"updateTime":null,"createUname":"xingquan","createRemark":null,"createUid":66,"orderField":"create_time","orderType":"desc","searchText":null,"token":null,"domainPlatform":"1","supplierUser":"","language":"cn","dataResources":[],"vehicleModelPermission":null,"username":"wsl1234","email":"wangshunli@abupdate.com","roleName":"测试角色"}
],
"total":161
}
}
this.user_List = await res.data.list;
this.pageTotal = res.data.total;
setTimeout(() => {
if (this.isFirst) {
this.isFirst = false
} else {
this.$refs.multipleTable.clearSelection();
}
this.setCheck();
}, 100)
/* }
this.Loading = false;
}); */
},
setCheck () {
const checkArr = this.user_check_list;
if (!checkArr) return;
if (!checkArr?.length) return;
this.user_List.map((val) => {
checkArr.map((item) => {
if (val.username == item) {
this.$refs.multipleTable.toggleRowSelection(val, true);
}
});
});
},
handleCurrentChange (val) {
this.pageNum = val;
this.getUserList();
},
singleElection (selection, row) {
this.multipleSelection = selection;
if (selection.length) {
const type = this.checke_user_type;
const arr = this.multipleSelection.map(
(val) => val.username
);
const temp = this.user_check_list.concat(arr);
this.user_check_list = [ ...new Set(temp) ];
if (
row.username != selection[selection.length - 1].username
) {
const idx = this.user_check_obj[type].indexOf(
row.username
);
this.user_check_obj[type].splice(idx, 1);
}
} else {
this.user_check_list = [];
}
},
handleClose2 (idx) {
this.user_check_list.splice(idx, 1);
const checkArr = this.user_check_list;
this.$refs.multipleTable.clearSelection();
if (!checkArr.length) return;
this.$nextTick(() => {
this.user_List.map((val) => {
checkArr.map((item) => {
if (val.username == item) {
this.$refs.multipleTable.toggleRowSelection(val, true);
}
});
});
});
},
saveUser () {
console.log(this.user_check_list)
},
}
}
网友评论