Ao_min 2021-11-16 09:29 采纳率: 55.6%
浏览 47
已结题

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

我用循环做了一个标签页选项卡,同时也想用循环做个标签页
https://img-mid.csdnimg.cn/release/static/image/mid/ask/162075369636129.jpg?x-oss-process=image/auto-orient,1
现在,我要从每个选项卡下的左边表格中选到数据放到右边的表格中,
https://img-mid.csdnimg.cn/release/static/image/mid/ask/613936369636155.png?x-oss-process=image/auto-orient,1
左边的表格数据减少一条,注意所有的选项卡的左边表格数据共用,意思就是假如图中阶段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>
 

求解决方法

  • 写回答

1条回答 默认 最新

  • 接着奏乐吧 2021-11-16 09:52
    关注

    addAll1() {
    this.itemes.forEach((d) => {
    this.chooseItemes.push(d);
    // removeAaary(this.itemes, d);
    });
    this.items=[] //-----------------------------
    },
    /* 认可项移除所有 */
    removeAll1() {
    this.chooseItems.forEach((d) => {
    this.items.push(d);

        });
       this.chooseItems=[]       //-----------------------------
      }
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

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

悬赏问题

  • ¥20 电脑鼠标键盘不好使了
  • ¥15 求糕手!用matlab求解目标规划模型🙏
  • ¥15 画出的分类图不对,求解答一下
  • ¥20 springboot和springcloud版本问题
  • ¥15 ps2手柄控制树莓派小车
  • ¥30 C#:vsto powerpoint的外接程序
  • ¥30 stata将do文件代码转化为ado文件
  • ¥15 两个同维数组相比,不同位置、出现重复比无意义,而不同位置、不出现重复比,则有意义。把有意义的两个数组放入新的集合MK中。
  • ¥15 可以远程电脑安装nvm
  • ¥15 写一个可直接调用的函数,将32位有符号数转成另一个无符号的数