custom-transfer-tree

Project setup

pnpm install

Compiles and hot-reloads for development

pnpm run serve

Compiles and minifies for production

pnpm run build

Lints and fixes files

pnpm run lint

Customize configuration

See Configuration Reference.

组件使用

安装

element-plus 是需要的依赖

npm install element-plus custom-transfer-tree

引入

在 main.js 中：

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import CustomTransferTree from '../lib/custom-transfer-tree.umd.js'

const app = createApp(App)
app.use(ElementPlus)
app.use(CustomTransferTree)
app.mount('#app')

使用

在任意 .vue 文件中直接使用组件即可。下列是一个使用实例：

<template>
  <TransferTree v-model="transferSelected" :data="data" :titles="['请选择', '已选择']" :props="{
    key: 'id',
    label: 'dictName',
    children: 'childrenList'
  }" />
</template>

<script setup>
import { ref } from 'vue'

const data = ref([{
  "dictName": "1",
  "id": "1",
  "childrenList": [
    {
      "dictName": "2",
      "id": "2"
    },
    {
      "dictName": "3",
      "id": "3"
    },
    {
      "dictName": "4",
      "id": "4",
      childrenList: [
        { dictName: '6', id: '6' }
      ]
    }
  ]
},
{ dictName: '5', id: '5' }
])

const transferSelected = ref([])

const handleData = (data) => {
  data.forEach(item => {
    if (item.childrenList) {
      item.disabled = true
      handleData(item.childrenList)
    }
  })
}

handleData(data.value)
</script>