el-tree-transfer-vue3

简介

现在还是个人测试版 el-tree-fransfer-vue3 是一个基于 VUE3 和 elementPlus 的树形穿梭框组件，使用前请确认已经引入element-plus！此组件功能类似于element-plus的transfer组件，但是里面的数据是树形结构！实际上，el-tree-transfer 依赖的 element-plus 组件分别是Checkbox 多选框，Button 按钮，和最主要的Tree 树形控件写成！参考了借鉴 vue2 版本el-tree-transfer(https://www.npmjs.com/package/el-tree-transfer)

快速上手

先 npm 下载插件

npm install el-tree-transfer-vue3 --save

或

npm i el-tree-transfer-vue3 -S

然后你可以像使用普通组件一样使用 el-tree-transfer

   <template>
  <div class="text-tree-transfer">
    <ElTreeTransferCom
      width="800px"
      height="500px"
      from_title="测试"
      to_title="到测试"
      v-model:from_data="fromData"
      v-model:to_data="toData"
      @addBtn="addBtn"
      @removeBtn="removeBtn"
    />
  </div>
</template>
<script lang='ts' setup>
import { ref } from 'vue'
import ElTreeTransferCom from 'el-tree-transfer-vue3'
import 'el-tree-transfer-vue3/dist/style.css'
import { transferData } from './data'
const fromData = ref(transferData.ruleInfo.diff)
const toData = ref(transferData.ruleInfo.auth)
const addBtn = (v: any) => {
  // console.error(v)
  fromData.value = v
}
const removeBtn = (v: any) => {
  // console.error("to", v)
  toData.value = v
}
</script>

<style lang="scss">
</style>

目前还不是很完善

MannixHu/el-tree-transfer-vue3

el-tree-transfer-vue3

简介

快速上手