vue3+Element Plus实现自定义穿梭框

先上效果图：具体细节可以自己调整这里主要说明 派单，取消这两个按钮的实现

DOM部分代码：

    
        
            

                

                    

                        

                    

                

                

                    

                        
                            
                                
                            
                        
                    


                
                
                    
                    
                    
                

                

                    
                
            
        


        
        

        
            

                
                    派单
                
            
            

                取消
                
            
        
        
            

                

                    

                        

                    
                
                
                    
                    
                    
                
            
        
    

穿梭框的table表头是动态的html中无需修改，使用这个组件首先需要在scripe中创建如下变量

const tableData = ref([]) //左侧数据
const selectedLeft = ref([])// 左侧选中数据
const sharedData = ref([])//右侧数据
const selectedRight = ref([])// 右侧选中数据

//表格loading
const flagTbale = ref(false) //可以去除所有的flagTbale 变量即可去除loading功能


//两个table表头
const cols = ref([
    { id: 1, prop: 'latnName', label: '本地网' },
    { id: 2, prop: 'orgId', label: '组织编码' },
    { id: 3, prop: 'orgName', label: '组织' },
])

然后就是最重要的按钮功能

// 取消按钮
const buttonLeft = async () => {
    if (!selectedRight.value || !Array.isArray(selectedRight.value)) {
        selectedRight.value = [];
    }
    // 将右侧选中的数据移动到左侧

    tableData.value = tableData.value.concat(selectedRight.value);

    // 从右侧数据中移除已经移动的数据
    sharedData.value = sharedData.value.filter(item => !selectedRight.value.includes(item));

    // 清空右侧选中的数据
    selectedRight.value = [];

}

// 分享按钮
const buttonRight = async () => {

    if (!selectedLeft.value || !Array.isArray(selectedLeft.value)) {
        selectedLeft.value = [];
    }
    // 将左侧选中的数据移动到右侧

    sharedData.value = sharedData.value.concat(selectedLeft.value);

    // 从左侧数据中移除已经移动的数据
    tableData.value = tableData.value.filter(item => !selectedLeft.value.includes(item));

    // 清空左侧选中的数据
    selectedLeft.value = [];

}

按钮禁用逻辑实现

// 按钮是否禁用
const qxfxDisabled = ref(true)
const fxDisabled = ref(true)


// 左侧表格选中事件
const handleLeftSelectionChange = (selection) => {

    if (selection.length !== 0) {
        fxDisabled.value = false
    }
    if (selection.length === 0) {
        fxDisabled.value = true
    }

};

// 右侧表格选中事件
const handleRightSelectionChange = (selection) => {
    selectedRight.value = selection;
    if (selection.length !== 0) {
        qxfxDisabled.value = false
    }
    if (selection.length === 0) {
        qxfxDisabled.value = true
    }
};

到这里你就可以使用在这个组件了。这是经过插分的代码原本还拥有表头切换的逻辑如有需要可留言.我后续可以在做整理