行选择

<script setup lang="tsx">
import type {
  RowSelectionState } from '@tanstack/vue-table'
import {
  FlexRender,
  getCoreRowModel,
  useVueTable,
  createColumnHelper
} from '@tanstack/vue-table'
import { ref } from 'vue'

import IndeterminateCheckbox from './IndeterminateCheckbox.vue'
import type { Person } from './makeData'
import { makeData } from './makeData'

const columnHelper = createColumnHelper<Person>()

const columns = [
  {// 选择列定义
    id: 'select',
    header: ({ table }: { table: any }) => {
      // 紧随 return 之后的 ( 和 ) 不是函数调用，它们是 JSX 表达式的分组括号
      // 这意味着函数返回了一个 JSX 元素。如果括号内部是空的，就像 return () 这样，那它会尝试返回一个空的 JSX 片段
      return (
        <IndeterminateCheckbox
          checked={table.getIsAllRowsSelected()}
          indeterminate={table.getIsSomeRowsSelected()}
          onChange={table.getToggleAllRowsSelectedHandler()}
        >
        </IndeterminateCheckbox>
      )
    },
    cell: ({ row }: { row: any }) => {
      return (
        <div className="px-1">
          <IndeterminateCheckbox
            checked={row.getIsSelected()}
            disabled={!row.getCanSelect()}
            onChange={row.getToggleSelectedHandler()}
          >
          </IndeterminateCheckbox>
        </div>
      )
    }
  },
  columnHelper.group({
    header: 'Name',
    footer: props => props.column.id,
    columns: [
      columnHelper.accessor('firstName', {
        cell: info => info.getValue(),
        footer: props => props.column.id
      }),
      columnHelper.accessor(row => row.lastName, {
        id: 'lastName',
        cell: info => info.getValue(),
        header: () => 'Last Name',
        footer: props => props.column.id
      })
    ]
  }),
  columnHelper.group({
    header: 'Info',
    footer: props => props.column.id,
    columns: [
      columnHelper.accessor('age', {
        header: () => 'Age',
        footer: props => props.column.id
      }),
      columnHelper.group({
        header: 'More Info',
        columns: [
          columnHelper.accessor('visits', {
            header: () => 'Visits',
            footer: props => props.column.id
          }),
          columnHelper.accessor('status', {
            header: 'Status',
            footer: props => props.column.id
          }),
          columnHelper.accessor('progress', {
            header: 'Profile Progress',
            footer: props => props.column.id
          })
        ]
      })
    ]
  })
]

const data = ref(makeData(10))

// 创建用于存储行选择状态的响应式变量
// RowSelectionState 是一个对象，键为行ID，值为布尔值表示是否选中
const rowSelection = ref<RowSelectionState>({})

// 重新生成数据的函数，用新的10条模拟数据替换现有数据
const rerender = () => {
  data.value = makeData(10)
}

const table = useVueTable({
  get data() {
    return data.value
  },
  columns,
  // 表格状态配置
  state: {
    // 行选择状态 getter，返回当前的行选择状态
    get rowSelection() {
      return rowSelection.value
    }
  },
  enableRowSelection: true, // enable row selection for all rows
  // enableRowSelection: row => row.original.age > 18, // or enable row selection conditionally per row
  // 行选择状态变化时的回调函数
  onRowSelectionChange: (updateOrValue) => {
    // 如果 updateOrValue 是函数，则调用该函数传入当前行选择状态
    // 否则直接使用 updateOrValue 值更新行选择状态
    rowSelection.value
      = typeof updateOrValue === 'function'
        ? updateOrValue(rowSelection.value)
        : updateOrValue
  },
  // 获取核心行模型的函数
  getCoreRowModel: getCoreRowModel()
})
</script>

<template>
  <div class="p-2">
    <table>
      <thead>
        <tr
          v-for="headerGroup in table.getHeaderGroups()"
          :key="headerGroup.id"
        >
          <th
            v-for="header in headerGroup.headers"
            :key="header.id"
            :colSpan="header.colSpan"
          >
            <FlexRender
              v-if="!header.isPlaceholder"
              :render="header.column.columnDef.header"
              :props="header.getContext()"
            />
          </th>
        </tr>
      </thead>
      <tbody>
        <tr
          v-for="row in table.getRowModel().rows"
          :key="row.id"
        >
          <td
            v-for="cell in row.getVisibleCells()"
            :key="cell.id"
          >
            <FlexRender
              :render="cell.column.columnDef.cell"
              :props="cell.getContext()"
            />
          </td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td className="p-1">
            <IndeterminateCheckbox
              :checked="table.getIsAllPageRowsSelected()"
              :indeterminate="table.getIsSomePageRowsSelected()"
              :on-change="table.getToggleAllPageRowsSelectedHandler()"
            />
          </td>
          <!-- 页脚跨列 -->
          <td :colSpan="20">
            Page Rows {{ table.getRowModel().rows.length }}
          </td>
        </tr>
      </tfoot>
    </table>
    <div class="h-4" />
    <button
      class="border p-2"
      @click="rerender"
    >
      Rerender
    </button>
  </div>
</template>

<style>
html {
  font-family: sans-serif;
  font-size: 14px;
}

table {
  border: 1px solid lightgray;
}

tbody {
  border-bottom: 1px solid lightgray;
}

th {
  border-bottom: 1px solid lightgray;
  border-right: 1px solid lightgray;
  padding: 2px 4px;
}

tfoot {
  color: gray;
}

tfoot th {
  font-weight: normal;
}
</style>