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

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

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

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

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

1-1、template

1. <template>
2.   <div class="goodsindex">
3.     <div class="allBox" v-loading="isloading">
4.       <el-select
5.         id="equBox"
6.         ref="select"
7.         clearable
8.         multiple
9.         v-model="group.equIdList"
10.         placeholder="请选择设备"
11.         @change="handleEquId"
12.         @click.native="deptogglePanel($event)"
13.       >
14.         <el-option
15.           v-for="(item, i) in group.pageAllList"
16.           :key="i"
17.           :label="item.equNumber"
18.           :value="item.equId"
19.         ></el-option>
20.       </el-select>
21.       <div
22.         v-if="group.showTree"
23.         class="treeDiv"
24.         id="treeDiv"
25.         ref="tableList"
26.         :style="{ top: group.equBoxTop + 'px' }"
27.       >
28.         <div class="equSElect">
29.           <el-input
30.             v-model="group.name"
31.             clearable
32.             size="mini"
33.             style="margin-right: 15px; width: 50%"
34.             placeholder="设备编码/名称"
35.             @keyup.enter.native="select"
36.           ></el-input>
37.           <el-button type="primary" size="mini" @click="select">搜索</el-button>
38.         </div>
39.         <!-- 检索结果 -->
40.         <el-table
41.           :data="group.pageList"
42.           border
43.           size="mini"
44.           style="margin: 10px 0"
45.           ref="multipleTable"
46.           id="multipleTable"
47.           row-key="equId"
48.           @row-click="handleRegionNodeClick"
49.           @select="handleCheckBox"
50.           @select-all="handleSelectAll"
51.           @selection-change="selectionChangeHandle"
52.         >
53.           <el-table-column
54.             type="selection"
55.             header-align="center"
56.             align="center"
57.             width="50"
58.           >
59.           </el-table-column>
60.           <el-table-column
61.             prop="equNumber"
62.             header-align="center"
63.             align="center"
64.             label="设备编码"
65.             min-width="180"
66.           >
67.           </el-table-column>
68.           <el-table-column
69.             prop="equName"
70.             header-align="center"
71.             align="center"
72.             label="设备名称"
73.             min-width="180"
74.           >
75.           </el-table-column>
76.         </el-table>
77.         <!-- 分页 -->
78.         <el-pagination
79.           background
80.           @size-change="handleSizeChange"
81.           @current-change="handleCurrentChange"
82.           :current-page="group.currentPage"
83.           :page-size="group.pageSize"
84.           layout="total, prev, pager, next"
85.           :total="group.totalPage"
86.         >
87.         </el-pagination>
88.       </div>
89.     </div>
90.   </div>
91. </template>

复制代码

1-2、script

