网站备案上传照片几寸,实验室网站建设意义,手把手网站开发,动物摄影网站一、vueelementui实现下拉表格多选搜索1.0
二、vueelementui实现下拉表格多选搜索分页回显全选2.0
在1.0的基础上#xff0c;终于可以实现在下拉框表格分页的前提下不同页码的回显辣#xff0c;分页是前端来分页的#xff08;代码略乱且没有封装还很长#xff0c;随便看看…一、vueelementui实现下拉表格多选搜索1.0
二、vueelementui实现下拉表格多选搜索分页回显全选2.0
在1.0的基础上终于可以实现在下拉框表格分页的前提下不同页码的回显辣分页是前端来分页的代码略乱且没有封装还很长随便看看吧 1、在使用之前首先要安装Element-ui
1-1、template
templatediv classgoodsindexdiv classallBox v-loadingisloadingel-selectidequBoxrefselectclearablemultiplev-modelgroup.equIdListplaceholder请选择设备changehandleEquIdclick.nativedeptogglePanel($event)el-optionv-for(item, i) in group.pageAllList:keyi:labelitem.equNumber:valueitem.equId/el-option/el-selectdivv-ifgroup.showTreeclasstreeDividtreeDivreftableList:style{ top: group.equBoxTop px }div classequSElectel-inputv-modelgroup.nameclearablesizeministylemargin-right: 15px; width: 50%placeholder设备编码/名称keyup.enter.nativeselect/el-inputel-button typeprimary sizemini clickselect搜索/el-button/div!-- 检索结果 --el-table:datagroup.pageListbordersizeministylemargin: 10px 0refmultipleTableidmultipleTablerow-keyequIdrow-clickhandleRegionNodeClickselecthandleCheckBoxselect-allhandleSelectAllselection-changeselectionChangeHandleel-table-columntypeselectionheader-aligncenteraligncenterwidth50/el-table-columnel-table-columnpropequNumberheader-aligncenteraligncenterlabel设备编码min-width180/el-table-columnel-table-columnpropequNameheader-aligncenteraligncenterlabel设备名称min-width180/el-table-column/el-table!-- 分页 --el-paginationbackgroundsize-changehandleSizeChangecurrent-changehandleCurrentChange:current-pagegroup.currentPage:page-sizegroup.pageSizelayouttotal, prev, pager, next:totalgroup.totalPage/el-pagination/div/div/div
/template1-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;},},
};
/script1-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;
}
/style2、完结撒花后期我一定会封装的 立个flag
