当前位置：首页 > news >正文

vue+elementui实现下拉表格多选+搜索+分页+回显+全选2.0

news 2025/7/8 20:55:36

一、vue+elementui实现下拉表格多选+搜索1.0

二、vue+elementui实现下拉表格多选+搜索+分页+回显+全选2.0

在1.0的基础上，终于可以实现在下拉框表格分页的前提下不同页码的回显辣，分页是前端来分页的（代码略乱且没有封装还很长，随便看看吧）

在这里插入图片描述

1、在使用之前首先要安装Element-ui

1-1、template

<template><div class="goodsindex"><div class="allBox" v-loading="isloading"><el-selectid="equBox"ref="select"clearablemultiplev-model="group.equIdList"placeholder="请选择设备"@change="handleEquId"@click.native="deptogglePanel($event)"><el-optionv-for="(item, i) in group.pageAllList":key="i":label="item.equNumber":value="item.equId"></el-option></el-select><divv-if="group.showTree"class="treeDiv"id="treeDiv"ref="tableList":style="{ top: group.equBoxTop + 'px' }"><div class="equSElect"><el-inputv-model="group.name"clearablesize="mini"style="margin-right: 15px; width: 50%"placeholder="设备编码/名称"@keyup.enter.native="select"></el-input><el-button type="primary" size="mini" @click="select">搜索</el-button></div><!-- 检索结果 --><el-table:data="group.pageList"bordersize="mini"style="margin: 10px 0"ref="multipleTable"id="multipleTable"row-key="equId"@row-click="handleRegionNodeClick"@select="handleCheckBox"@select-all="handleSelectAll"@selection-change="selectionChangeHandle"><el-table-columntype="selection"header-align="center"align="center"width="50"></el-table-column><el-table-columnprop="equNumber"header-align="center"align="center"label="设备编码"min-width="180"></el-table-column><el-table-columnprop="equName"header-align="center"align="center"label="设备名称"min-width="180"></el-table-column></el-table><!-- 分页 --><el-paginationbackground@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="group.currentPage":page-size="group.pageSize"layout="total, prev, pager, next":total="group.totalPage"></el-pagination></div></div></div>
</template>

1-2、script

