vue 用element 二次封装 的穿梭组件
vue 用element 二次封装 的穿梭组件
//穿梭组件--自封装
<!--多选择 弹出的弹窗-->
1.<transfer @closeFun="closeFun" :title="transferTitle" :status='infotags_show_edit' :leftData='UsersList' :rightData='rightData' ></transfer>
2.import transfer from '@/components/transfer'
3.components: {transfer},
4.return {
rightData:[], //选中数据--一般编辑时才有
isAdd:false,
UsersList: [], //数据库获取--转化后
transferTitle:'权限选择',
infotags_show_edit: false, //弹窗显示状态----选择弹窗
}
5.父组件的方法
//关闭弹窗
closeFun(ids){
if(this.isAdd){
//添加---处理自己的逻辑
this.addAccountForm.an_ids = ids[0]
}else{
//编辑---处理自己的逻辑
this.BianJiAccountForm.an_ids = ids[0]
}
this.infotags_show_edit = false;
},
6.//获取权限列表数据----获取到数据后一定要转换处理 id 和 name
getNodeList() {
//参数
let get = `${this.common.getData}&limit=${this.pagesize2}&page=${this.pageindex2}`
this.https(this.apiList.getNodeList+`${get}`).then(response => {
if (response.data.code == this.common.code) {
let data = response.data.data.rows
//格式化数据，方便子组件处理
for(let i=0;i<data.length;i++){
data[i]['id'] = data[i].an_id
data[i]['name'] = data[i].an_name
}
this.UsersList = data; //列表数据
}
//弹窗提示
this.tc_element(response.data.msg,response.data.code,2,"获取列表")
}
);
},
7.//点击打开弹窗的事件--添加
Choice_infotags_add() {
this.isAdd = true
this.infotags_show_edit = true; //弹窗显示状态
},
8.//点击打开弹窗的事件--编辑弹窗
Choice_infotags_edit() {
this.isAdd = false
this.infotags_show_edit = true;
let lists = this.BianJiAccountForm.an_ids.split(',')
for(let i=0;i<this.UsersList.length;i++){
for(let j=0;j<lists.length;j++){
if(lists[j] == this.UsersList[i].an_id){
//转换数据 id 和 name
this.UsersList[i]['id'] = this.UsersList[i].an_id
this.UsersList[i]['name'] = this.UsersList[i].an_name
this.rightData.push(this.UsersList[i])
}
}
}
},
组件内容：
<template>
<!--选择 弹出的弹窗 添加-->
<el-dialog :title="title" :visible.sync="status" width="900px" :before-close="handleClose">
<div class="xuanhe_tc">
<div class="left-table">
<div>待选</div>
<el-table :data="UsersList1" style="width: 100%" @selection-change="handleSelectionChange_left" tooltip-effect="dark" ref="multipleTable" border>
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column prop="id" label="id" width="60"></el-table-column>
<el-table-column prop="name" label="名称" width="180"></el-table-column>
</el-table>
<!--分页-->
<div class="block" hide-on-single-page>
<span class="demonstration"></span>
<el-pagination
@size-change="handleSizeChangeLeft"
@current-change="handleCurrentChangeLeft"
:current-page="pageindexLeft"
small
:pager-count="5"
:page-sizes="[10, 20, 30, 40,50]"
:page-size="pagesizeLeft"
layout="total, prev, pager, next"
:total="countLeft"
></el-pagination>
</div>
</div>
<div>
<div>
<el-button :disabled="leftBtnIsClick" type="primary" icon="el-icon-arrow-left" class="btn-check" @click="pushLeft">到左边</el-button>
</div>
<div>
<el-button :disabled="rightBtnIsClick" type="primary" @click="pushRight">到右边<i class="el-icon-arrow-right el-icon--right"></i></el-button>
</div>
</div>
<div class="right-table">
<div>选中</div>
<el-table :data="UsersList2" style="width: 100%" @selection-change="handleSelectionChange_right" tooltip-effect="dark" ref="multipleTable" border>
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column prop="id" label="id" width="60"></el-table-column>
<el-table-column prop="name" label="名称" width="180"></el-table-column>
</el-table>
<!--分页-->
<div class="block" hide-on-single-page>
<span class="demonstration"></span>
<el-pagination
@size-change="handleSizeChangeRight"
@current-change="handleCurrentChangeRight"
:current-page="pageindexRight"
small
:pager-count="5"
:page-sizes="[10, 20, 30, 40,50]"
:page-size="pagesizeRight"
layout="total, prev, pager, next"
:total="countRight"
></el-pagination>
</div>
</div>
</div>
</el-dialog>
</template>
<script>
export default {
props:[
"status",
"leftData",
"rightData",
"title"
],
data() {
return {
UsersList1:[] , //左边数据
leftBtnIsClick:true, //添加到左边按钮状态
pagecountLeft: 1, //总页数 ,默认1
pagesizeLeft: 10, //每页多少条 默认10
pageindexLeft: 1, //当前页 默认1
countLeft: 1, //总条数 默认1
UsersListRight:[], //右边总数据
rightBtnIsClick:true, //添加到右边你按钮状态
UsersList2:[], //右边数据
pagecountRight: 1, //总页数 ,默认1
pagesizeRight: 10, //每页多少条 默认10
pageindexRight: 1, //当前页 默认1
countRight: 1, //总条数 默认1
selectList:[] //选中数据
};
},
created(){
},
watch:{
status:function(newVal,oldVal){
this.getNodeListLeft()
this.getNodeListRight()
}
},
methods:{
//关闭弹窗
handleClose(){
let ids = this.formatIdFun()
this.$emit('closeFun',[ids])
},
//左边分页
handleSizeChangeLeft(val) {
(this.pagesizeLeft = val), this.getNodeListLeft();
},
handleCurrentChangeLeft(val) {
(this.pageindexLeft = val), this.getNodeListLeft();
},
//右边分页
handleSizeChangeRight(val) {
(this.pagesizeRight = val), this.getNodeListRight();
},
handleCurrentChangeRight(val) {
(this.pageindexRight = val), this.getNodeListRight();
},
//获取列表数据--左边
getNodeListLeft() {
for(let a=0;a<this.rightData.length;a++){
for(let b=0;b<this.leftData.length;b++){
if(this.leftData[b].id == this.rightData[a].id){
this.leftData.splice(b,1)
}
}
}
this.countLeft = this.leftData.length;
let shartPage = this.pageindexLeft*this.pagesizeLeft
this.UsersList1 = []
for(let i=0;i<this.leftData.length;i++){
if((shartPage-this.pagesizeLeft)<=i && i<shartPage){
this.UsersList1.push(this.leftData[i])
}
}
},
//获取列表数据--右边
getNodeListRight() {
this.countRight = this.rightData.length;
let shartPage = this.pageindexRight*this.pagesizeRight
this.UsersList2 = []
for(let i=0;i<this.rightData.length;i++){
if((shartPage-this.pagesizeRight)<=i && i<shartPage){
this.UsersList2.push(this.rightData[i])
}
}
},
//操作多选--左边
handleSelectionChange_left(val) {
this.rightBtnIsClick = false
this.leftBtnIsClick = true
this.selectList = val
},
//操作多选--右边
handleSelectionChange_right(val) {
this.leftBtnIsClick = false
this.rightBtnIsClick = true
this.selectList = val
},
//添加到左边
pushLeft(){
for (let i = 0; i < this.selectList.length; i++) {
//删除所有数据中
for(let b=0;b<this.rightData.length;b++){
if(this.rightData[b].id == this.selectList[i].id){
this.rightData.splice(b,1)
}
}
//删除第一页中
for(let j=0;j<this.UsersList2.length;j++){
if(this.UsersList2[j].id == this.selectList[i].id){
this.UsersList2.splice(j,1)
if(this.UsersList2.length == 0){
this.getNodeListRight()
}
}
}
//追加到左边
this.leftData.unshift(this.selectList[i])
this.getNodeListLeft()
}
},
//添加到右边
pushRight(){
//添加右边
for (let i = 0; i < this.selectList.length; i++) {
//删除所有数据中
for(let b=0;b<this.leftData.length;b++){
if(this.leftData[b].id == this.selectList[i].id){
this.leftData.splice(b,1)
}
}
//删除第一页中
for(let j=0;j<this.UsersList1.length;j++){
if(this.UsersList1[j].id == this.selectList[i].id){
this.UsersList1.splice(j,1)
if(this.UsersList1.length == 0){
this.getNodeListLeft()
}
}
}
//追加到右边
this.rightData.unshift(this.selectList[i])
this.getNodeListRight()
}
},
//将右边选中数据--提取id到列表
formatIdFun() {
let ids = ''
let data = this.rightData;
for (let i = 0; i < data.length; i++) {
if(ids == ''){
ids = data[i].id
}else{
ids = ids + ',' + data[i].id
}
}
return ids
},
}
}
</script>
<style lang="scss" scoped>
.btn-check{
margin-top:100px;
margin-bottom:20px;
}
</style>
- vue基于element-ui二次封装分页组件
- vue如何像Element那样封装组件
- vue分页组件二次封装---每页请求特定数据
- element-ui 二次封装搜索组件
- vue-cli如何对element-ui组件进行二次封装
- vue 基于element-ui 分页组件封装的实例代码
- 二次封装el-button实现的vue权限按钮组件
- Vue + Element-ui实现后台管理系统(4)---封装一个ECharts组件的一点思路
- Element + Vue之封装的Echarts折线图组件
- 基于 vue 与 element-ui 组件库封装 tree-select 组件
- vue-cli3 ant-design-vue组件部分加载以及二次封装发布到npm
- vue+element_ui之表格组件封装
- Element + Vue 之 封装的日期组件
- VUE2.0+Element-UI+Echarts封装的组件
- 基于element的el-table组件.el-pagination组件二次封装
- VUE2.0+Element-UI+Echarts封装的组件实例
- Element中el-table和MessageBox组件的二次封装
- vue elementui 实现搜索栏公共组件封装的实例代码
- Vue + Element UI 实现权限管理系统 前端篇（七）：功能组件封装
- vue+element table的二次封装