vue 后台返回的列表重新按某字段来重新排序

比如Vue中按金额排序列表,可以使用sort()方法结合自定义的排序函数。下面是一个示例:

首先,在你的Vue组件中,定义一个待排序的列表数据和一个方法来对该列表进行排序:

data() {
  return {
    items: [
      { name: 'Item 1', amount: 100 },
      { name: 'Item 2', amount: 50 },
      { name: 'Item 3', amount: 200 }
      // 其他项...
    ]
  };
},
methods: {
  sortByAmount() {
    this.items.sort((a, b) => a.amount - b.amount);
  }
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue.js 实现列表重新排序的拖拽功能,可以使用 `v-for` 指令结合自定义指令 `v-draggable` 来实现。 首先,需要为每个列表项添加一个自定义指令 `v-draggable`,该指令绑定一个值为 `true` 的布尔属性,表示该元素可以被拖拽。在该指令,需要监听 `mousedown`、`mousemove` 和 `mouseup` 事件,以实现拖拽功能。具体可以参考以下代码: ```html <div v-for="(item, index) in list" v-draggable="true" @dragstart="handleDragStart(index)" @dragover="handleDragOver(index)" @dragend="handleDragEnd(index)"> <!-- 列表项的内容 --> </div> ``` 其,`handleDragStart` 方法会在拖拽开始时被调用,该方法会将当前拖拽的元素的索引保存在组件的状态;`handleDragOver` 方法会在拖拽时被调用,该方法会根据鼠标所在位置计算出当前元素应该被插入的位置,并更新组件的状态;`handleDragEnd` 方法会在拖拽结束时被调用,该方法会将保存在组件状态的索引清空。 接下来,可以在模板使用 `v-for` 指令对列表进行渲染,同时根据组件的状态来动态更新列表项的位置。具体可以参考以下代码: ```html <div v-for="(item, index) in list" :style="{ transform: `translateY(${translateY[index]}px)` }"> <!-- 列表项的内容 --> </div> ``` 其,`translateY` 数组保存了每个列表项应该被移动的距离,根据该数组来动态更新列表项的位置。 最后,还需要在自定义指令设置 `draggable` 属性为 `false`,以防止浏览器默认的拖拽行为。具体可以参考以下代码: ```js Vue.directive('draggable', { bind(el, binding) { el.setAttribute('draggable', binding.value) el.addEventListener('mousedown', (e) => { // 拖拽开始 // ... }) el.addEventListener('mousemove', (e) => { // 拖拽 // ... }) el.addEventListener('mouseup', (e) => { // 拖拽结束 // ... }) }, update(el, binding) { el.setAttribute('draggable', binding.value) } }) ``` 这样,就可以实现列表重新排序的拖拽功能了。完整代码可以参考以下链接:https://codesandbox.io/s/vue-draggable-list-px5q2

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值