1. export default {
2.   data() {
3.     return {
4.       isShowSelect: true, //隐藏select本来的下拉框
5.       group: {
6.         name: "",// 搜索
7.         pageAllList: [], // 下拉框数据
8.         pageList: [], // 表格数据
9.         showTree: false, // 表格显示隐藏
10.         isbg: false, //整体背景
11.         equIdList: [],// 下拉框选中数据
12.         multipleSelection: [], // 表格选中数据
13.         equBoxTop: 46,// 表格原始定位top
14.         currentPage: 1,
15.         pageSize: 8,
16.         totalPage: 0,
17.       },
18.     };
19.   },
20.   computed: {},
21.   watch: {
22.     isShowSelect(val) {
23.       // 隐藏select自带的下拉框
24.       this.$refs.select.blur();
25.     },
26.   },
27. async created() {
28.    await this.getSelectList();
29.    await this.getDataList();
30.    await this.getPage(this.equIdList);
31.   },
32.   methods: {
33.     //下面的方法是进行设置行标识key的方法
34.     getRowKeys(row) {
35.       return row.equId;
36.     },
37.     //设备
38.     handleEquId(val) {
39.       this.group.multipleSelection = val;
40.       this.getDataList();
41.     },
42.     // 分页
43.     handleSizeChange(val) {
44.       this.group.pageSize = val;
45.       this.getDataList();
46.     },
47.     // 分页
48.     handleCurrentChange(val) {
49.       this.group.currentPage = val;
50.       this.getDataList();
51.     },
52.     //搜素
53.     select() {
54.       this.group.currentPage = 1;
55.       this.getDataList();
56.     },
57.     // 设备下拉选获取选中页数 回显的时候计算出第一条数据在那一页
58.     async getPage(equInfoIds) {
59.       let equId = equInfoIds;
60.       let pageIndex = 0;
61.       let pageIndexArr = [];
62.       for (let i in this.group.pageAllList) {
63.         for (let j in equId) {
64.           if (equId[j] == this.group.pageAllList[i].equId) {
65.             pageIndex = Math.floor(i / this.group.pageSize) + 1;
66.             if (i == 0) {
67.               pageIndex = 1; // 如果是第一条数据，它在第一页
68.             }
69.             pageIndexArr.push(pageIndex);
70.           }
71.         }
72.       }
73.       const uniqueArr = Array.from(new Set(pageIndexArr));
74.       this.group.currentPage = uniqueArr[0];
75.       // console.log("那一页", uniqueArr);
76.       await this.getDataList();
77.     },
78.     //获取表格列表
79.     async getDataList() {
80.       this.isloading = true;
81.       await this.Sevice({
82.         url: "/select",
83.         method: "post",
84.         params: {
85.           name: this.group.name,
86.         },
87.       })
88.         .then((res) => {
89.           if (res && res.code == 200) {
90.           // res.select的数据类型 [{equId:1,equNumber:2,equName:3}]
91.             this.group.pageList = res.select;
92.             this.group.pageList = this.group.pageList.slice(
93.               (this.group.currentPage - 1) * this.group.pageSize,
94.               this.group.currentPage * this.group.pageSize
95.             );
96.             this.group.totalPage = res.select.length;
97.             this.$nextTick(() => {
98.               if (this.$refs.multipleTable) {
99.                 this.group.pageList.forEach((item, index) => {
100.                   if (
101.                     this.group.multipleSelection.findIndex(
102.                       (v) => v == item.equId
103.                     ) >= 0
104.                   ) {
105.                     this.$refs.multipleTable.toggleRowSelection(
106.                       this.$refs.multipleTable.data[index],
107.                       true
108.                     );
109.                   }
110.                 });
111.               }
112.             });
113.             // console.log("multipleSelection", this.multipleSelection);
114.           } else {
115.             this.group.pageList = [];
116.             this.group.totalPage = 0;
117.           }
118.         })
119.         .catch((err) => {
120.           console.log(err);
121.         });
122.       this.isloading = false;
123.     },
124.     // 下拉框列表（因为有接口有搜索，所以下拉框和表格分两个接口获取）
125.     async getSelectList() {
126.       this.isloading = true;
127.       await this.Sevice({
128.         url: "/select",
129.         method: "post",
130.       })
131.         .then((res) => {
132.           if (res && res.code == 200) {
133.           // res.select的数据类型 [{equId:1,equNumber:2,equName:3}]
134.             this.group.pageAllList = res.select;
135.           }
136.         })
137.         .catch((err) => {
138.           console.log(err);
139.         });
140.       this.isloading = false;
141.     },
142.     // 多选
143.     selectionChangeHandle(val) {
144.       this.showTree = true;
145.     },
146.     //该方法是单选时的方法
147.     handleCheckBox(rows, row) {
148.       this.showTree = true;
149.       if (this.group.multipleSelection.find((item) => item == row.equId)) {
150.         //下面这个filter方法就是删除的方法
151.         this.group.multipleSelection = this.group.multipleSelection.filter(
152.           (item) => item != row.equId
153.         );
154.       } else {
155.         this.group.multipleSelection.push(row.equId);
156.       }
157.       // console.log("选中id2:", this.group.multipleSelection);
158.       this.group.equIdList = this.group.multipleSelection;
159.     },
160.     //该方法是当页全选的方法
161.     handleSelectAll(rows) {
162.       this.showTree = true;
163.       if (rows.length) {
164.         rows.forEach((row) => {
165.           if (!this.group.multipleSelection.find((item) => item == row.equId)) {
166.             this.group.multipleSelection.push(row.equId);
167.           }
168.         });
169.       } else {
170.         this.group.pageList.forEach((row) => {
171.           this.group.multipleSelection = this.group.multipleSelection.filter(
172.             (item) => item != row.equId
173.           );
174.         });
175.       }
176.       // console.log("选中id1:", this.group.multipleSelection);
177.       this.group.equIdList = this.group.multipleSelection;
178.     },
179.     // 点击input 阻止冒泡 控制table显示隐藏
180.     async deptogglePanel(event) {
181.       // console.log(event);
182.       this.group.isbg = true;
183.       this.isShowSelect = !this.isShowSelect; //隐藏select本来的下拉框
184.       event || (event = window.event);
185.       event.stopPropagation
186.         ? await event.stopPropagation()
187.         : (event.cancelBubble = true);
188.       this.group.showTree ? await this.tableHide() : await this.tableShow();
189.       await this.getDataList();
190.     },
191.     //隐藏表格
192.     async tableHide() {
193.       this.group.showTree = false;
194.       await document.addEventListener("click", this.tableHideList, false);
195.     },
196.     //显示表格
197.     async tableShow() {
198.       this.group.showTree = true;
199.       await document.addEventListener("click", this.tableHideList, false);
200.       this.$nextTick(() => {
201.         let equBox = document.getElementById("equBox").offsetHeight;
202.         this.group.equBoxTop = equBox + 10; // 表格的高度定位，应该按照所选择的
203.       });
204.     },
205.     async tableHideList(e) {
206.       let that = this;
207.       that.$nextTick(async () => {
208.         let multipleTable = document.getElementById("treeDiv");
209.         if (multipleTable && !multipleTable.contains(e.target)) {
210.           await that.tableHide();
211.         }
212.       });
213.     },
214.     // 点击table节点
215.     async handleRegionNodeClick() {
216.       this.showTree = true;
217.     },
218.   },
219. };
220. </script>

