gpt4 book ai didi

vue.js - 如何通过拖动行来重新排序 Vuetify 数据表中的项目?

转载 作者:行者123 更新时间:2023-12-04 12:12:30 27 4
gpt4 key购买 nike

我正在为客户开发 Vuetify Web 应用程序,她希望能够通过拖放行来调整数据表中显示元素的顺序,但 Vuetify 文档没有解释如何做到这一点;我该怎么做?

最佳答案

这是我使用的 CodePen:https://codepen.io/NathanWailes/pen/rNLajYO
它用:

  • Vue 2.x
  • Vuetify 2.3.13
  • Sortable 1.10.2(所以如果你还没有它,你需要安装/导入它)

  • 它基于 this GitHub issue 中的答案.
    这是代码:
    <div id="app">
    <v-app>
    <v-data-table
    :headers="headers"
    :items="desserts"
    v-sortable-data-table
    @sorted="saveOrder"
    item-key="name"
    ></v-data-table>
    </v-app>
    </div>

    new Vue({
    el: '#app',
    vuetify: new Vuetify(),
    data () {
    return {
    headers: [
    {
    text: 'Dessert',
    align: 'start',
    sortable: false,
    value: 'name',
    },
    ],
    desserts: [
    {
    name: 'Frozen Yogurt',
    },
    {
    name: 'Ice cream sandwich',
    },
    {
    name: 'Eclair',
    },
    {
    name: 'Cupcake',
    },
    {
    name: 'Gingerbread',
    },
    ],
    }
    },
    methods: {
    saveOrder (event) {
    const movedItem = this.desserts.splice(event.oldIndex, 1)[0];
    this.desserts.splice(event.newIndex, 0, movedItem);
    }
    },
    directives: {
    sortableDataTable: {
    bind (el, binding, vnode) {
    const options = {
    animation: 150,
    onUpdate: function (event) {
    vnode.child.$emit('sorted', event)
    }
    }
    Sortable.create(el.getElementsByTagName('tbody')[0], options)
    }
    }
    },
    })

    关于vue.js - 如何通过拖动行来重新排序 Vuetify 数据表中的项目?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64272786/

    27 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com