如何将Vue组件加载到表格的:rows中？或实现表格筛选分页排序

一、在vue3-table-lite中嵌入自定义Vue组件 #

vue3-table-lite支持通过作用域插槽自定义列内容，无需将组件塞进:rows属性里，具体实现步骤如下：

1. 配置表格列定义，给需要渲染组件的列指定slotName
2. 使用<template v-slot:xxx>渲染你的FinishedButton组件

示例代码：

<template>
  <vue3-table-lite
    :columns="columns"
    :rows="todos"
    :is-pagination="true"
    :is-filter="true"
    :is-sort="true"
  >
    <!-- 自定义Action列的内容 -->
    <template v-slot:action="{ row }">
      <FinishedButton :todo="row" />
    </template>
  </vue3-table-lite>
</template>

<script setup>
import Vue3TableLite from 'vue3-table-lite'
import FinishedButton from './FinishedButton.vue'

// 你的待办数据
const todos = [/* 待办列表数据 */]

// 列配置，Action列指定插槽名称
const columns = [
  {
    label: 'Name',
    field: 'name',
    sortable: true
  },
  {
    label: 'Action',
    field: 'action', // 字段名可自定义，因为用插槽渲染
    slotName: 'action' // 指定对应插槽
  }
]
</script>

这样既保留了表格库的筛选、分页、排序功能，又能在列中嵌入你的自定义按钮组件。

二、不依赖表格库，自行实现筛选、分页、排序 #

如果不想用第三方库，可基于原有表格代码，通过计算属性和简单逻辑实现所需功能：

模板部分 #

<template>
  <!-- 筛选输入框 -->
  <input 
    type="text" 
    v-model="searchKeyword" 
    placeholder="搜索待办名称..."
    class="mb-3"
  >

  <!-- 表格主体 -->
  <table id="FOO" class="table table-hover table-sm">
    <thead>
      <tr>
        <!-- 可点击排序的表头 -->
        <th scope="col" @click="sortBy('name')">
          Name 
          <span v-if="sortKey === 'name'">
            {{ sortOrder === 'asc' ? '↑' : '↓' }}
          </span>
        </th>
        <th scope="col">Action</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="todo in paginatedTodos" :key="todo.id">
        <td>{{ todo.name }}</td>
        <td><FinishedButton :todo="todo" @delete="handleTodoDelete" /></td>
      </tr>
    </tbody>
  </table>

  <!-- 分页控件 -->
  <div class="mt-3">
    <button 
      :disabled="currentPage === 1" 
      @click="currentPage--"
      class="btn btn-sm btn-light"
    >上一页</button>
    <span class="mx-2">第 {{ currentPage }} / {{ totalPages }} 页</span>
    <button 
      :disabled="currentPage === totalPages" 
      @click="currentPage++"
      class="btn btn-sm btn-light"
    >下一页</button>
  </div>
</template>

脚本部分 #

<script setup>
import FinishedButton from './FinishedButton.vue'
import { ref, computed } from 'vue'

// 原始待办数据
const todos = ref([/* 你的待办列表数据 */])
// 筛选关键词
const searchKeyword = ref('')
// 排序配置
const sortKey = ref('name')
const sortOrder = ref('asc')
// 分页配置
const currentPage = ref(1)
const pageSize = ref(10) // 每页显示条数

// 筛选并排序后的待办列表
const filteredSortedTodos = computed(() => {
  let result = [...todos.value]

  // 筛选逻辑
  if (searchKeyword.value) {
    const keyword = searchKeyword.value.toLowerCase()
    result = result.filter(todo => todo.name.toLowerCase().includes(keyword))
  }

  // 排序逻辑
  result.sort((a, b) => {
    if (a[sortKey.value] < b[sortKey.value]) {
      return sortOrder.value === 'asc' ? -1 : 1
    }
    if (a[sortKey.value] > b[sortKey.value]) {
      return sortOrder.value === 'asc' ? 1 : -1
    }
    return 0
  })

  return result
})

// 分页后的待办列表
const paginatedTodos = computed(() => {
  const startIndex = (currentPage.value - 1) * pageSize.value
  return filteredSortedTodos.value.slice(startIndex, startIndex + pageSize.value)
})

// 总页数
const totalPages = computed(() => {
  return Math.ceil(filteredSortedTodos.value.length / pageSize.value) || 1
})

// 切换排序方式
const sortBy = (key) => {
  if (sortKey.value === key) {
    sortOrder.value = sortOrder.value === 'asc' ? 'desc' : 'asc'
  } else {
    sortKey.value = key
    sortOrder.value = 'asc'
  }
}

// 处理待办删除事件
const handleTodoDelete = (deletedTodo) => {
  todos.value = todos.value.filter(todo => todo.id !== deletedTodo.id)
  // 当前页数据为空时，自动回退上一页
  if (paginatedTodos.value.length === 0 && currentPage.value > 1) {
    currentPage.value--
  }
}
</script>

内容的提问来源于stack exchange，提问作者Christian