elementUI中的表格增加复选功能并进行数据回显
听闻小姐治家有方，鄙人余生愿闻其详。
首先将elementUI中的表格代码展示出来,这个样子
<el-table @sort-change='sortChange' ref="multipleTable" :row-key="getRowKeys" @selection-change="handleSelectionChange" tooltip-effect="dark" :data="tableData" stripe border style="width: 100%">
<el-table-column type="selection" :reserve-selection="true" prop="id" align="center" width="40"></el-table-column>
<el-table-column width="90" align="center" prop="id" label="id"></el-table-column>
<el-table-column align="center" width="80" prop="head" label="头像">
<template scope="scope">
<el-popover placement="right" title="" trigger="hover">
<img :src="scope.row.head" style="height: 500px;width: 500px">
<img slot="reference" :src="scope.row.head" alt="" style="max-height: 50px;max-width: 130px">
</el-popover>
</template>
</el-table-column>
<el-table-column align="center" width="180" prop="nick" label="昵称"></el-table-column>
<el-table-column align="center" width="70" prop="gender" label="性别">
<template scope="scope">
<span v-if="scope.row.gender == 1">男</span>
<span v-if="scope.row.gender == 2">女</span>
</template>
</el-table-column>
<el-table-column align="center" width="120" prop="authType" label="认证类型">
<template scope="scope">
<span v-if="scope.row.authType == 1">身份</span>
<span v-if="scope.row.authType == 2">达人</span>
</template>
</el-table-column>
<el-table-column align="center" width="100" prop="contentNumber" label="内容数"></el-table-column>
<el-table-column align="center" width="100" prop="contestNumber" label="比赛数"></el-table-column>
<!-- <el-table-column align="center" width="130" prop="influence" label="影响力"></el-table-column> -->
<el-table-column width="100" align="center" label="账户状态">
<template scope="scope">
<span type="text" v-if="scope.row.status == 0">禁用</span>
<span type="text" v-if="scope.row.status == 1">正常</span>
</template>
</el-table-column>
<el-table-column align="center" width="170" prop="registTime" label="注册时间"></el-table-column>
<el-table-column prop="k" label="操作">
<template scope="scope">
<el-button type="success" size="mini" @click="upOrForbiddenOpen(scope.row.id)" v-if="scope.row.status == 0 && user_btn_starUsing">启用</el-button>
<el-button type="danger" size="mini" @click="upOrForbidden(scope.row.id)" v-if="scope.row.status == 1 && user_btn_disabled">禁用</el-button>
<el-button type="primary" size="mini" @click="editUserBtn(scope.row.id)" v-if="scope.row.type == 1 && user_btn_edit">编辑</el-button>
<el-button type="primary" size="mini" @click="userInfo(scope.row.id)" v-if="user_btn_lookInfo">详情</el-button>
<el-button type="primary" size="mini" @click="contentListBtn('/content/contentList', scope.row.id)" v-if="user_btn_ContentList">内容列表</el-button>
<el-button type="primary" size="mini" @click="selfGameListBtn('/game/player/playerList', scope.row.id)" v-if="user_btn_gameList">比赛记录</el-button>
<el-button type="primary" size="mini" @click="setDarenBtn(scope.row.id)" v-if="scope.row.authType != 2 && scope.row.authType != 1 && user_btn_daren">指定达人</el-button>
<el-button type="primary" size="mini" @click="setShenFenBtn(scope.row.id)" v-if="scope.row.authType != 2 && scope.row.authType != 1 && user_btn_auth">指定身份</el-button>
</template>
</el-table-column>
</el-table>
要注意 el-table标签上面的这两个方法,:row-key="getRowKeys" @selection-change="handleSelectionChange" 这两个方法就是讲当前选中行的数据进行保存,当然根据后台所要数据进行过滤,
众所周知Vue中的数据绑定在data中,方法挂载在methods中,
如图:
将此方法定义到 data中会将当前行的idreturn出来,然后再methods中定义这个方法
// 复选框
handleSelectionChange(val) {
this.multipleSelection = val; // 这是一个数组 将选中的值进行重新赋值然后将里面的id进行保存
this.idss = [];
for (var i = 0 , len = this.multipleSelection ; i < len.length; i++) {
this.idss.push(len[i]['id'])
}
},
最后附上我完整的代码
<div id="userList">
<div class="title">
</div>
<div class="table">
<el-table @sort-change='sortChange' ref="multipleTable" :row-key="getRowKeys" @selection-change="handleSelectionChange" tooltip-effect="dark" :data="tableData" stripe border style="width: 100%">
<el-table-column type="selection" :reserve-selection="true" prop="id" align="center" width="40"></el-table-column>
<el-table-column width="90" align="center" prop="id" label="id"></el-table-column>
<el-table-column align="center" width="80" prop="head" label="头像">
<template scope="scope">
<el-popover placement="right" title="" trigger="hover">
<img :src="scope.row.head" style="height: 500px;width: 500px">
<img slot="reference" :src="scope.row.head" alt="" style="max-height: 50px;max-width: 130px">
</el-popover>
</template>
</el-table-column>
<el-table-column align="center" width="180" prop="nick" label="昵称"></el-table-column>
<el-table-column align="center" width="70" prop="gender" label="性别">
<template scope="scope">
<span v-if="scope.row.gender == 1">男</span>
<span v-if="scope.row.gender == 2">女</span>
</template>
</el-table-column>
<el-table-column align="center" width="120" prop="authType" label="认证类型">
<template scope="scope">
<span v-if="scope.row.authType == 1">身份</span>
<span v-if="scope.row.authType == 2">达人</span>
</template>
</el-table-column>
<el-table-column align="center" width="100" prop="contentNumber" label="内容数"></el-table-column>
<el-table-column align="center" width="100" prop="contestNumber" label="比赛数"></el-table-column>
<!-- <el-table-column align="center" width="130" prop="influence" label="影响力"></el-table-column> -->
<el-table-column width="100" align="center" label="账户状态">
<template scope="scope">
<span type="text" v-if="scope.row.status == 0">禁用</span>
<span type="text" v-if="scope.row.status == 1">正常</span>
</template>
</el-table-column>
<el-table-column align="center" width="170" prop="registTime" label="注册时间"></el-table-column>
<el-table-column prop="k" label="操作">
<template scope="scope">
<el-button type="success" size="mini" @click="upOrForbiddenOpen(scope.row.id)" v-if="scope.row.status == 0 && user_btn_starUsing">启用</el-button>
<el-button type="danger" size="mini" @click="upOrForbidden(scope.row.id)" v-if="scope.row.status == 1 && user_btn_disabled">禁用</el-button>
<el-button type="primary" size="mini" @click="editUserBtn(scope.row.id)" v-if="scope.row.type == 1 && user_btn_edit">编辑</el-button>
<el-button type="primary" size="mini" @click="userInfo(scope.row.id)" v-if="user_btn_lookInfo">详情</el-button>
<el-button type="primary" size="mini" @click="contentListBtn('/content/contentList', scope.row.id)" v-if="user_btn_ContentList">内容列表</el-button>
<el-button type="primary" size="mini" @click="selfGameListBtn('/game/player/playerList', scope.row.id)" v-if="user_btn_gameList">比赛记录</el-button>
<el-button type="primary" size="mini" @click="setDarenBtn(scope.row.id)" v-if="scope.row.authType != 2 && scope.row.authType != 1 && user_btn_daren">指定达人</el-button>
<el-button type="primary" size="mini" @click="setShenFenBtn(scope.row.id)" v-if="scope.row.authType != 2 && scope.row.authType != 1 && user_btn_auth">指定身份</el-button>
</template>
</el-table-column>
</el-table>
</div>
<!-- 框架中的分页组件 -->
<template>
<el-pagination
style="margin-top: 20px"
align="center"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pageIndex"
:page-size="pageSize"
layout="total, prev, pager, next"
:total="total">
</el-pagination>
</template>
</div>
</template>
<script>
import { userListFn, getCityDataFn, editDaysFn, executeFn, editUserSubFn, handleAddFn, upOrForbiddenOpenFn, editUserInfoFn, getUserInfoFn, putDarenFn, putShenFenDarenFn } from 'api/game/appUserList/user';
import { mapGetters } from 'vuex';
import cityData from 'api/city';
import { getToken } from "utils/auth.js";
export default {
data(){
return {
userId: undefined,
dareneitDaysVisible: false, // 达人
shenFenVisible: false, // 身份
tableData: undefined,
editUser: false, // 控制编辑显示隐藏
editDialogFormVisible: false, // 控制添加显示隐藏
editDaysVisible: false, // 控制添加显示隐藏
UserInfo: false, // 控制添加显示隐藏
prefix: {prefix: 'realNameAuthentication'},
uploadUrl: undefined,
pageIndex: 1,
pageSize: 10,
total: 0,
keyWord: undefined, // 关键字
accountLocation: undefined, // 账号所在地
status: undefined, // 状态 0封禁 1正常
timeBox: undefined, // 时间
sRegistTime: undefined, // 注册时间上限
eRegistTime: undefined, // 注册时间下限
minContentNumber: undefined, // 内容数上限
maxContentNumber: undefined, // 内容数下限
minInfluence: undefined, // 影响力上限
maxInfluence: undefined, // 影响力下限
days: undefined, // 封禁天数
ids: [], // 封禁id
idss: [], // 封禁id
statusMore: '', // 批量操作的状态
multipleSelection: [],
type: undefined,
file: undefined, // 批量导入
BtnType: undefined, // 上传按钮类型
// 添加
userName: undefined,
password: undefined,
phone: undefined,
optionsCity: cityData,
// 编辑数据回显
edit: {
userName: undefined,
// password: undefined,
phone: undefined,
gender: undefined,
nick: undefined,
idNumber: undefined,
},
fileList1: [],
fileList2: [],
selectedOptions2: undefined,
// 上传token
headers: {
Authorization: getToken()
},
userInfoTableData: undefined,
setDaren: { // 达人
userId: undefined,
authTitle: undefined,
},
imgBox: [],
shenfen: {
userId: undefined,
authTitle: undefined,
authPictureUrl: undefined,
phone: undefined,
},
getRowKeys(row) {
return row.id;
},
user_btn_add: false,
user_btn_allAdd: false,
user_btn_implement: false,
user_btn_starUsing: false,
user_btn_disabled: false,
user_btn_edit: false,
user_btn_lookInfo: false,
user_btn_ContentList: false,
user_btn_gameList: false,
user_btn_daren: false,
user_btn_auth: false,
}
},
// 页面一加载的时候
created() {
this.uploadUrl = this.defaultUploadUrl;
this.getData();
// this.getCityData();
this.user_btn_add = this.elements["user:btn_add"];
this.user_btn_allAdd = this.elements["user:btn_allAdd"];
this.user_btn_implement = this.elements["user:btn_implement"];
this.user_btn_starUsing = this.elements["user:btn_starUsing"];
this.user_btn_disabled = this.elements["user:btn_disabled"];
this.user_btn_edit = this.elements["user:btn_edit"];
this.user_btn_lookInfo = this.elements["user:btn_lookInfo"];
this.user_btn_ContentList = this.elements["user:btn_ContentList"];
this.user_btn_gameList = this.elements["user:btn_gameList"];
this.user_btn_daren = this.elements["user:btn_daren"];
this.user_btn_auth = this.elements["user:btn_auth"];
},
computed: {
...mapGetters(["elements"])
},
methods:{
getData(){ //获取回显信息
let obj = {
pageIndex: this.pageIndex,
pageSize: this.pageSize,
keyWord: this.keyWord,
sRegistTime: this.sRegistTime,
eRegistTime: this.eRegistTime,
status: this.status,
minContentNumber: this.minContentNumber,
maxContentNumber: this.maxContentNumber,
minInfluence: this.minInfluence,
maxInfluence: this.maxInfluence,
userId: this.userId
};
userListFn(obj).then(res=>{
if (res.code == 0) {
this.tableData = res.data.rows;
this.total = res.data.total;
}
})
},
// 获取城市
/* async getCityData () {
const res = await getCityDataFn();
if (res.code == 0) {
this.optionsCity = res.data;
}
}, */
// 页码发生变化的时候
handleSizeChange(val) {
this.pageIndex = val;
this.getData();
},
// 容量发生变化的时候
handleCurrentChange(val) {
this.pageIndex = val;
this.getData();
},
// 筛选的点击事件
filtrate() {
if(this.pageIndex != 1){
this.pageIndex = 1;
}else{
this.sRegistTime = undefined;
this.eRegistTime = undefined;
if (!this.timeBox || this.timeBox[0] == null || this.timeBox[1] == null) {
this.getData();
return;
};
for (var i = 0 , len = this.timeBox.join(',').split(','); i < len.length; i++) {
this.sRegistTime = this.timestampToTime(len[0]);
this.eRegistTime = this.timestampToTime(len[1]);
};
this.getData();
}
},
// 禁用按钮
upOrForbidden(id, status) {
this.days = '';
this.type = 1;
this.ids = [];
this.ids.push(id);
this.editDaysVisible = true;
},
// 禁用 弹框 确定按钮
editDaysBtn() {
var obj = undefined;
if (this.type == 1) {
obj = { ids: JSON.stringify(this.ids), days: JSON.parse(this.days), };
} else if (this.type != 1) {
obj = { ids: JSON.stringify(this.idss), days: JSON.parse(this.days), };
};
editDaysFn(obj).then(res => {
if (res.code == 0) {
this.$message.success(`修改成功`);
this.editDaysVisible = false;
this.getData();
} else {
this.$message.error(`修改失败`);
}
});
},
// 启用按钮
upOrForbiddenOpen(id) {
executeFn({ids: JSON.stringify([id])}).then(res => {
if (res.code == 0) {
this.$message.success(`修改成功`);
this.getData();
} else {
this.$message.error(`修改失败`);
}
});
},
// 批量操作 执行按钮
executeBtn() {
this.days = '';
if (this.statusMore != 0 && this.statusMore != 1) {
this.$message.info(`您还没有选要操作的状态`);
return;
};
if (this.idss.length == 0) {
this.$message.info(`您还没有选要操作的用户`);
return;
};
if (this.statusMore == 0) { // 封禁
this.editDaysVisible = true;
} else { // 启用
executeFn({ids: JSON.stringify(this.idss)}).then(res => {
if (res.code == 0) {
this.$message.success(`修改成功`);
this.getData();
} else {
this.$message.error(`修改失败`);
}
})
}
},
// 复选框
handleSelectionChange(val) {
this.multipleSelection = val;
this.idss = [];
for (var i = 0 , len = this.multipleSelection ; i < len.length; i++) {
this.idss.push(len[i]['id'])
}
},
// 子父传值 // 账号详情
userInfo(id) {
this.userInfoTableData = [];
this.UserInfo = true;
getUserInfoFn(id).then(res=>{
if (res.code == 0) {
this.userInfoTableData.push(res.data)
}
})
},
// 内容列表
contentListBtn(name, id) {
this.$router.push({
path: name,
query: {
contentListId: id
}
})
},
// 比赛列表
selfGameListBtn(name, id) {
this.$router.push({
path: name,
query:{
contestantId: id
}
});
},
// 排序
sortChange (column, prop, order) {
this.stimeState = '';
this.etimeState = '';
if (column.prop == "stime") {
if (column.order == "descending") {
this.stimeState = '0';
this.getData();
} else {
this.stimeState = '1';
this.getData();
}
} else if (column.prop == "etime") {
if (column.order == "descending") {
this.etimeState = '0';
this.getData();
} else {
this.etimeState = '1';
this.getData();
}
}
},
// 批量导入成功函数
upLoadUserSuccess(file, fileList) {
if (file.code == 0) {
this.$message({ message: '文件上传成功!', type: 'success' });
this.getData();
this.BtnType = 'primary'
} else {
this.$message.error(file.message);
this.BtnType = 'danger'
}
},
// 添加
handleAdd(){
let obj = {
userName: this.userName,
password: this.password,
phone: this.phone,
}
handleAddFn(obj).then(res => {
if (res.code == 0) {
this.getData();
this.editDialogFormVisible = false;
}
})
},
// 编辑用户
async editUserBtn(id) {
this.edit.id = id;
this.fileList1 = [];
this.fileList2 = [];
this.editUser = true;
const res = await editUserInfoFn(id);
if (res.code == 0) {
this.edit = {...res.data}
if (res.data.idFrontImg != '' && res.data.idFrontImg != null) {
this.fileList1.push({url: res.data.idFrontImg, name: res.data.idFrontImg});
}
if (res.data.idBackImg != '' && res.data.idBackImg != null) {
this.fileList2.push({url: res.data.idBackImg, name: res.data.idBackImg});
}
}
},
// 省份证正面上传成功
successOne (res, file, fileList) {
if (res.code == 0) {
this.edit.idFrontImg = res.data;
} else {
this.$message.error( res.message );
}
},
// 身份证正面删除
handleRemoveOne (file, fileList) { this.edit.idFrontImg = ''; },
// 身份证反面上传成功
successTow (response, file, fileList) {
if (response.code == 0) {
this.edit.idBackImg = response.data;
} else {
this.$message.error( response.message );
}
},
},
},
}
</script>
<style rel="stylesheet/scss" scoped>
#userList .el-upload__tip {
color: rgb(255, 0, 0);
}
#userList .editBoxFa .el-form-item {
width: 100%;
}
#userList .editBoxFa .el-upload-list__item {
width: 85%;
}
#userList .editBoxFa .uploadBox img{
vertical-align: middle;
margin-left: .2rem;
}
#userList .el-upload-list {
display: inline-block !important;
}
#userList .upload-demo, {
display: inline-block !important;
margin-left: .4rem;
}
#userList .popUp .el-form-item {
display: block;
}
#userList .box {
border-radius: 5px;
background-color: rgb(245, 245, 245);
}
#userList{
width:100%;
height:100%;
background:#fff;
box-sizing: border-box;
padding:.2rem;
}
#userList .title .el-input{
width:2rem;
margin-right:.1rem;
}
#userList .title .el-date-editor{
width:4rem;
margin-right:.1rem;
}
#userList .title .el-select{
width:2rem;
margin-right:.1rem;
}
#userList .table{
margin-top:.2rem;
}
#userList .el-form-item{
display:inline-block;
}
#userList .el-form-item__label{
width:auto;
}
/* // 分页样式 */
.el-pagination {
text-align: center;
margin-top: 20px;
}
</style>
在最后加上我QQ,不明白的可以问我: 2489757828
我的私人博客李大玄的博客
至所有的前端开发 共勉!!!