复制代码

1-3、style

1. <style scoped>
2. .allBox {
3.   position: relative;
4.   width: 100%;
5. }
6. .equSElect {
7.   display: flex;
8. }
9. .treeDiv {
10.   position: absolute;
11.   top: 46px;
12.   z-index: 9999999 !important;
13.   width: calc(100% - 20px);
14.   overflow: auto;
15.   max-height: 390px;
16.   border-radius: 6px;
17.   background: #ffffff;
18.   padding: 8px 10px;
19.   box-shadow: 0 5px 5px #cccbcb;
20.   border: 1px solid #e6e5e5;
21.   margin: 0 10px;
22. }
24. .treeDiv::-webkit-scrollbar {
25.   /*滚动条整体样式*/
26.   width: 4px;
27.   /*高宽分别对应横竖滚动条的尺寸*/
28.   height: 4px;
29. }
31. .treeDiv::-webkit-scrollbar-thumb {
32.   /*滚动条里面小方块*/
33.   border-radius: 5px;
34.   -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
35.   background: rgba(0, 0, 0, 0.2);
36. }
38. .treeDiv::-webkit-scrollbar-track {
39.   /*滚动条里面轨道*/
40.   -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
41.   border-radius: 0;
42.   background: rgba(0, 0, 0, 0.1);
43. }
45. .treeDiv .el-table {
46.   font-size: 14px;
47. }
49. .treeDiv .el-table /deep/ td {
50.   padding: 4px 0;
51. }
52. </style>

复制代码

2、完结撒花（后期我一定会封装的 立个flag）

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。