Demo

官方文档
录屏软件：screenToGif (将视频转为Gif，我认为简单又好操作)

我深知，文字的感知不如图片，图片的感知不如视频，所以希望在每一次的记录中，都有种收货与喜悦，虽然以前用过这个插件，相当强大的插件，但第一次从0到1，所以记录美好时刻~

在这里插入图片描述

所用属性

1.多列之间想要互相拖动

要有相同的name，如：name:'site'

2.多列直接想要拷贝，不移除

设定pull属性，如pull:'clone'

3.要想在列中不添加参数

设定put属性，如：put:false,我需要能够添加列信息，所以并没有使用此属性

以上完整写法：:group="{name:'site',pull:'clone',put:'false'}"

所遇困难

1.拖拽并不生效

以为是属性设定欠缺，但最后F12查看后发现，我的div并没有撑满整个父div,添加height:100%即可

2.当我使用Dropdown组件时，并不显示下拉

解决方案：移除官网中的< transition-group >,具体原因不知道，但移除后确实显示了下拉信息

3.当我想要列信息不要重复显示，使用new Set去重时

报错了：Computed property "setParamListC" was assigned to but it has no setter.，setParamListC是我第一个列所双向绑定的列
解决方案：是因为使用了v-model进行了数据修改，所以需要添加set方法

  computed: {setParamListC: {get () {return [...new Set(this.setParamList)]},set () { }},
}

本来是用监听setParamList来进行去重操作，但报错了，报错信息如下：
You may have an infinite update loop in watcher with expression "setParamLis，
说是可能会陷入死循环，于是乎灵机一动，用了计算属性（Computed）,具体为什么，不知道，有一种感觉可行，然后试了一下真的可以了。应该和新建一个参数重新赋值一样的吧。

源码

数据源（左侧列）

<div class="field"><div class="field-drag" v-if="isShowParamList"><!-- ,put:false --><draggable v-model="setParamListC" :group="{name:'site',pull:'clone'}" style="height:99%"><div class="field-item" v-for="(item) in setParamListC" :key="item">{{item}}</div></draggable></div><div class="dot" @click="isShowParamList=!isShowParamList"><Icon type="md-arrow-dropleft" /></div><!-- <draggable><div class="field-item" :key="index">{{item}}</div></draggable> -->
</div>
computed: {setParamListC: {get () {return [...new Set(this.setParamList)]},set () { }}
}

行，列代码相同，绑定参数不同

<FormItem label="行"><div class="row"><draggable group="site" v-model="rowParamList" class="site-flex" chosenClass="item"><Dropdown v-for="(item,index) in rowParamList" :key="`${item}${index}`" transfer trigger="click" @on-click="name=>dropDownClick(name,index,'row')"><div class="item"><Icon type="ios-arrow-down"></Icon>{{item}}</div><DropdownMenu slot="list"><Dropdown placement="left-start" transfer><DropdownItem><Icon type="ios-arrow-forward"></Icon>度量</DropdownItem><DropdownMenu slot="list"><DropdownItem :name="`${item}`">原值</DropdownItem><DropdownItem :name="`Count(${item})`">计数</DropdownItem></DropdownMenu></Dropdown></DropdownMenu></Dropdown></draggable></div>
</FormItem>