q-table 拖曳排序

1. 安装 sortablejs:百度 sortablejs 安装

2. 注意设定 row-key, 使用插槽有 tr 标签的要另外给 tr 设定 key 值,不然有分页的时候会出问题

3. 范例:

<template>
  <div class="q-pa-md">
    <q-table id="app-themem-table" title="Treats" :data="data" :columns="columns" row-key="fat"
      :pagination.sync="pagination">
    </q-table>
  </div>
</template>
<script>
  import Sortable from 'sortablejs'
  export default {
    mounted() {
      this.rowDrop()
    },
    methods: {
      //行拖拽
      rowDrop() {
        let tbody = document.querySelector('#app-themem-table tbody')
        let that = this
        Sortable.create(tbody, {
          animation: 150,
          ghostClass: 'bg-primary',
          onEnd({
            oldIndex,
            newIndex
          }) {
            console.log(that.data)
            let page = that.pagination.page
            let rowsPerPage = that.pagination.rowsPerPage
            let oldRow = oldIndex + (rowsPerPage * (page - 1))
            let newRow = newIndex + (rowsPerPage * (page - 1))
            let currRow = that.data.splice(oldRow, 1)[0]
            that.data.splice(newRow, 0, currRow)
          },
        })
      }
    },
data() {
      return {
        columns: [{
            name: 'name',
            required: true,
            label: 'Dessert (100g serving)',
            align: 'left',
            field: row => row.name,
            format: val => `${val}`,
            sortable: true
          },
          {
            name: 'calories',
            align: 'center',
            label: 'Calories',
            field: 'calories',
            sortable: true
          },
          {
            name: 'fat',
            label: 'Fat (g)',
            field: 'fat',
            sortable: true
          }
        ],
        data: [{
            name: 'Frozen Yogurt',
            calories: 159,
            fat: 1,
            carbs: 24,
            protein: 4.0,
            sodium: 87,
            calcium: '14%',
            iron: '1%'
          },
          {
            name: 'Ice cream sandwich',
            calories: 237,
            fat: 2,
            carbs: 37,
            protein: 4.3,
            sodium: 129,
            calcium: '8%',
            iron: '1%'
          },
          {
            name: 'Eclair',
            calories: 262,
            fat: 3,
            carbs: 23,
            protein: 6.0,
            sodium: 337,
            calcium: '6%',
            iron: '7%'
          },
          {
            name: 'Cupcake',
            calories: 305,
            fat: 4,
            carbs: 67,
            protein: 4.3,
            sodium: 413,
            calcium: '3%',
            iron: '8%'
          },
          {
            name: 'Gingerbread',
            calories: 356,
            fat: 5,
            carbs: 49,
            protein: 3.9,
            sodium: 327,
            calcium: '7%',
            iron: '16%'
          },
          {
            name: 'Jelly bean',
            calories: 375,
            fat: 6,
            carbs: 94,
            protein: 0.0,
            sodium: 50,
            calcium: '0%',
            iron: '0%'
          },
          {
            name: 'Lollipop',
            calories: 392,
            fat: 7,
            carbs: 98,
            protein: 0,
            sodium: 38,
            calcium: '0%',
            iron: '2%'
          },
          {
            name: 'Honeycomb',
            calories: 408,
            fat: 8,
            carbs: 87,
            protein: 6.5,
            sodium: 562,
            calcium: '0%',
            iron: '45%'
          },
          {
            name: 'Donut',
            calories: 452,
            fat: 9,
            carbs: 51,
            protein: 4.9,
            sodium: 326,
            calcium: '2%',
            iron: '22%'
          },
          {
            name: 'KitKat',
            calories: 518,
            fat: 10,
            carbs: 65,
            protein: 7,
            sodium: 54,
            calcium: '12%',
            iron: '6%'
          }
        ]
      }
    }
  }

</script>