Vue穿梭框是常用的UI組件之一，它允許我們在兩個列表之間移動元素。但是，當我們有很多元素需要移動時，如何進行分頁呢？本篇文章將帶你了解如何通過Vue獲取穿梭框分頁。

首先，我們需要安裝ElementUI庫以使用ElementUI的分頁組件，我們可以在main.js中導入ElementUI庫：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

接著，在我們的組件中使用穿梭框組件和分頁組件：

<template>
<div>
<el-transfer
v-model="transferValue"
:data="mockData"
:titles="['Source', 'Target']"
:filterable="filterable"
:filter-placeholder="filterPlaceholder"
:filter-method="filterMethod"
:target-order="targetOrder"
:props="props"
@change="handleChange"
:footer-format="footerFormat">
<template slot="right-footer">
<el-pagination
style="float: right;margin-top: 10px;"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="rightCurrentPage"
:page-sizes="[10, 20, 30, 40]"
:page-size="rightPageSize"
:total="mockData.length"></el-pagination>
</template>
</el-transfer>
</div>
</template>
<script>
export default {
data() {
return {
mockData: [],
transferValue: [],
filterable: true,
filterPlaceholder: '請輸入搜索內容',
targetOrder: 'original',
props: {
label: 'name',
key: 'id',
disabled: 'disabled'
},
rightCurrentPage: 1,
rightPageSize: 10
}
},
created() {
// 假設我們從后端獲取了1000條數據
for (let i = 0; i < 1000; i++) {
this.mockData.push({
id: i,
name: '選項' + i,
disabled: i % 4 === 0
})
}
},
methods: {
handleChange() {
console.log(this.transferValue)
},
filterMethod(query, item) {
return item.name.indexOf(query) > -1
},
handleSizeChange(val) {
this.rightPageSize = val
},
handleCurrentChange(val) {
this.rightCurrentPage = val
},
footerFormat({ total }) {
return `共${total}條`
}
}
}
</script>

代碼中我們為分頁組件綁定了size-change和current-change事件，用于監聽每頁顯示的數量和當前頁碼的變化。我們還綁定了模版，將分頁組件放在穿梭框右側。

最后，我們已經完成了Vue獲取穿梭框分頁的操作，現在可以愉快地使用穿梭框并實現分頁。