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()
    },

  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
ElementUI是一个基于Vue.js的UI组件库,其中包含了丰富的组件和功能。要实现分页功能,可以使用ElementUI提供的Pagination组件。 首先,需要在你的项目中引入ElementUI库。可以通过npm或者直接引入CDN的方式进行引入。 然后,在需要使用分页功能的页面中,使用Pagination组件进行分页的渲染。例如: ```html <template> <div> <!-- 分页组件 --> <el-pagination @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" // 每页显示条数可选项 :page-size="pageSize" // 每页显示条数 :total="total" // 总条数 layout="prev, pager, next, sizes, jumper" // 分页布局 ></el-pagination> <!-- 数据列表 --> <ul> <li v-for="item in currentData" :key="item.id">{{ item.name }}</li> </ul> </div> </template> <script> export default { data() { return { currentPage: 1, // 当前页码 pageSize: 10, // 每页显示条数 total: 100, // 总条数 dataList: [], // 数据列表 }; }, computed: { // 根据当前页码和每页显示条数计算当前页显示的数据 currentData() { const startIndex = (this.currentPage - 1) * this.pageSize; const endIndex = startIndex + this.pageSize; return this.dataList.slice(startIndex, endIndex); }, }, methods: { // 处理页码改变事件 handleCurrentChange(currentPage) { this.currentPage = currentPage; }, }, }; </script> ``` 上述代码中,通过el-pagination组件实现了分页功能。其中,current-page表示当前页码,page-sizes表示每页显示条数可选项,page-size表示每页显示条数,total表示总条数,layout表示分页布局。 在computed属性中,根据当前页码和每页显示条数计算出当前页显示的数据。 通过handleCurrentChange方法处理页码改变事件,更新当前页码。 以上是一个简单的使用ElementUI实现分页功能的示例,你可以根据自己的实际需求进行相应的调整和扩展。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值