Vue3 Setup Naive UI n-data-table 清空排序和选中状态

要清空 n-data-table 的排序和选中状态，可以通过操作数据和调用相关方法来实现。

1. 清空排序状态

   • 如果你使用的是远程排序，可以通过修改排序参数来清空排序状态。
   • 如果你使用的是本地排序，可以将数据重新排序为初始状态。

2. 清空选中状态

   • 如果有单选功能，可以将选中的数据项设置为 null 或者空数组。
   • 如果有多选功能，可以将选中的数据项数组设置为空数组。

下面是一个示例代码，演示如何清空 n-data-table 的排序和选中状态：

<template>
  <n-data-table
    :data='tableData'
    :columns='tableColumns'
    :sort-method='sortData'
    :selected-row-keys='selectedRows'
    :selection='tableSelection'
  >
    <!-- 其他代码 -->
  </n-data-table>
</template>

<script>
import { ref, reactive } from 'vue'

export default {
  setup() {
    const tableData = ref([
      // 表格数据
    ])

    const tableColumns = ref([
      // 表格列配置
    ])

    const selectedRows = ref([])

    const sortData = (data, sort) => {
      // 排序方法
      // 修改排序参数，清空排序状态
      // 或者重新排序数据为初始状态
    }

    const tableSelection = reactive({
      // 表格选择配置
      // 具体配置根据你的需求来设置
      onSelect(selected, row) {
        // 单选
        if (selected) {
          selectedRows.value = [row]
        } else {
          selectedRows.value = []
        }
      },
      onSelectAll(selected, rows) {
        // 多选
        if (selected) {
          selectedRows.value = rows
        } else {
          selectedRows.value = []
        }
      }
    })

    // 其他代码

    return {
      tableData,
      tableColumns,
      selectedRows,
      sortData,
      tableSelection
    }
  }
}
</script>

根据你的具体需求，可以根据示例中的注释来修改代码。