el-transfer

 

<template>
  <div class="p-box">
    <el-transfer
      class="new-el-transfer"
      filterable
      filter-placeholder="请输入组织名称"
      v-model="value"
      :data="dataListzz"
      :titles="['待选择组织分组', '已选择组织分组']"
      :props="{
        key: 'orgIndexCode',
        label: 'orgName',
      }"
      @change="leftselection"
    >
    </el-transfer>
  </div>
</template>
<script>
import paging from "../../components/paging";
import popup from "../../components/popup";
import { orglist } from "@/api/accesstoDoor.js";

// 弹窗
export default {
  components: { paging, popup },
  data() {
    return {
      value: [],
      modal: false,
      title: "",
      id: "",
      orglistform: {
        orgIndexCodes: "",
        orgName: "",
        pageNo: 1,
        pageSize: 999,
        parentOrgIndexCodes: "",
        subOrg: "",
      },
      dataListzz: [],
      total: 0,
    };
  },
  watch: {
    modal(val) {
      if (!val) {
        // this.$refs.ruleForm.resetFields();
        // this.ruleForm.remind = null;
        // this.addressName = null;
        // this.fileLists = [];
        // this.fileList = [];
      }
    },
  },
  filters: {},
  mounted() {},
  created() {
    this._orglist();
  },
  methods: {
    show(type, id) {
      this.modal = true;
      //   this.disadledsubmit = false;
      //   // this.deviceListTypes();
      //   this.dictionaryListDictItems();
      //   this.dictionaryListDictItems1();

      //   this.editOradd = type;
      //   //2是编辑  1是新增
      if (type == 2) {
        this.id = id;
        this.title = "编辑人员分组";
      } else {
        this.id = null;
        this.title = "添加人员分组";
      }
    },
    _orglist() {
      orglist(this.orglistform).then((res) => {
        console.log("resorg", res);
        let d = res.data;
        if (d.code == "00000") {
          this.dataListzz = d.data.list || [];
          this.total = d.data.total;
        }
      });
    },
    leftselection(v) {
      this.$emit("yxorgList", v);
    },
  },
  destroyed() {},
};
</script>
<style lang="less" scoped>
.p-box {
  height: 400px;
  .new-el-transfer {
    width: 100%;
    height: 100%;
    /deep/ .el-transfer-panel {
      height: 100%;
      width: 40%;
    }
    /deep/ .el-transfer-panel__body {
      height: 332px;
    }
    /deep/ .el-checkbox-group {
      height: 282px;
    }
  }
}
</style>