Ao_min 2021-11-15 16:12 采纳率: 55.6%
浏览 122
已结题

基于vue+ele的标签选项卡中的穿梭框怎么实现

我用循环做了一个标签页选项卡,同时也想用循环做个标签页

img


现在,我要从每个选项卡下的左边表格中选到数据放到右边的表格中,

img


左边的表格数据减少一条,注意所有的选项卡的左边表格数据共用,意思就是假如图中阶段1选了认可项1,所有阶段的左边都没有认可项1,除了阶段1的其他阶段的右边的表格没选之前为空,但是现在左右两边数据都是共用的,请求解决方法
下方是我写的一个这个功能的小demo:

<template>
  <el-tabs type="border-card" @tab-click="handleClick">
    <el-tab-pane
      :label="item.classesName"
      v-for="(item, index) in stages"
      :key="index"
    >
      <div>
        <el-card shadow="never">
          <el-row :gutter="15">
            <el-col :md="12">
              <!-- 未选择的认可项表格 -->
              <ele-pro-table
                :datasource="itemes"
                :columns="columns1"
                sub-title="可选列:"
                height="240px"
                emptyText="已全部选择"
                :toolkit="[]"
                :needPage="false"
              >
                <template slot="toolkit">
                  <el-button size="mini" class="ele-btn-icon" @click="addAll1">
                    全部→
                  </el-button>
                </template>
                <template slot="action" slot-scope="{ row }">
                  <el-button size="mini" @click="add1(row)"></el-button>
                </template>
              </ele-pro-table>
            </el-col>
            <el-col :md="12">
              <!-- 已选择的认可项表格 -->
              <!-- v-for="(items, index1) in item.id" :key="index1" -->
              <ele-pro-table
                :datasource="chooseItemes"
                :columns="columns1"
                sub-title="结果列:"
                height="240px"
                emptyText="未选择认可项"
                :toolkit="[]"
                :needPage="false"
              >
                <template slot="toolkit">
                  <el-button
                    size="mini"
                    type="danger"
                    plain
                    class="ele-btn-icon"
                    @click="removeAll1"
                  >
                    全部←
                  </el-button>
                </template>
                <template slot="action" slot-scope="scope">
                  <el-button
                    type="danger"
                    plain
                    size="mini"
                    @click="remove1(scope.row)"
                    >←</el-button
                  >
                </template>
              </ele-pro-table>
            </el-col>
          </el-row>
        </el-card>
      </div>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
  export default {
    data() {
      return {
        stages: [
          { classesId: 1, classesName: '阶段1' },
          { classesId: 2, classesName: '阶段2' },
          { classesId: 3, classesName: '阶段3' },
          { classesId: 4, classesName: '阶段4' }
        ],
        //全部认可项
        itemes: [
          { classesId: 1, classesName: '认可项1', seletedName: '' },
          { classesId: 2, classesName: '认可项2', seletedName: '' },
          { classesId: 3, classesName: '认可项3', seletedName: '' },
          { classesId: 4, classesName: '认可项4', seletedName: '' },
          { classesId: 5, classesName: '认可项5', seletedName: '' },
          { classesId: 6, classesName: '认可项6', seletedName: '' }
        ],
        // 已选择的认可阶段
        chooseStages: [],
        // 已选择的认可项
        chooseItemes: [],
        //定义一个子源数据
        // chooseSourceData: [],
        // 表格列配置
        columns1: [
          {
            prop: 'classesName',
            label: '名称',
            showOverflowTooltip: true,
            minWidth: 180
          },
          {
            columnKey: 'action',
            label: '操作',
            width: 120,
            align: 'center',
            slot: 'action'
          }
        ]
      };
    },
    computed: {
      /* 未选择的认可阶段数据 */
      unStage() {
        // filter()返回的是满足条件的额数组
        return this.stages.filter((d) => this.chooseStages.indexOf(d) === -1);
      }
      /* 未选择的认可项数据 */
      // unApproved() {
      //   return this.itemes.filter((d) => this.chooseItemes.indexOf(d) === -1);
      // }
    },
    mounted() {
      this.chooseItemes = [];
      this.query();
    },
    methods: {
      query() {
        console.log('aa');
        console.log(this.chooseItemes);
        // console.log(this.itemes);
        this.itemes.forEach((item) => {
          item.seletedName = this.stages[0].classesName;
        });

        // ???????????????????????????????????????????????????????????
        for(let i = 0; i < this.stages.length; i++){
            console.log(this.stages[i])
            for(let j = 0; j < this.itemes.length; j++){
                console.log(this.itemes[j])
                for(let k = 0; k < this.chooseItemes.length; k++){
                    console.log(this.chooseItemes[k])
                }
            }
        }
        // ???????????????????????????????????????????????????????????
      },
      handleClick(tab) {
        console.log(tab.index);
        //选中哪个阶段
        let chooseData;
        chooseData = this.stages[tab.index]; //选择的阶段
        let aa = 'arr' + tab.index;
        console.log(aa);
        console.log(chooseData); //选择的阶段
        this.itemes.forEach((item) => {
          item.seletedName = chooseData.classesName;
        });
      },
      //数据排序
      classesId(a, b) {
        return a.classesId - b.classesId;
      },
      /* 认可项添加 */
      add1(row) {
        // this.chooseSourceData.push(row);
        removeAaary(this.itemes, row); //左边源数组数据删除数据
        this.chooseItemes.push(row); //右边添加数据
        this.chooseItemes.sort(this.classesId); //右边数据排序
        console.log('左边共用的总数据');
        console.log(this.itemes);
        console.log('右边被选中的数据');
        console.log(this.chooseItemes);
      },
      /* 认可项移除 */
      remove1(row) {
        this.chooseItemes.splice(this.chooseItemes.indexOf(row), 1); //右边移除数据
        this.itemes.push(row); //左边源数组数据添加删除的数据
        this.itemes.sort(this.classesId); //数据删除之后对整个数组数据进行排序
      },
      /* 认可项添加全部 */
      addAll1() {
        this.itemes.forEach((d) => {
          this.chooseItemes.push(d);
          // removeAaary(this.itemes, d);
        });
      },
      /* 认可项移除所有 */
      removeAll1() {
        this.chooseItemes.splice(0, this.chooseItemes.length);
      }
    }
  };
  //数组删除某个对象的方法
  /*删除数组中的某一个对象,_arr:数组,_obj:需删除的对象*/
  function removeAaary(_arr, _obj) {
    var length = _arr.length;
    for (var i = 0; i < length; i++) {
      if (_arr[i] == _obj) {
        if (i == 0) {
          _arr.shift(); //删除并返回数组的第一个元素
          return _arr;
        } else if (i == length - 1) {
          _arr.pop(); //删除并返回数组的最后一个元素
          return _arr;
        } else {
          _arr.splice(i, 1); //删除下标为i的元素
          return _arr;
        }
      }
    }
  }
