效果
先去element把对应组件放到一个组件中设置好布局
穿梭框绑定数据源(后台数据默认给的第一页的值)
分页通过掉后台接口给的总数据自动会计算分多少页,每次通过分页里点击传当前页数给后台拿值
滑块通过watch监听滑块装填变化切换值
<el-dialog title="A2L文件列表" :visible.sync="dialogTableVisible">
<div style="display: flex;flex-direction: column;justify-items: center;">
<div style="margin: 0 auto;">
<el-switch
v-model="value1"
active-text="值1"
inactive-text="值2">
</el-switch>
<el-input
style="width: 35vh;margin-left: 23vh;"
placeholder="输入搜索内容点击回车按钮触发"
@keyup.enter.native="Lok"
v-model="state"
clearable>
</el-input>
<el-button icon="el-icon-search" circle @click="Lok"></el-button>
</div>
<br>
<el-transfer style="margin: 0 auto;" :width="600" v-model="value2" :data="detail" :titles="['数据源', '当前页已选定值']">
<el-button class="transfer-footer" slot="right-footer" size="small" @click="pushToOborOC()">确定</el-button>
</el-transfer>
<el-pagination
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-size="100"
:pager-count="5"
layout="total, prev, pager, next, jumper"
:total="allA2LFileLength">
</el-pagination>
</div>
</el-dialog>
样式写在标签里面真是因为我菜,前端小白真是靠夯代码实现功能
export default {
data() {
return {
// 值2列表集合
Ob: [],
// 值1列表集合
Oc: [],
allA2LFileLength: 1,
// 每次保存的ID值
ID: '',
currentPage: 1,
// state是搜索值
state: '',
// value1 false是值1 true是值2
value1: false,
// value2 文件列表中的选中列表值
value2: [],
// detail 穿梭框数据列表
detail: [{
key: 'sinal1',
},
{
key: 'sinal2',
}],
// 控制分页是否显示
dialogFormVisible: false,
},
watch: {
// 监听滑块变化,如果有变化重新给穿梭框列表赋值
value1: {
handler(newItem) {
this.dialogTableVisibleshow();
},
immediate: true,
deep: true,
},
methods: {
Lok() {
// 这里写查询接口逻辑写自己接口
window.alert('接口暂未开放!');
},
// 点击分页逻辑请求
handleCurrentChange(curpage) {
const type = this.value1 ? 2 : 1;
deviceAPI.getAllA2l(this.ID, curpage, type).then(
(res) => {
// 返回所有数据
this.detail = res.data;
},
).catch();
},
dialogTableVisibleshow(ID) {
console.log('当前面板ID', this.$route.params.id);
// 判断是否有ID
if (ID) {
this.ID = ID;
} else {
ID = this.ID;
}
const PageID = this.currentPage;
const singalName = this.value1;
const type = this.value1 ? 2 : 1;
// 这里写自己请求后台数据接口
deviceAPI.getAllFILE(ID, PageID, type).then(
(res) => {
this.value2 = [];
this.dialogTableVisible = true;
// 返回所有数据
this.detail = res.data;
if (this.value1) {
this.Ob = res.savedData;
} else {
this.Oc = res.savedData;
}
// 接受分页数据长度每页100条,用总长度自动分页
this.allA2LFileLength = res.totalConn;
},
).catch((res) => { console.log('文件请求失败'); });
},
再理下逻辑,点击某个按钮触发页面同时请求后台的接口,后台接口反上来值赋值给穿梭框,每次分页点击下一页或者下几页传请求对应页的值给后台,后台再返回值给前端,切换滑块再次请求后台改变值。