element表格穿梭框

最新推荐文章于 2024-08-09 14:41:31 发布

33455432

最新推荐文章于 2024-08-09 14:41:31 发布

阅读量299

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_38999134/article/details/133774991

版权

<el-row :gutter="20" class="mt-20">
     <el-col :span="11">
         <el-table
         :row-key="getRowKey"
             ref="staffTable"
             v-loading="listLoading"
             :data="staffList"
             border
             fit
             highlight-current-row
             @selection-change="handleStaffChange"
         >
             <el-table-column type="selection" :reserve-selection="true" width="55"></el-table-column>
             <el-table-column label="手机" align="center">
             <template slot-scope="{row}">
                 <span>{{ row.phone }}</span>
             </template>
             </el-table-column>
 
             <el-table-column label="昵称" align="center">
             <template slot-scope="{row}">
                 <span>{{ row.nickName }}</span>
             </template>
             </el-table-column>
         </el-table>
     </el-col>
     <el-col :span="1" style="text-align:center;">
         <el-button
             @click="addStaff"
             type="primary"
             :disabled="!staffData.length"
             icon="el-icon-arrow-right"
             circle
         ></el-button>
         <el-button
             @click="removeStaff"
             type="primary"
             :disabled="!selectedStaffData.length"
             icon="el-icon-arrow-left"
             circle
             style="margin-left: 0;margin-top: 10px;"
         ></el-button>
     </el-col>
     <el-col :span="11">
         <el-table
         :row-key="getRowKey"
             ref="selectedStaffTable"
             v-loading="listLoading"
             :data="selectedStaffList"
             border
             fit
             highlight-current-row
             @selection-change="handleSelectedStaffChange"
         >
             <el-table-column type="selection" :reserve-selection="true" width="55"></el-table-column>
             <el-table-column label="手机" align="center">
             <template slot-scope="{row}">
                 <span>{{ row.phone }}</span>
             </template>
             </el-table-column>
 
             <el-table-column label="昵称" align="center">
             <template slot-scope="{row}">
                 <span>{{ row.nickName }}</span>
             </template>
             </el-table-column>
 
              
         </el-table>
     </el-col>
 </el-row>
 <el-button  @click="modifyStaff()"  type="primary"  size="small">提交</el-button>

data() {
            return {
                listLoading: true,
                staffTemp: {
                    phone: "",
                    nickName: "",
                    staffTypeId: ""
                },
                staffList: [
                    {
                        "phone":'12723456789',
                        "nickName":"dsgshrt"
                    },
                    {
                        "phone":'98765432',
                        "nickName":"dsgshrt"
                    }  
                ],
                selectedStaffList: [],
                staffData: [],
                selectedStaffData: [],
                tableKey: 0,
                rowKey: "rowKey",
                staffOptions: [
                    { key: 28, display_name: "补货员" },
                    { key: 29, display_name: "测试员" }
                ],
          }
   }

getRowKey(row){
                return row.id;
            }, 
            // 将左边表格选择项存入staffData中
            handleStaffChange(rows) {
                this.staffData = [];
                if (rows) {
                    rows.forEach(row => {
                    if (row) {
                        this.staffData.push(row);
                    }
                    });
                }
            },
            // 左边表格选择项移到右边
            addStaff() {
                setTimeout(() => {
                    this.$refs["staffTable"].clearSelection();
                    this.$refs["selectedStaffTable"].clearSelection();
                }, 0);
                let repeat = false;
                this.selectedStaffList.forEach(item => {
                    if (this.staffData[0] && item.phone === this.staffData[0].phone) {
                    repeat = true;
                    alert("此员工已添加");
                    return;
                    }
                });
                if (repeat === false) {
                    this.staffData.forEach(item => {
                    this.selectedStaffList.push(item);
                    });
                    for (let i = 0; i < this.staffList.length; i++) {
                    for (let j = 0; j < this.staffData.length; j++) {
                        if (
                        this.staffList[i] &&
                        this.staffData[j] &&
                        this.staffList[i].phone === this.staffData[j].phone
                        ) {
                        this.staffList.splice(i, 1);
                        }
                    }
                    }
                }
            },
            // 右边表格选择项移到左边
            removeStaff() {
                setTimeout(() => {
                    this.$refs["staffTable"].clearSelection();
                    this.$refs["selectedStaffTable"].clearSelection();
                }, 0);
                this.selectedStaffData.forEach(item => {
                    this.staffList.push(item);
                });
                for (let i = 0; i < this.selectedStaffList.length; i++) {
                    for (let j = 0; j < this.selectedStaffData.length; j++) {
                    if (
                        this.selectedStaffList[i] &&
                        this.selectedStaffData[j] &&
                        this.selectedStaffList[i].phone === this.selectedStaffData[j].phone
                    ) {
                        this.selectedStaffList.splice(i, 1);
                    }
                    }
                }
            },
            // 将右边表格选择项存入selectedStaffData中
            handleSelectedStaffChange(rows) {
                this.selectedStaffData = [];
                if (rows) {
                    rows.forEach(row => {
                    if (row) {
                        this.selectedStaffData.push(row);
                    }
                    });
                }
            },
            // 提交
            modifyStaff() {
                console.log("this.selectedStaffList",this.selectedStaffList)
            },