vue 后台管理系统调接口，分页，列表查询

最新推荐文章于 2023-08-12 15:37:23 发布

小白学前端

最新推荐文章于 2023-08-12 15:37:23 发布

阅读量1k

点赞数 1

文章标签： html jquery 1024程序员节

本文链接：https://blog.csdn.net/m0_49124907/article/details/109257913

版权

这是一个使用Vue.js编写的组件，展示了一个黑名单列表管理界面，包括公司名称、用户名、电话等信息的查询和筛选功能，以及恢复和彻底删除的操作。列表支持分页展示，每页显示数量可调整，并且监听参数变化实时刷新数据。

摘要由CSDN通过智能技术生成

逻辑代码

<template>
	<div class="app-container">
		<div class="power-list">
			<div class="power-list-top">
				<div class="power-list-top-left">黑名单列表</div>
				<div class="power-list-top-right">
					<div class="power-list-top-right-select">
						<el-input size="medium" placeholder="按公司名称查询" suffix-icon="el-icon-search" v-model="params.companyName">
						</el-input>
					</div>
					<div class="power-list-top-right-select">
						<el-input size="medium" placeholder="按用户名称查询" suffix-icon="el-icon-search" v-model="params.userName">
						</el-input>
					</div>
					<div class="power-list-top-right-select">
						<el-select v-model="params.roleType" placeholder="选择角色" size="medium">
							<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
					</div>
				</div>
			</div>
			<div class="power-list-bottom">
				<el-table :data="tableData" style="width: 100%">
					<el-table-column prop="xuhao" label="序号" width="80" type="index">
					</el-table-column>
					<el-table-column prop="companyName" label="公司名称" show-overflow-tooltip>
					</el-table-column>
					<el-table-column prop="userName" label="用户名" show-overflow-tooltip>
					</el-table-column>
					<el-table-column prop="realName" label="姓名" show-overflow-tooltip>
					</el-table-column>
					<el-table-column prop="phone" label="电话" show-overflow-tooltip>
					</el-table-column>
					<el-table-column prop="role" label="角色" show-overflow-tooltip>
					</el-table-column>
					<el-table-column label="操作" width="160">
						<template slot-scope="scope">
							<el-button type="text" size="small" class="modify-btn">恢复</el-button>
							<el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="text" size="small" class="del-btn">
								彻底删除
							</el-button>
						</template>
					</el-table-column>
					<el-table-column prop="remark" label="备注" show-overflow-tooltip>
					</el-table-column>
				</el-table>
			</div>
			// 分页
			<div class="page-box">
				<!-- <el-pagination
					@current-change="handleCurrentChange"
					:current-page="page.currPage"
					layout="total, sizes, prev, pager, next, jumper"
					:total="page.totalCount">
				</el-pagination> -->
					<el-pagination background layout="prev, pager, next" @current-change="handleCurrentChange" :current-page="page.currPage" :total="page.totalCount" :page-size="10">
				</el-pagination>
			</div>
		</div>
	</div>
</template>

逻辑代码

script>
	// api接口引入进去的 
	import { blackAccountList } from "@/api/yonghuguanli"
	export default {
		data() {
			return {
				page: {
					pageSize: 2,
					totalCount: 14,
					totalPage: 7,
					currPage: 1,
					page: 1
				},
				params: {
					companyName: '',
					userName: '',
					roleType: ''
				},
				options: [{
					value: '选项1',
					label: '公章员'
				}, {
					value: '选项2',
					label: '业务员'
				}, {
					value: '选项3',
					label: '审核员'
				}],
				input3:'',
				input2:'',
				value: '',
				 tableData: [{
					companyName:'',
					delete:'',
					endTime:'',
					keyword:'',
				}],
			}
		},

		methods: {
			handleCurrentChange(nowPage){
				this.page.currPage = nowPage;
				this.page.page = nowPage;
				this.blackAccountList();
			},
			deleteRow(index, rows) {
				rows.splice(index, 1);
			},
			blackAccountList(){
				const params = Object.assign(this.page,this.params)
				blackAccountList(params).then(res=>{
					this.tableData = res.data.list;
					this.page = Object.assign(this.page, res.data)
				})
			}
		},
		created(){
			this.blackAccountList()
		},
		watch: {
			params: {
				deep: true,
				handler(value){
					this.blackAccountList();
				}
			}
		}
	}
</script>