基于Vue實(shí)現(xiàn)樹形穿梭框的示例代碼

更新時(shí)間：2022年04月21日 15:50:32 作者：秦浩鋮

這篇文章主要為大家介紹了如何利用Vue實(shí)現(xiàn)一個(gè)樹形穿梭框，elementUI和ant-d組件庫的穿梭框組件效果都不是很好，所以本文將利用一個(gè)新的插件來實(shí)現(xiàn)，需要的可以參考一下

Vue 項(xiàng)目里面需要一個(gè)樹形的穿梭框，但是 elementUI 和 ant-d 組件庫的穿梭框組件效果都不是很好，因?yàn)樵戳斜砗湍繕?biāo)列表都是需要樹形結(jié)構(gòu)的，所以說這個(gè)就很難搞，但是也不怕，因?yàn)榇罄刑嗔?，有插件可以提供給我們使用，接下來介紹一下這個(gè)插件。

樹形穿梭框插件

el-tree-transfer

這個(gè)插件很好的實(shí)現(xiàn)了vue項(xiàng)目樹形穿梭框的功能。

安裝鏈接

上面的連接是npm插件地址，安裝步驟也很簡(jiǎn)單。

npm install el-tree-transfer --save

或者

npm i el-tree-transfer -S

然后就在需要使用穿梭框的地方像普通組件一樣使用就可以了。

    <template>
      <div>
        // 你的代碼
        ...
        // 使用樹形穿梭框組件
        <tree-transfer :title="title" :from_data='fromData' :to_data='toData' :defaultProps="{label:'label'}" @add-btn='add' @remove-btn='remove' :mode='mode' height='540px' filter openAll>
      </tree-transfer>
      </div>
    </template>

    <script>
      import treeTransfer from 'el-tree-transfer' // 引入

      export defult {
        data(){
          return:{
            mode: "transfer", // transfer addressList
            fromData:[
              {
                id: "1",
                pid: 0,
                label: "一級(jí) 1",
                children: [
                  {
                    id: "1-1",
                    pid: "1",
                    label: "二級(jí) 1-1",
                    disabled: true,
                    children: []
                  },
                  {
                    id: "1-2",
                    pid: "1",
                    label: "二級(jí) 1-2",
                    children: [
                      {
                        id: "1-2-1",
                        pid: "1-2",
                        children: [],
                        label: "二級(jí) 1-2-1"
                      },
                      {
                        id: "1-2-2",
                        pid: "1-2",
                        children: [],
                        label: "二級(jí) 1-2-2"
                      }
                    ]
                  }
                ]
              },
            ],
            toData:[]
          }
        },
        methods:{
          // 切換模式 現(xiàn)有樹形穿梭框模式transfer 和通訊錄模式addressList
          changeMode() {
            if (this.mode == "transfer") {
              this.mode = "addressList";
            } else {
              this.mode = "transfer";
            }
          },
          // 監(jiān)聽穿梭框組件添加
          add(fromData,toData,obj){
            // 樹形穿梭框模式transfer時(shí)，返回參數(shù)為左側(cè)樹移動(dòng)后數(shù)據(jù)、右側(cè)樹移動(dòng)后數(shù)據(jù)、移動(dòng)的{keys,nodes,halfKeys,halfNodes}對(duì)象
            // 通訊錄模式addressList時(shí)，返回參數(shù)為右側(cè)收件人列表、右側(cè)抄送人列表、右側(cè)密送人列表
            console.log("fromData:", fromData);
            console.log("toData:", toData);
            console.log("obj:", obj);
          },
          // 監(jiān)聽穿梭框組件移除
          remove(fromData,toData,obj){
            // 樹形穿梭框模式transfer時(shí)，返回參數(shù)為左側(cè)樹移動(dòng)后數(shù)據(jù)、右側(cè)樹移動(dòng)后數(shù)據(jù)、移動(dòng)的{keys,nodes,halfKeys,halfNodes}對(duì)象
            // 通訊錄模式addressList時(shí)，返回參數(shù)為右側(cè)收件人列表、右側(cè)抄送人列表、右側(cè)密送人列表
            console.log("fromData:", fromData);
            console.log("toData:", toData);
            console.log("obj:", obj);
          }
        },
        components:{ treeTransfer } // 注冊(cè)
      }
    </script>

    <style>
    ...
    </style>

效果展示