Transform 穿梭框组件重写，实现多列穿梭

最新推荐文章于 2024-05-18 10:32:09 发布

领秀5858

最新推荐文章于 2024-05-18 10:32:09 发布

阅读量1.4k

点赞数 5

分类专栏： Vue 文章标签： vue.js elementui 前端

本文链接：https://blog.csdn.net/weixin_44019370/article/details/124623900

版权

Vue 专栏收录该内容

11 篇文章 2 订阅

订阅专栏

官方组件：
在这里插入图片描述

重写后：在线远行

在这里插入图片描述

业务场景：基于element UI 15.6版本,Transform 穿梭框里穿梭内容只有一列勾选内容，能不能展示多列，以表格的形式进行勾选呢？

需求分析：其实重头实现一个穿梭效果也不难，在el-table 表格的基础上，中间两个按钮的点击事件来动态改变左右两边表格的数据；

功能实现：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Transform 多列穿梭框 </title>
    <script src="https://unpkg.com/vue@2"></script>
    <script src="https://unpkg.com/element-ui@2.15.6/lib/index.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"/>
  </head>
  <body>
    <div id="dynamic-component-demo">
      <div style="width: 900px;">
        <el-form>
          <el-row style="display: flex;">
            <el-col :span="10" style="width: 390px; border: 1px solid #ebeef5;">
              <div style="padding: 5px 15px 10px; background-color: #f5f7fa; border-radius: 3px;">
                <el-form-item label="未选列表">
                  <span style="float: right;">{{ listArr.length }}</span>
                  <el-table :data="listArr" style="width: 100%;" border height="393" @selection-change="checkAll">
                    <el-table-column type="selection"></el-table-column>
                    <el-table-column prop="id" label="ID"></el-table-column>
                    <el-table-column prop="name" label="姓名"></el-table-column>
                    <el-table-column prop="age" label="年龄"></el-table-column>
                  </el-table>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="3" style="width: 80px; padding: 0 10px; display: flex; flex-direction: column; justify-content: center; ">
               <!--穿梭框选中-->
              <div style="display: flex; justify-content: center;">
                <el-button class="middle-circle" icon="el-icon-arrow-right" :disabled="!leftData.length" size="mini" type="primary" @click="handelSelect" />
              </div>
              <!--穿梭框取消-->
              <div style="display: flex; justify-content: center;">
                <el-button class="middle-circle" icon="el-icon-arrow-left" :disabled="!rightData.length" size="mini" type="primary" style="margin-top: 10px; margin-left: 0px;" click="handleRemoveSelect" />
              </div>
            </el-col>
            <el-col :span="10" style="width: 390px; border: 1px solid #ebeef5;">
              <div style="padding: 5px 15px 10px; background-color: #f5f7fa; border-radius: 3px;">
                <el-form-item label="已选列表">
                  <span style="float: right;">{{ selectArr.length }}</span>
                  <el-table :data="selectArr" style="width: 100%;" border height="393" selection-change="checkRightAll">
                    <el-table-column type="selection"></el-table-column>
                    <el-table-column prop="id" label="ID"></el-table-column>
                    <el-table-column prop="name" label="姓名"></el-table-column>
                    <el-table-column prop="age" label="年龄"></el-table-column>
                  </el-table>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>

    <script>
      new Vue({
        el: "#dynamic-component-demo",
        data: {
          searchParam: {},
          listArr: [
            { id: 1, name: "AAA", age: 1 },
            { id: 2, name: "BBB", age: 1 },
            { id: 3, name: "CCC", age: 1 },
            { id: 4, name: "DDD", age: 1 },
            { id: 5, name: "EEE", age: 1 },
            { id: 6, name: "FFF", age: 1 }
          ],
          selectArr: [],
          changeArr: [],
          leftData: [], // 左边选中列表数据
          rightData: [] // 右边选中列表数据
        },
        methods: {
          checkAll(val) {
            this.leftData = val;
          },
          checkRightAll(val) {
            this.rightData = val;
          },
          // 穿梭框选中
          handelSelect() {
            for (let i = 0; i < this.selectArr.length; i++) {
              for (let j = 0; j < this.leftData.length; j++) {
                if (this.leftData[j].id === this.selectArr[i].id) {
                  this.leftData = []; // 避免 左边勾选内容 leftData 与 右边内容 selectArr 重复
                }
              }
            }
            this.selectArr = this.handleConcatArr(
              this.selectArr,
              this.leftData
            );
            this.handleRemoveTabList(this.leftData, this.listArr);
            this.leftData = [];
          },
          // 穿梭框取消
          handleRemoveSelect() {
            this.listArr = this.handleConcatArr(this.listArr, this.rightData);
            this.handleRemoveTabList(this.rightData, this.selectArr);
            this.rightData = [];
          },
          handleConcatArr(selectArr, leftData) {
            let arr = [];
            arr = arr.concat(selectArr, leftData);
            return arr;
          },
          handleRemoveTabList(isNeedArr, originalArr) {
            if (isNeedArr.length && originalArr.length) {
              for (let i = 0; i < isNeedArr.length; i++) {
                for (let k = 0; k < originalArr.length; k++) {
                  if (isNeedArr[i]["id"] === originalArr[k]["id"]) {
                    originalArr.splice(k, 1);
                  }
                }
              }
            }
          }
        }
      });
    </script>
  </body>
</html>

领秀5858

关注

5
点赞
踩
8

收藏

觉得还不错? 一键收藏
2
评论
Transform 穿梭框组件重写，实现多列穿梭

官方组件：重写后：在线远行业务场景：基于element UI 15.6版本,Transform 穿梭框里穿梭内容只有一列勾选内容，能不能展示多列，以表格的形式进行勾选呢？需求分析：其实重头实现一个穿梭效果也不难，在el-table 表格的基础上，中间两个按钮的点击事件来动态改变左右两边表格的数据；功能实现：<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <t
复制链接

扫一扫