</script>


求大家的帮助

  • 写回答

2条回答 默认 最新

  • ZionHH 2021-11-15 17:33
    关注
    data: { 
      // 用下面结构,记得要初始化一下,初始tab数量的空数组出来,要不然你选择tab时不是按顺序来的可能会有问题。
      // chooseData[this.curTabIdx].push(row)
      // 循环的地方记得循环当前索引下的数组
      chooseData: [
        [
          { classesId: 1, classesName: '认可项1', seletedName: '' }
        ],
        [],
        ...
      ],
      // 当前tab索引
      curTabIdx: 0
    }
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 11月24日
  • 已采纳回答 11月16日
  • 创建了问题 11月15日

悬赏问题

  • ¥30 seata使用出现报错,其他服务找不到seata
  • ¥35 引用csv数据文件(4列1800行),通过高斯-赛德尔法拟合曲线,在选取(每五十点取1点)数据,求该数据点的曲率中心。
  • ¥20 程序只发送0X01,串口助手显示不正确,配置看了没有问题115200-8-1-no,如何解决?
  • ¥15 Google speech command 数据集获取
  • ¥15 vue3+element-plus页面崩溃
  • ¥15 像这种代码要怎么跑起来?
  • ¥15 安卓C读取/dev/fastpipe屏幕像素数据
  • ¥15 pyqt5tools安装失败
  • ¥15 mmdetection
  • ¥15 nginx代理报502的错误