vue3使用element-tree-transfer

要在Vue3中使用Element Tree Transfer，需要先安装和引入Element和Vue3：

1. 安装Element和Vue3：

npm install element-plus vue@next

2. 在main.js中引入Element和Vue3：

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'

import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)

app.mount('#app')

3. 在组件中使用Element Tree Transfer：

<template>
  <el-tree-transfer
    :data="data"
    :titles="['Source', 'Target']"
    :render-content="renderContent"
    @change="handleChange"
  />
</template>

<script>
export default {
  data() {
    return {
      data: [
        {
          id: 1,
          label: 'Node 1',
          children: [
            {
              id: 2,
              label: 'Node 1-1'
            },
            {
              id: 3,
              label: 'Node 1-2'
            }
          ]
        },
        {
          id: 4,
          label: 'Node 2'
        },
        {
          id: 5,
          label: 'Node 3',
          children: [
            {
              id: 6,
              label: 'Node 3-1'
            }
          ]
        }
      ],
      selectedKeys: []
    }
  },
  methods: {
    renderContent(h, { node, data, store }) {
      return (
        <span class="custom-tree-node">
          <span>{node.label}</span>
          <span>
            <el-button size="mini" onClick={() => this.handleEdit(data)}>Edit</el-button>
          </span>
        </span>
      )
    },
    handleChange(targetKeys, direction, moveKeys) {
      console.log(targetKeys, direction, moveKeys)
    }
  }
}
</script>

在上面的例子中，我们创建了一个包含Tree Transfer的组件。我们定义了一个data属性，用于渲染树形结构。我们还定义了一个renderContent函数，用于自定义每个节点的内容。最后，我们定义了一个handleChange方法，用于处理转移事件。