老师，页面中一个ref数组排序后用el-table显示，但用sortablejs拖拽后怎样再排序呢

Question

我的数据都是前台的不需后台修改后返回，就是说怎样在前台完成拖拽后排序呢

<template>
  <el-table ref="tableRef"
            :data="tableData"
            style="width: 100%;"
            header-cell-class-name="headClass"
            :default-sort="tableData.index"

  >
    <el-table-column prop="index" label="索引" width="100" />
    <el-table-column prop="name" label="属性名" width="180" />
    <el-table-column prop="detail" label="信息" />
  </el-table>
</template>

script setup>
import { defineProps, watch, ref, onMounted } from 'vue'
import { tableRef, initSortable } from '@/views/spu-modify/components/sortable'
const props = defineProps({
  property: {
    type: Array,
    required: true
  }
})
const tableData = ref([])
// 对传入的数据进行排序，数据数组中有一个index字段
const sortTableData = (val) => {
  tableData.value = val.sort((a, b) => {
    return a.index - b.index
  })
  console.log('000', tableData.value)
}

watch(() => [props.property],
  val => {
    console.log('有变化')
    if (val) {
      sortTableData(props.property)
    }
  })

onMounted(() => {
  initSortable(tableRef, moveProperty)
})

// 回调，修改tableData中的index字段
const moveProperty = (event) => {
    const { newIndex, oldIndex } = event
  if (newIndex === oldIndex) {
    return
  }
  const currentTableData = tableData.value
  if (newIndex < oldIndex) {
    currentTableData.forEach((item, key) => {
      if (key >= newIndex && key < oldIndex) {
        currentTableData[key].index = key + 2
        console.log(key, currentTableData[key])
      }
      if (key === oldIndex) {
        currentTableData[key].index = newIndex + 1
      }
    })
  }
  // 给tableData 重新排序 结果根预想的不一样
  // sortTableData(currentTableData)
}
</script>

Answer 1

Sunday 2022-01-16 15:03:27

你好

如果你不需要在服务端来完成排序的话，那么就需要在前端定义一些对应的算法。

当 拖拽事件被触发之后，我们可以获取到两个关键的属性：

const { newIndex, oldIndex } = event

其中 newindex 表示最新的位置，oldIndex 表示原始的位置.

那么你就可以根据这两个值,修改数据源中的 下标位置。

• 提问者 慕先生3223357 #1

  老师，如果用ref方式定义一个数组，拖拽就会出错，是什么原因呢？？？？
  const tableData = ref([{ name: 'aaaa', detail: 'aaaaaaaa' }, { name: 'bbbbb', detail: 'bbbbb' }, { name: 'accccaaa', detail: 'accccaaaaaaa' }])
  。。。
  
  onEnd: ({ newIndex, oldIndex }) => {
        const currRow = tableData.value.splice(oldIndex, 1)[0]
        tableData.value.splice(newIndex, 0, currRow)
        console.log(tableData.value)
      }