背景:根据类目选择面料,因为面料太多,故而在页面分页
<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
})
},