useTableSelection

表格选择管理 Composable。

使用方式

import { useTableSelection } from '@/composables'

const {
  selectedRows,
  selectedIds,
  handleSelectionChange,
  clearSelection
} = useTableSelection()

// 处理选择变化
function onSelectionChange(selection: any[]) {
  handleSelectionChange(selection)
}

// 获取选中的行
console.log(selectedRows.value)

// 获取选中的 ID
console.log(selectedIds.value)

// 清空选择
clearSelection()

API

名称	类型	说明
selectedRows	Ref<Array>	选中的行数据
selectedIds	Ref<Array>	选中的 ID 数组
handleSelectionChange	(selection: Array) => void	处理选择变化
clearSelection	() => void	清空选择

示例

<template>
  <el-table
    :data="tableData"
    @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" />
    <el-table-column prop="name" label="姓名" />
  </el-table>

  <div>已选择 {{ selectedRows.length }} 条</div>
  <el-button @click="clearSelection">清空选择</el-button>
</template>

<script setup lang="ts">
import { useTableSelection } from '@/composables'

const {
  selectedRows,
  handleSelectionChange,
  clearSelection
} = useTableSelection()

const tableData = ref([])
</script>