vue element 树形穿梭框 ----- 插件el-tree-transfer

npm install el-tree-transfer --save

<template>
<div>
    <tree-transfer
      :title="title"
      class="str"
      :from_data='fromData'
      :to_data='toData'
      :defaultProps="{label:'label'}"
      @add-btn='add'
      @remove-btn='remove'
      :mode='mode'
      height='500px'
      filter openAll>
    </tree-transfer>
  </div>
</template>
<script>
 import treeTransfer from 'el-tree-transfer'
export default {
  name: 'treeTransfer-list',
  components:{
    treeTransfer
  },
  data () {
    return {
      mode: "transfer", // transfer addressList
      fromData:[
        {
          id: "1",
          pid: 0,
          label: "一级 1",
          children: [
            {
              id: "1-1",
              pid: "1",
              label: "二级 1-1",
              disabled: true,
              children: []
            },
            {
              id: "1-2",
              pid: "1",
              label: "二级 1-2",
              children: [
                {
                  id: "1-2-1",
                  pid: "1-2",
                  children: [],
                  label: "二级 1-2-1"
                },
                {
                  id: "1-2-2",
                  pid: "1-2",
                  children: [],
                  label: "二级 1-2-2"
                }
              ]
            }
          ]
        },
      ],
      toData:[],
      title:['已选','未选']
    }
  },
  methods:{
    add(){},
    remove(){},
  },
}
</script>

<style lang="scss" scoped>
/deep/.transfer{
    .transfer-center{
     .transfer-center-item{
      .el-button--primary{
        border-radius: 8px !important;
        width: 80px;
      }
    }
  }
}
</style>

使用时要注意数据格式，详情文档点击这里