tricker65535
tricker65535
采纳率0%
2021-02-27 20:11

使用vuedraggable实现列表的拖拽排序，点击列表上的图标对列表进行处理操作

1、使用vuedraggable实现列表的拖拽排序

2、列表项的右侧有两个icon图标，点击弹出element-ui中的dialog对话框，左图标是重新编辑，右图标是删除功能

问题：如何在点击span的时候获取当前点击li的下标

<vue-draggable
    v-model: listData
    :move="onMove"
    @start="isDragging = true"
    @end="draggableEnd"
>
    <transition-group type="transition" tag="ul">
        <li v-for="(item, index) in listData" :key="index">
            <p>
                {{显示的文字}}
            </p>
            <div>
                <span class="iconfont icon-bainjixiugai" @click="updateClick"></span>
                <span class="iconfont icon-shanchu"></span>
            </div>
        </li>
    </transition-group>
</vue-draggable>
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

1条回答

  • weixin_43551840 我爱吃西瓜喵 1月前
    <vue-draggable
    v-model: listData
    :move="onMove"
    @start="isDragging = true"
    @end="draggableEnd"
>
    <transition-group type="transition" tag="ul">
        <li v-for="(item, index) in listData" :key="index">
            <p>
                {{显示的文字}}
            </p>
            <div>
                <span class="iconfont icon-bainjixiugai" @click="updateClick(item,index)"></span>
                <span class="iconfont icon-shanchu" @click="deleteClick(item,index)"></span>
            </div>
        </li>
    </transition-group>
</vue-draggable>
    点赞 评论 复制链接分享
提交

为你推荐