配合后端有个orderNumber的排序
1 引用vueDraggable组件2主要关注orderNum的改变3给后端传值是传改变项的iid和orderNum<template><div class="approvalStyle"><draggle v-model="draggleList" @end="end" @start="start"><transition-group><di
·
1 引用vueDraggable组件
2 主要关注orderNum的改变
3 给后端传值是传 改变项的iid和orderNum
<template>
<div class="approvalStyle">
<draggle v-model="draggleList" @end="end" @start="start">
<transition-group>
<div class="listStyle" v-for="item in draggleList" :key="item.value">{{ item.name
}}</div>
</transition-group>
</draggle>
</div>
</template>
<script>
import draggle from 'vuedraggable'
export default {
name: 'JMapApprovalMessage',
components: {
draggle
},
data () {
return {
// 最后要传给后端的数据
changDragg: [],
tempArr: [],
draggleList: [
{
name: 'caltaLog',
value: '1',
orderNum: '1'
},
{
name: 'implelist',
value: '2',
orderNum: '2'
},
{
name: 'coming',
value: '3',
orderNum: '3'
}
],
}
},
created () {
//先把原先数据的orderNum 暂存
this.draggleList.map(item => {
this.tempArr.push(item.orderNum)
})
this.tempArr.sort((a, b) => a - b)
console.log(this.tempArr)
},
methods: {
start (e) {
console.log(e, 'start')
},
// 拖拽完成后的事件
end (e) {
this.draggleList.map((item, index) => {
if (item.orderNum !== this.tempArr[index]) {
item.orderNum = this.tempArr[index]
this.changDragg.map((element, j) => {
if (item.key === element.key) {
this.tempArr.splice(j - 1)
}
})
this.changDragg.push(item)
}
})
console.log(this.draggleList)
console.log(this.changDragg, 'mydraggleList')
}
}
}
</script>
<style lang="less" scoped>
.approvalStyle{
.listStyle{
font-size: 16px;
padding: 20px;
background: #fff;
width:300px;
border:1px solid #efefef;
}
}
</style>
更多推荐
已为社区贡献5条内容
所有评论(0)