使用element-穿梭框分页加搜索框实现

2025-01-14 约 442 字预计阅读 1 分钟

https://bing.ee123.net/img/rand?artid=117019480

使用element 穿梭框分页加搜索框实现

背景：根据类目选择面料，因为面料太多，故而在页面分页

  <el-transfer
                  v-model="fabricVOS"
                  :props="{
                    key:'fabricNo',
                    value:'fabricNo'
                  }"
                  :data="fabricList"
                  style="justify-content:flex-start;"
                >
                  <el-pagination
                    slot="left-footer"
                    :current-page="listQuery.current"
                    :page-size="listQuery.size"
                    :total="listQuery.total"
                    :pager-count="5"
                    small
                    align="right"
                    layout="prev, pager, next"
                    @current-change="handleCurrentChange"
                  ></el-pagination>
 </el-transfer>

关于分页的时候选择其他页面，目标数据丢失的问题，我的解决方法是

新增的时候：

在每一次分页的时候把目标源的数据塞到数据源

    if (this.fabricVOS.length > 0) {
          this.fabricVOS.map(item => {
            this.fabricList.push({ fabricNo: item })
          })
        }

这样即使切换页面，目标源的数据也不会丢失

编辑的时候

后端把已选中的数据塞到返回来的每一页的数据了

搜索框

 <el-input v-model="searchValue" style="margin-bottom: 10px;width: 200px" ></el-input>
 <el-button type="primary" size="small" style="margin-left: 10px" @click="handleChange">搜索</el-button>
 <el-button type="plain" size="small" @click="restValue">重置</el-button>

搜索我是本地搜索

    handleChange() {
      const value = this.searchValue
      const list = this.mianliaoList.filter(item => {       //获取全部数据遍历
        return item.fabricNo.indexOf(value) != -1
      })
      let lastList = []

      if (this.fabricVOS.length > 0) {     //目标源数据
        const fabricList = []
        this.fabricVOS.map(item => {
          fabricList.push({ fabricNo: item })   //数据源数据塞入目标源的数据
        })
        lastList = list.concat(fabricList)    //数据拼接
      } else {
        lastList = list
      }
      this.$nextTick(() => {
        this.listQuery.total = lastList.length     //修改分页的总数据
        this.fabricList = lastList
      })
    },

目录

使用element-穿梭框分页加搜索框实现

使用element 穿梭框分页加搜索框实现