穿梭框 （袁敏）

基础用法

已选择的数据展示:

测账号授权编辑

<template>
    <div style="margin-top:20px;">
		<el-button @click="testSelectContent(true)">选择左侧表格数据到右侧</el-button>
        <div v-if="selectLeftToRight.isShow">
		<select-left-to-right
			:leftToRightDialog="selectLeftToRight.isShow"
			 placeHolderName="测试"
			:leftList="selectLeftToRight.applicationList"
			:rightList="selectLeftToRight.copyIntellect"
			:popoverWidth="800"
			:total="selectLeftToRight.applicationList.length"
            @getLeftList="getLeftList"
            @confirmChoosed ="confirmChoosed"
			@showDialog="testSelectContent"
		/>
        </div>
        <div style="margin-top:20px;">已选择的数据展示:</div>
        <div v-for="(item,index) in selectLeftToRight.copyIntellect" :key="index">
             <li>{{item.appName}}</li>
        </div>
	   </div>
</template>
<script>
 export default{
    data(){
        return {
            selectLeftToRight: {
				isShow: false,
				applicationList: [
					{
						relationId: null,
						itlAppId: '580',
						appName: '测账号授权编辑',
						systemIdProduct: 'SV-ILPCZHSQBJ-0000',
						appIdProduct: 'MB-ILPCZHSQBJ-0000',
						systemIdDevelop: 'SV-ILDCZHSQBJ-0000',
						appIdDevelop: 'MB-ILDCZHSQBJ-0000'
					},
					{
						relationId: null,
						itlAppId: '557',
						appName: '测试一下吧',
						systemIdProduct: 'SV-ILPCSYXB-0000',
						appIdProduct: 'MB-ILPCSYXB-0000',
						systemIdDevelop: 'SV-ILDCSYXB-0000',
						appIdDevelop: 'MB-ILDCSYXB-0000'
					},
					{
						relationId: null,
						itlAppId: '553',
						appName: '智能应用改版冒个头',
						systemIdProduct: 'SV-ILPZNYYGBMGT-0000',
						appIdProduct: 'MB-ILPZNYYGBMGT-0000',
						systemIdDevelop: 'SV-ILDZNYYGBMGT-0000',
						appIdDevelop: 'MB-ILDZNYYGBMGT-0000'
					},
					{
						relationId: null,
						itlAppId: '551',
						appName: '再来一遍',
						systemIdProduct: 'SV-ILPZLYB-0000',
						appIdProduct: 'MB-ILPZLYB-0000',
						systemIdDevelop: 'SV-ILDZLYB-0000',
						appIdDevelop: 'MB-ILDZLYB-0000'
					},
					{
						relationId: null,
						itlAppId: '550',
						appName: 'happySaturday',
						systemIdProduct: 'SV-ILP10497112112-0000',
						appIdProduct: 'MB-ILP10497112112-0000',
						systemIdDevelop: 'SV-ILD10497112112-0000',
						appIdDevelop: 'MB-ILD10497112112-0000'
					},
				],
				copyIntellect: [
					{
						relationId: null,
						itlAppId: '580',
						appName: '测账号授权编辑',
						systemIdProduct: 'SV-ILPCZHSQBJ-0000',
						appIdProduct: 'MB-ILPCZHSQBJ-0000',
						systemIdDevelop: 'SV-ILDCZHSQBJ-0000',
						appIdDevelop: 'MB-ILDCZHSQBJ-0000'
					}
				],
				total: 0
			},
        }
    },
     methods:{
        //控制弹窗显示
        testSelectContent(isShow) {
			this.selectLeftToRight.isShow = isShow
		},
         //调用接口获取列表数据
        getLeftList(){
        console.log("selectLeftToRight",this.selectLeftToRight.applicationList);
        },
        //确认已选择的数据
        confirmChoosed(data){
           console.log("data",data); 
           this.selectLeftToRight.copyIntellect = data;
           console.log("selectLeftToRight.copyIntellect",this.selectLeftToRight.copyIntellect); 
            
        }
     }
 }
</script>

显示代码

Attributes

参数	说明	类型	可选值	默认值
leftToRightDialog	控制显示	boolean	—	false
popoverWidth	弹窗宽度	Number	—	500
leftList	左侧列表数据	Array	—	[]
rightList	已选择的数据	Array	—	[]
placeHolderName	搜索提示框提示语	String	—	-
total	左侧列表数据总条数	Number	—	0
labelName	左侧表格展示的名称	String	—	应用
maxHeight	左侧列表最大高度	Number	—	300
listHeight	选择弹窗高度	Number	—	400
showPagination	是否显示分页	Boolean	—	true
showSearch	是否显示搜索	Boolean	—	true
showBtn	是否显示底部确认按钮	Boolean	—	true

Methods

| name | 说明 |参数 |----|----| | confirmRightListData | 用于确认和拿到右侧已选数据，在不显示底部按钮时，可调用此方法| 右侧已选择数据数组

Events

事件名	说明	类型	回调参数
getLeftList	获取左侧列表数据的方法	object	{searchKey:'左侧列表搜索字段',pageSize:10,pageNum:"分页当前页码"}
showDialog	控制弹窗显示的方法	boolean	false
confirmChoosed	确认已选择数据的方法	Array	[]