安装

npm install ele-tree-transfer -S

挂载方式

1、局部挂载

import { TreeTransfer } from "ele-tree-transfer";

export default {
  components: {
    TreeTransfer,
  },
}

2、全局挂载：

在 main.js 文件中加入代码：

import TreeTransfer from "ele-tree-transfer";

Vue.use(TreeTransfer);

快速启动

<template>
  <div id="app">
    <tree-transfer
      v-model="model"
      ref="treeTransfer"
      node-key="id"
      default-expand-all
      show-checkbox
      search
      showCheckAll
      showCheckNum
      nodeCheck
      :props="props"
      :data="data"
    >
      <!-- 自定义节点内容 -->
      <template #leftText="{ node }">
        <span>{{ node.label }}</span>
      </template>
      <template #rightText="{ node }">
        <span>{{ node.label }}</span>
      </template>
    </tree-transfer>
    <div class="buttons">
      <el-button @click="selected('left')">左侧全选</el-button>
      <el-button @click="cancel('left')">左侧反选</el-button>
      <el-button @click="selected('right')">右侧全选</el-button>
      <el-button @click="cancel('right')">右侧反选</el-button>
      <el-button @click="getValue">获取v-model绑定值</el-button>
      <el-button @click="empty">清空v-model</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      props: {
        label: "label",
        value: "id",
        children: "children",
        disabled: "disabled",
      },
      data: [
        {
          id: 1,
          label: "一级 1",
          children: [
            {
              id: 4,
              label: "二级 1-1",
            },
          ],
        },
        {
          id: 2,
          label: "一级 2",
          children: [
            {
              id: 5,
              label: "二级 2-1",
            },
            {
              id: 6,
              label: "二级 2-2",
            },
            {
              id: 20,
              label: "二级 2-3",
            },
          ],
        },
        {
          id: 3,
          label: "一级 3",
          children: [
            {
              id: 7,
              label: "二级 3-1",
            },
            {
              id: 8,
              label: "二级 3-2",
              disabled: false,
            },
          ],
        },
      ],
      model: [5, 6, 8],
    };
  },
  methods: {
    selected(loca) {
      this.$refs.treeTransfer.changeTreeChecked(true, loca);
    },
    cancel(loca) {
      this.$refs.treeTransfer.changeTreeChecked(false, loca);
    },
    move(flag) {
      this.$refs.treeTransfer[flag === "right" ? "rightMove" : "leftMove"]();
    },
    getValue() {
      console.log(this.model);
    },
    empty() {
      this.model = [];
    },
  },
};
</script>

<style scoped>
.buttons {
  margin-top: 10px;
}
</style>