做了一个关于element-ui Select选择器和element-ui Transfer 穿梭框联动关系的一个页面，在这边记录一下！，还有许多的问题没有解决！！！

最新推荐文章于 2023-05-29 00:37:21 发布

爱发呆的程序员

最新推荐文章于 2023-05-29 00:37:21 发布

阅读量1.2k

点赞数

文章标签： vue.js javascript less html5

本文链接：https://blog.csdn.net/tinglis/article/details/107255218

版权

做了一个关于element-ui Select选择器和element-ui Transfer 穿梭框联动关系的一个页面，在这边记录一下！

首先我拿到项目的时候一直在思考这个页面接口的数据结构！，想破脑袋我都没有想出来，难搞哦！因为后台还没有给接口，接口也可能还没有写好，所以，我只能自己先想象了！做完之后发现还存在许多问题：1、穿梭到绑定人员后，数据没有保存！ 2、数据穿梭后未绑定的数据消失了，移动到了绑定额数据中，我的想法是，穿梭到绑定框的时候，未绑定框的数据不会消失，改变一下颜色就好了！希望大佬可以给我点意见和指导！！！

我做的页面是这样的，
在这里插入图片描述

前2个选择器的话，我是通过嵌套数组完成的

shouquan: [
        {
          id: "1",
          label: "菜单"
        },
        {
          id: "2",
          label: "设备",
          xiangmu: [
            {
              id: "1",
              label: "项目1"
            },
            {
              id: "2",
              label: "项目2"
            },
            {
              id: "3",
              label: "项目3"
            }
          ]
        }
      ],
      value: "",
      value1: "",

最后一个选择器

  options: [
        {
          id: "1",
          label: "用户1",
          bangding: [1, 3]
        },
        {
          id: "2",
          label: "用户2",
          bangding: [0]
        }
      ],
      value2: "",

言归正传：我们先导入选择器和穿梭框！

<template>
<div>
  <header>
    <span>
      <a>授权类型:</a>
      <el-select v-model="value" placeholder="请选择" @change="gradeChange">
        <el-option v-for="item in shouquan" :key="item.id" :label="item.label" :value="item.id"></el-option>
      </el-select>
    </span>
    <span>
      <a v-show="dispy">所属项目:</a>
      <el-select v-show="dispy" v-model="value1" placeholder="请选择" @change="gradeChange1">
        <el-option
          v-for="item in shouquan[1].xiangmu"
          :key="item.id"
          :label="item.label"
          :value="item.id"
        ></el-option>
      </el-select>
    </span>
    <span>
      <a>人员:</a>
      <el-select v-model="value2" placeholder="请选择" @change="gradeChange2">
        <el-option v-for="item in options" :key="item.id" :label="item.label" :value="item.id"></el-option>
      </el-select>
    </span>
  </header>
  <body>
    <span>
      <el-transfer
        style="text-align: left; display: inline-block "
        v-model="value4"
        filterable
        :left-default-checked="[]"
        :right-default-checked="[]"
        :titles="['未绑定', '绑定']"
        :button-texts="[]"
        :format="{
        noChecked: '${total}',
        hasChecked: '${checked}/${total}'
        }"
        @change="handleChange"
        :data="search(name)"
      >
        <span slot-scope="{ option }">{{ option.key }} - {{ option.label }}</span>
      </el-transfer>
    </span>
  </body>
</div>
</template>

接下来就是方法了：

<script>
export default {
  data() {
    const generateData = _ => {
      const data = [];
      const cities = [
        "菜单0",
        "菜单-项目1",
        "菜单1",
        "菜单-项目2",
        "菜单2",
        "菜单-项目3",
        "菜单3"
      ];
      cities.forEach((city, index) => {
        data.push({
          label: city,
          key: index
        });
      });
      return data;
    };
    return {
      data: generateData(),
      value4: [],
      renderFunc(h, option) {
        return (
          <span>
            {option.key} - {option.label}
          </span>
        );
      },
      dispy: false,
      name:"",
      shouquan: [
        {
          id: "1",
          label: "菜单"
        },
        {
          id: "2",
          label: "设备",
          xiangmu: [
            {
              id: "1",
              label: "项目1"
            },
            {
              id: "2",
              label: "项目2"
            },
            {
              id: "3",
              label: "项目3"
            }
          ]
        }
      ],
      options: [
        {
          id: "1",
          label: "用户1",
          bangding: [1, 3]
        },
        {
          id: "2",
          label: "用户2",
          bangding: [0]
        }
      ],
      value: "",
      value1: "",
      value2: "",
    };
  },

  methods: {
    gradeChange(value) {
      console.log(value);
      if (this.value == 1) {
        this.name = this.shouquan[0].label;
        this.dispy = false;
        this.value1 = "";
      } else {
        this.dispy = true;
        this.name = this.shouquan[1].label;
      }
    },
    gradeChange1(value1) {
      console.log(value1)
      for(var i =0 ;i < this.shouquan[1].xiangmu.length; i++){
        if(this.value1  == this.shouquan[1].xiangmu[i].id){
          this.name = this.shouquan[1].xiangmu[i].label;
        }
      }
    },
    gradeChange2(value2) {
      for (var i = 0; i < this.options.length; i++) {
        if (value2 == this.options[i].id) {
          this.value4 = this.options[i].bangding;
        }
      }
    },
    search(name) {
      return this.data.filter(item => {
        if (item.label.includes(name)) {
          return item;
        }
      });
    },
    handleChange(value, direction, movedKeys) {
      if (this.value2 == "") {
        this.$confirm("请选择授权的人员");
      }
    }
  }
};
</script>

我还改了一些样式：

<style scoped lang="less" scoped>
.transfer-footer {
  margin-left: 20px;
  padding: 6px 5px;
}
span {
  margin-left: 20px;
}

/deep/.el-button + .el-button {
  margin-left: 0px !important;
}

/deep/ .el-button {
  display: block !important;
  border-radius: 30%;
}
/deep/.el-transfer__button i,
.el-transfer__button span {
  font-size: 20px !important;
}
</style>