文章来源地址https://www.toymoban.com/news/detail-607689.html
<template>
<div>
<plan title="账号列表">
<!-- @selection-change="handleSelectionChange"添加这个属性就是点击可以得到你想要的value值 -->
<el-table
style="width: 100%"
:data="list"
@selection-change="handleSelectionChange"
ref="table"
>
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column label="日期" width="120">
<template slot-scope="scope">{{ scope.row.ctime |dataFormat}}</template>
</el-table-column>
<el-table-column prop="account" label="账号" width="120"></el-table-column>
<el-table-column label="管理员" prop="userGroup"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button size="mini" @click="edit(scope.row)">编辑</el-button>
<el-button size="mini" type="danger" @click="deletes(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<div style="margin-top: 20px">
<el-button @click="alldel">批量删除</el-button>
<el-button @click="toggleSelection()">取消选择</el-button>
</div>
<el-pagination
:current-page="pageinfo.currentPage4"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:page-sizes="[10, 20, 30, 40]"
:page-size.sync="pageinfo.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
></el-pagination>
<!-- 弹出框 -->
<el-dialog title="修改用户信息" :visible.sync="isshow" width="30%">
<el-form ref="form" label-width="80px" size="mini" :model="listone">
<el-form-item label="账号" prop="account">
<el-input v-model="listone.account"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="isshow = false">取 消</el-button>
<el-button type="primary" @click="sumit">确 定</el-button>
</span>
</el-dialog>
</plan>
</div>
</template>
<script>
import {
usersList,
usersEditApi,
usersBatchdelApi,
usedel
} from "@/api/account.api";
export default {
data() {
return {
pageinfo: {
currentPage: 1,
pageSize: 5
},
ruleForm: {
account: "",
password: "",
userGroup: ""
},
list: [],
listone: {},
total: 0,
isshow: false,
ids: [],
id: ""
};
},
created() {
this.getinfo();
},
methods: {
// 批量删除
handleSelectionChange(val) {
this.ids = val.map(item => item.id);
},
alldel() {
usersBatchdelApi(this.ids).then(res => {
console.log(res);
this.getinfo();
});
},
// 获取用户信息
async getinfo() {
const res = await usersList(this.pageinfo);
this.total = Number(res.data.total);
this.list = res.data.data;
},
// 编辑
edit(val) {
this.listone = { ...val };
this.isshow = true;
},
// 删除
deletes(val) {
this.id = val.id;
usedel(this.id).then(res => {
console.log(res);
this.getinfo();
});
},
toggleSelection() {
this.$refs.table.clearSelection();
},
sumit() {
usersEditApi(this.listone).then(res => {
if (res.data.code === 0) {
this.isshow = false;
this.getinfo();
}
});
},
handleSizeChange(val) {
this.pageinfo.pageSize = val;
this.getinfo();
},
handleCurrentChange(val) {
this.pageinfo.currentPage = val;
this.getinfo();
}
}
};
</script>
<style lang="scss" scoped>
</style>
文章来源:https://www.toymoban.com/news/detail-607689.html
到了这里,关于账号列表的删除编辑提交的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!