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

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

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

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

1-1、template

<template>
  <div class="goodsindex">
    <div class="allBox" v-loading="isloading">
      <el-select
        id="equBox"
        ref="select"
        clearable
        multiple
        v-model="group.equIdList"
        placeholder="请选择设备"
        @change="handleEquId"
        @click.native="deptogglePanel($event)"
      >
        <el-option
          v-for="(item, i) in group.pageAllList"
          :key="i"
          :label="item.equNumber"
          :value="item.equId"
        ></el-option>
      </el-select>
      <div
        v-if="group.showTree"
        class="treeDiv"
        id="treeDiv"
        ref="tableList"
        :style="{ top: group.equBoxTop + 'px' }"
      >
        <div class="equSElect">
          <el-input
            v-model="group.name"
            clearable
            size="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"
          border
          size="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-column
            type="selection"
            header-align="center"
            align="center"
            width="50"
          >
          </el-table-column>
          <el-table-column
            prop="equNumber"
            header-align="center"
            align="center"
            label="设备编码"
            min-width="180"
          >
          </el-table-column>
          <el-table-column
            prop="equName"
            header-align="center"
            align="center"
            label="设备名称"
            min-width="180"
          >
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          background
          @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,// 表格原始定位top
        currentPage: 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>

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