el-transfer 穿梭框

最新推荐文章于 2024-08-13 18:02:46 发布

咔布哩

最新推荐文章于 2024-08-13 18:02:46 发布

阅读量824

点赞数 1

分类专栏： ElementUI 文章标签： elementui vue.js javascript

本文链接：https://blog.csdn.net/royya_buli/article/details/124715241

版权

ElementUI 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这篇博客详细介绍了如何在Vue.js应用中使用Element UI库的穿梭框组件(Transfer)。通过示例代码展示了如何初始化数据，监听转移变化，并在用户选择后保存选中项。文章还包含了组件的样式设置和事件处理，如对话框的显示与隐藏、数据的获取与渲染等。

摘要由CSDN通过智能技术生成

效果图如下：

代码如下：

<el-dialog title="下级选择"
      :visible.sync="chooseUser"
      width="60%"
      center>
        <div style="text-align: center;">
          <el-transfer
            ref="roleTransfer"
            style="text-align: left; display: inline-block;height:500px"
            v-model="Selected"
            filterable
            :titles="['可选人员', '已选人员']"
            :format="{
              noChecked: '${total}',
              hasChecked: '${checked}/${total}'
            }"
            @change="handleChange"
            :data="datalist">
            <span slot-scope="{ option }">{{ option.label }}</span>
          </el-transfer>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="reBack()" style="margin:0px 30px 0px 30px">返回</el-button>
          <el-button type="success" @click="saveChoose()">保存</el-button>
        </span>
      </el-dialog>

获取穿梭框列表，渲染到页面：

choose(id){
      this.chooseUser = true
      this.chooseId = id
      setTimeout(async () => {
          let params = {
            roleId:id
          };
          let res = await req.post("/accountLogin/select", params)
          console.log("ress",res.t)
          let data = [];
            let allData = res.t;
            this.Selected = JSON.parse(allData.Selected)
            allData.Optional.forEach((member, index) => {
              data.push({
                label: member.name,
                key:  member.id,
                id: member.id,
              });
            });
          this.datalist = data
          console.log("this.data",this.datalist)
        }, 200);
    },

Methods：

handleChange(val, direction, movedKeys) { //当前变化的值 ， 穿梭框左右方向 
      console.log(val, direction, movedKeys)
      console.log("val",val)
      this.selectUser = val
      if (direction === "right") {
        movedKeys.forEach((key) => {
          let index = this.leftvalue.findIndex((item) => item === key);
          this.leftvalue.splice(index, 1);
        });
        movedKeys.forEach((key) => {
          this.rightvalue.push(key);
        });
      } else {
        movedKeys.forEach((key) => {
          let index = this.rightvalue.findIndex((item) => item === key);
          this.rightvalue.splice(index, 1);
        });
        movedKeys.forEach((key) => {
          this.leftvalue.push(key);
        });
      }
      console.log("this.leftvalue",this.leftvalue);
      console.log("this.rightvalue",this.rightvalue);
    },

将val的值用一个变量存起来，点击保存，将存放val的变量通过接口传过去