elementui穿梭框支持搜索分页功能

一、DOM结构

<el-input class="transfer_input" placeholder="请输入内容" v-model="knowledgeQuery.name" clearable @change="filterKonwledgeFn"> </el-input>
<el-transfer v-model="knowledgeIds" :titles="['选择知识点', '已选择知识点']" :button-texts="['移除', '添加']" :data="knowledgeData" @change="handleKnowledgeChange">
    <div class="transfer-footer" slot="left-footer">
        <el-pagination :pager-count="3" @size-change="transferSizeChange" @current-change="transferCurrentChange" :current-page="transferCurrentPage" :page-sizes="[10, 20, 50, 100]" :page-size="transferPageSize" layout=" sizes, prev, pager, next" :total="transferTotal"> </el-pagination>
     </div>
</el-transfer>

二、data数据

data () {
    return {
        knowledgeQuery: { // 数据传参列表
            cursor: 1,
            limit: 10,
            searchCount: true,
            name: ''
        },
        knowledgeIds: [],// 穿梭框选中项组成的数组
        knowledgeData: [], // 穿梭框要绑定的数据
        preKnowledgeData: [], // 上一页的穿梭框数据源
        transferCurrentPage: 1, //穿梭框分页当前页
        transferPageSize: 10,//穿梭框分页当前pagesize
        transferTotal: 0, //分页数据总数
    }
} 

三、methods

// 获取目前已选中的穿梭框选像id用于回显
  getKnowledges (cid) {
      getKnowledges(cid).then(res => {
        const _this = this
        this.knowledges = res.result
        this.knowledges.forEach(e => {
          _this.knowledgeIds.push(e.id)
        })
      })
    },
// 获取分页展示的数据
    getKnowledgesFn () {
      getKnowledgesByPage(this.knowledgeQuery).then(res => { // 获取所有的穿梭框展示数据
        console.log('res章节列表', res)
        this.transferTotal = res.result.total
        this.dialogKnowledgeVisible = true
        this.preKnowledgeData = [...this.knowledgeData]
        // 将数据转成穿梭框要求的格式并去重
        this.knowledgeData = res.result.records.map((item, index) => {
          return {
            key: item.id,
            label: item.name
          }
        }).filter((item, index, self) => {
          return self.findIndex(el => el.key == item.key) === index
        })
        // console.log(' this.knowledgeData', this.knowledgeData)
        this.getChooseDataFn()
      })
    },
    // pageSize 改变
    transferSizeChange (size) {
      this.knowledgeQuery.limit = size
      this.getKnowledgesFn()
    },
    // currentPage 改变时
    transferCurrentChange (page) {
      this.knowledgeQuery.cursor = page
      this.transferCurrentPage = page
      this.getKnowledgesFn()
    },
    // 获取到选中的穿梭数据,将选中的数据添加到分页展示的数据中
    getChooseDataFn () {
      this.knowledgeData = this.knowledgeData.filter(item => {
        return !this.knowledgeIds.includes(item.key)
      })
      // console.log('knowledgeIds_55', this.knowledgeIds)
      // knowledgeIds 存着选中的选项id
      const pushArrVal = this.preKnowledgeData.filter((item, index, self) => {
        return this.knowledgeIds.includes(item.key)
      })
      // console.log('pushArrVal', pushArrVal)
      this.knowledgeData.push(...pushArrVal)
      // console.log('this.knowledgeData——888', this.knowledgeData) //  获取到了已经选过得数据
      // console.log(' this.preKnowledgeData', this.preKnowledgeData)
    },
    // 穿梭框添加操作
    handleKnowledgeChange (value, direction, movedKeys) {
      this.knowledges = []
      for (let i = 0; i < value.length; i++) {
        this.knowledgeIds[i] = value[i]
        for (let j = 0; j < this.knowledgeData.length; j++) {
          if (this.knowledgeData[j].key == value[i]) {
            this.knowledges.push({
              id: this.knowledgeData[j].key,
              name: this.knowledgeData[j].label,
              category: this.knowledgeData[j].category

            })
          }
        }
      }
    },
    // 穿梭框搜索
    filterKonwledgeFn (val) {
      this.transferCurrentPage = 1
      this.knowledgeQuery.cursor = 1
      this.getKnowledgesFn()
    },