1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<template>
  <el-dialog
    v-dialogDrag
    :close-on-click-modal="false"
    :title="title"
    :visible.sync="visible"
    append-to-body="true"
    class="avue-dialog"
    style="text-align: center"
    width="50%"
    @close="dialogClose">
    <el-transfer
      v-model="rightRoleData"
      v-loading="loading"
      :data="data"
      :filter-method="filterMethod"
      :render-content="renderFunc"
      :titles="transferTitle"
      filter-placeholder="关键词搜索"
      filterable
      style="text-align: left; display: inline-block;">
    </el-transfer>
    <div slot="footer" class="dialog-footer">
      <div class="valueInfo" v-if="bottomValue">已设置的值为：[{{bottomValue}}]</div>
      <el-button @click="visible = false" size="small">取 消</el-button>
      <el-button type="primary" @click="sendHandler" size="small">确 定</el-button>
    </div>
  </el-dialog>
</template>
 
<script>
export default {
  name: "transfer",
  props: ['title', 'leftRoleData', 'rightRoleData', 'transferTitle' , 'bottomValue'],
  data() {
    return {
      visible: false, // 通过 this.$refs.transfer.visible = true; 开启子组件对话框
      data: [],
      loading: false,
      filterMethod(query, item) {
        return item.label.indexOf(query) > -1;
      },
      renderFunc(h, option) {
        return <span><i class="el-icon-s-custom"></i> {option.label}</span>;
      }
    }
  },
  watch: {
    //渲染穿梭框
    leftRoleData: {
      handler(newval) {
        if (newval) {
          // 清空data数组
          this.data = [];
          newval.forEach((item) => {
            this.data.push({
              label: item.name,
              key: item.oid,
            });
          });
          this.loading = false;
        }
      }
    },
  },
  created() {
    this.loading = true;
  },
  methods: {
    dialogClose() {
      this.visible = false;
      this.data = [];
      this.leftRoleData = [];
    },
    sendHandler() {
      this.$emit('transferSend', this.rightRoleData);
      this.visible = false;
    },
  }
}
</script>
 
<style lang="scss" scoped>
/deep/ .el-transfer-panel {
  height: 450px; /* 左右两个穿梭框的高度和宽度 */
  width: 300px;
}
 
/deep/ .el-transfer-panel__list.is-filterable {
  height: 323px; /* 穿梭框列表高度 */
}
.valueInfo{
  float: left;
  border: 1px solid #E9E7E7;
  display: inline-block;
  vertical-align: middle;
  padding: 6px 12px;
  line-height: 1;
}
</style>