vue 自定义el-table穿梭框功能

一、需求描述：前段时间接到一个需求是点击做一个类似穿梭框的表格点击选中功能，弹框的左边是全部数据展示，点击表格行数据可以选中自动增加到右边的已选框，并且可以手动删除、重置选中数据。点击确定后到展示到主页面，被选中的数据打开弹框不能再次选择。

二、界面展示：功能如下图所示：

• 主页面没有选中的数据时，展示如下：

•  弹框页面，展示如下：

•  选中后主页面的数据显示如下：

•  再次点击添加学生成绩按钮，之前选中数据不可再点击，如下图：

 三、代码实现：

1. 首页面表格主键是orderId ，主页面代码：

   
     
   
       学生成绩信息 
       
   
         批量删除
         添加学生成绩
       
     
     
   
       
          
         
         
           
         
         
         
         
         
         
             
           
       
     
   
   
   //-----------------------------------------------------------------------------
   // 新增学生成绩信息
       addMedic() {
         if (this.tableData.healthEventId == '') {
           return this.$message.warning('请先选择学生')
         } else {
           this.$refs.addMedicDialog.open(
             this.tableData.adrDrugInfos,
             this.tableData.healthEventId,
             this.tableData.visitType
           )
         }
       },
       // 删除学生成绩信息
       delMedic(row) {
         this.$Confirm({ type: 'delete' })
           .then((e) => {
             this.tableData.adrDrugInfos.map((item, index) => {
               if (item.orderId == row.orderId) {
                 this.tableData.adrDrugInfos.splice(index, 1)
                 this.$message.success('删除成功！')
               }
             })
           })
           .catch((err) => {
             console.log(err)
           })
       },
   //选中学生成绩信息数据
       handleSelectionChange(val) {
         this.selectedMedicData = val
       },
   // 批量学生成绩信息
       delSomeMedic() {
         if (this.selectedMedicData.length <= 0) {
           return this.$message.warning('请先选择学生成绩信息')
         }
         this.$Confirm({ type: 'delete' })
           .then((e) => {
             this.selectedMedicData.forEach((val) => {
               this.tableData.adrDrugInfos.forEach((v, i) => {
                 if (val.orderId == v.orderId) {
                   this.tableData.adrDrugInfos.splice(i, 1)
                   this.$message.success('删除成功！')
                 }
               })
             })
           })
           .catch((err) => {
             console.log(err)
           })
       },
   // 选择学生成绩信息回显
       getMedicalData(data) {
         data.forEach((item) => {
           this.tableData.adrDrugInfos.push({
             orderId: item.orderId||'',
             suspectedConcomitant: item.suspectedConcomitant||'',
             dose: item.onceDosage||'',
             doseUnit: item.dosageunitName||'',
             frequency: item.freqDesc||'',
             routeName: item.defaultUsageCode||'',
             formName: item.drugForm||'',
             reasonForUse: item.reasonForUse||'',
           })
         })
       },

2. 弹框页面数据主键是orderId，弹框页面代码：