export default {data() {return {isShowSelect: true, //隐藏select本来的下拉框group: {name: "",// 搜索pageAllList: [], // 下拉框数据pageList: [], // 表格数据showTree: false, // 表格显示隐藏isbg: false, //整体背景equIdList: [],// 下拉框选中数据multipleSelection: [], // 表格选中数据equBoxTop: 46,// 表格原始定位topcurrentPage: 1,pageSize: 8, totalPage: 0,},};},computed: {},watch: {isShowSelect(val) {// 隐藏select自带的下拉框this.$refs.select.blur();},},async created() {await this.getSelectList();await this.getDataList();await this.getPage(this.equIdList);},methods: {//下面的方法是进行设置行标识key的方法getRowKeys(row) {return row.equId;},//设备handleEquId(val) {this.group.multipleSelection = val;this.getDataList();},// 分页handleSizeChange(val) {this.group.pageSize = val;this.getDataList();},// 分页handleCurrentChange(val) {this.group.currentPage = val;this.getDataList();},//搜素select() {this.group.currentPage = 1;this.getDataList();},// 设备下拉选获取选中页数 回显的时候计算出第一条数据在那一页async getPage(equInfoIds) {let equId = equInfoIds;let pageIndex = 0;let pageIndexArr = [];for (let i in this.group.pageAllList) {for (let j in equId) {if (equId[j] == this.group.pageAllList[i].equId) {pageIndex = Math.floor(i / this.group.pageSize) + 1;if (i == 0) {pageIndex = 1; // 如果是第一条数据，它在第一页}pageIndexArr.push(pageIndex);}}}const uniqueArr = Array.from(new Set(pageIndexArr));this.group.currentPage = uniqueArr[0];// console.log("那一页", uniqueArr);await this.getDataList();},//获取表格列表async getDataList() {this.isloading = true;await this.Sevice({url: "/select",method: "post",params: {name: this.group.name,},}).then((res) => {if (res && res.code == 200) {// res.select的数据类型 [{equId:1,equNumber:2,equName:3}]this.group.pageList = res.select;this.group.pageList = this.group.pageList.slice((this.group.currentPage - 1) * this.group.pageSize,this.group.currentPage * this.group.pageSize);this.group.totalPage = res.select.length;this.$nextTick(() => {if (this.$refs.multipleTable) {this.group.pageList.forEach((item, index) => {if (this.group.multipleSelection.findIndex((v) => v == item.equId) >= 0) {this.$refs.multipleTable.toggleRowSelection(this.$refs.multipleTable.data[index],true);}});}});// console.log("multipleSelection", this.multipleSelection);} else {this.group.pageList = [];this.group.totalPage = 0;}}).catch((err) => {console.log(err);});this.isloading = false;},// 下拉框列表（因为有接口有搜索，所以下拉框和表格分两个接口获取）async getSelectList() {this.isloading = true;await this.Sevice({url: "/select",method: "post",}).then((res) => {if (res && res.code == 200) {// res.select的数据类型 [{equId:1,equNumber:2,equName:3}]this.group.pageAllList = res.select;}}).catch((err) => {console.log(err);});this.isloading = false;},// 多选selectionChangeHandle(val) {this.showTree = true;},//该方法是单选时的方法handleCheckBox(rows, row) {this.showTree = true;if (this.group.multipleSelection.find((item) => item == row.equId)) {//下面这个filter方法就是删除的方法this.group.multipleSelection = this.group.multipleSelection.filter((item) => item != row.equId);} else {this.group.multipleSelection.push(row.equId);}// console.log("选中id2:", this.group.multipleSelection);this.group.equIdList = this.group.multipleSelection;},//该方法是当页全选的方法handleSelectAll(rows) {this.showTree = true;if (rows.length) {rows.forEach((row) => {if (!this.group.multipleSelection.find((item) => item == row.equId)) {this.group.multipleSelection.push(row.equId);}});} else {this.group.pageList.forEach((row) => {this.group.multipleSelection = this.group.multipleSelection.filter((item) => item != row.equId);});}// console.log("选中id1:", this.group.multipleSelection);this.group.equIdList = this.group.multipleSelection;},// 点击input 阻止冒泡 控制table显示隐藏async deptogglePanel(event) {// console.log(event);this.group.isbg = true;this.isShowSelect = !this.isShowSelect; //隐藏select本来的下拉框event || (event = window.event);event.stopPropagation? await event.stopPropagation(): (event.cancelBubble = true);this.group.showTree ? await this.tableHide() : await this.tableShow();await this.getDataList();},//隐藏表格async tableHide() {this.group.showTree = false;await document.addEventListener("click", this.tableHideList, false);},//显示表格async tableShow() {this.group.showTree = true;await document.addEventListener("click", this.tableHideList, false);this.$nextTick(() => {let equBox = document.getElementById("equBox").offsetHeight;this.group.equBoxTop = equBox + 10; // 表格的高度定位，应该按照所选择的});},async tableHideList(e) {let that = this;that.$nextTick(async () => {let multipleTable = document.getElementById("treeDiv");if (multipleTable && !multipleTable.contains(e.target)) {await that.tableHide();}});},// 点击table节点async handleRegionNodeClick() {this.showTree = true;},},
};
</script>

1-3、style

<style scoped>
.allBox {position: relative;width: 100%;
}
.equSElect {display: flex;
}
.treeDiv {position: absolute;top: 46px;z-index: 9999999 !important;width: calc(100% - 20px);overflow: auto;max-height: 390px;border-radius: 6px;background: #ffffff;padding: 8px 10px;box-shadow: 0 5px 5px #cccbcb;border: 1px solid #e6e5e5;margin: 0 10px;
}.treeDiv::-webkit-scrollbar {/*滚动条整体样式*/width: 4px;/*高宽分别对应横竖滚动条的尺寸*/height: 4px;
}.treeDiv::-webkit-scrollbar-thumb {/*滚动条里面小方块*/border-radius: 5px;-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);background: rgba(0, 0, 0, 0.2);
}.treeDiv::-webkit-scrollbar-track {/*滚动条里面轨道*/-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);border-radius: 0;background: rgba(0, 0, 0, 0.1);
}.treeDiv .el-table {font-size: 14px;
}.treeDiv .el-table /deep/ td {padding: 4px 0;
}
</style>