基础篇(二):element ui中el-transfer(穿梭框)的使用
效果如下(嵌入了分页):html中:<el-transferstyle="text-align: left; display: inline-block"v-model="value"filterable:titles="['已关联', '未关联']":button-texts="['绑定', '解绑']"@change="handleChange":data
·
效果如下(嵌入了分页):
html中:
<el-transfer
style="text-align: left; display: inline-block"
v-model="value"
filterable
:titles="['已关联', '未关联']"
:button-texts="['绑定', '解绑']"
@change="handleChange"
:data="data"
>
<!-- 右侧栏分页 -->
<el-button
type="text"
style="color:#606266"
v-if="value.length != 0"
class="transfer-footer"
slot="right-footer"
size="small"
>共{{ Rtotal }}条</el-button>
<el-button
v-if="value.length != 0"
class="transfer-footer"
slot="right-footer"
size="small"
@click="rightPageNumChange"
:disabled="RPageNum - 1 < 1"
>上一页</el-button>
<el-input
v-if="value.length != 0"
v-model="RPageNum"
size="mini"
class="transfer-footer"
slot="right-footer"
:placeholder="RPageNum"
style="width: 43px"
></el-input>
<el-button
class="transfer-footer"
slot="right-footer"
size="small"
@click="rightAddPageNumChange"
v-if="value.length != 0"
:disabled="RPageNum > nextPage"
>下一页</el-button>
<!-- 左侧栏分页 -->
<el-button
type="text"
style="color:#606266"
v-if="leftLength != 0"
class="transfer-footer"
slot="left-footer"
size="small"
>共{{ Ltotal }}条</el-button>
<el-button
v-if="leftLength != 0"
class="transfer-footer"
slot="left-footer"
size="small"
@click="leftPageNumChange"
:disabled="LPageNum - 1 < 1"
>上一页</el-button>
<el-input
v-if="leftLength != 0"
v-model="LPageNum"
size="mini"
class="transfer-footer"
slot="left-footer"
:placeholder="LPageNum"
style="width: 43px"
></el-input>
<el-button
class="transfer-footer"
slot="left-footer"
size="small"
@click="leftAddPageNumChange"
v-if="leftLength != 0"
:disabled="LPageNum > LNextPage"
>下一页</el-button>
</el-transfer>
script中:
<script>
import {
listUsersByUser,
listUsersNotInUser,
distUser,
removeDistUser
} from "@/api/user";
export default {
data () {
return {
// 穿梭框数据,这里注意,里面的属性名要和element里面的一样 不能自定义
data: [{ key: 3, label: "你好", pinyin: "lalla" }, { key: 4, label: "很nice", pinyin: "aaa" }], //存放所有的数据,除了value的都是左侧的
value: [3], //存放右侧菜单数据,里面的数值和data中的key值一致
// 右侧分页数据
Rtotal: "",
RPageNum: "1",
RPageSize: "20",
nextPage: null,
// 左侧分页数据
Ltotal: "",
LPageNum: "1",
LPageSize: "20",
LNextPage: null,
leftLength: null
};
methods:{
// 穿梭框更改事件
async handleChange (value, direction, keyArr) {
let followsArr = []
//value为左/右的所有数值,direction为方向left or right,keyArr为选中的key
switch (direction) {
//右到左 绑定
case 'left':
// 调用后端api绑定接口
break
//从左到右 解绑
case 'right':
// 调用后端api解绑接口
break
}
}
}
}
</script>
更多推荐
已为社区贡献4条内容
所有评论(0)