vue-draggable的多列拖动与拷贝拖拽(不删除源数据列)

vue-draggable的多列拖动与拷贝拖拽(不删除源数据列)

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>
  • 5
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值