功能介绍：

1 表格头自定义列。

2 表格头支持勾选功能，并且支持配置。通过配置显示或隐藏该功能

3 支持自定义样式和自定义操作。比如修改列数据内容样式，上图中年龄做了自定义的处理，点击某列内容可以自定义操作。

-------------------table 的核心代码-------------------------------<template><view class="table-container"><!-- 表格 --><view class="table"><!-- 表头 --><view class="table-header"><view v-if="canCheck" class="header-cell checkbox-cell"><checkbox-group @change="handleSelectAll"><checkbox :checked="isAllSelected" /></checkbox-group></view><viewv-for="(column, index) in columns":key="index"class="header-cell":style="{ width: column.width || 'auto' }">{{ column.title }}</view><view v-if="hasActions" class="header-cell actions-cell">操作</view></view><!-- 表格行 --><view class="table-body"><viewv-for="(row, rowIndex) in data":key="rowIndex"class="table-row":class="{ selected: selectedRows.includes(row) }"><!-- 复选框 --><view v-if="canCheck" class="body-cell checkbox-cell"><checkbox-group @change="(e) => handleSelectRow(row, e)"><checkbox :checked="selectedRows.includes(row)" /></checkbox-group></view><!-- 数据列 --><viewv-for="(column, colIndex) in columns":key="colIndex"class="body-cell":style="{ width: column.width || 'auto' }"><slot name="cell" :row="row" :column="column" :index="rowIndex"><!-- 默认渲染 -->{{ row[column.key] }}</slot></view><!-- 操作列 --><view v-if="hasActions" class="body-cell actions-cell"><slot name="actions" :row="row" :index="rowIndex"></slot></view></view></view></view><!-- 加载更多 --><view v-if="hasMore" class="load-more" @click="loadMore"><text>点击加载更多</text></view></view>
</template><script setup lang="ts">
import { ref, computed, useSlots } from 'vue'// 定义表格列接口
interface TableColumn {title: string // 列标题key: string // 列数据字段width?: string // 列宽度slot?: string
}// 定义表格数据接口
interface TableRow {[key: string]: any // 动态字段
}// 定义 props
const props = defineProps<{columns: TableColumn[] // 表格列配置data: TableRow[] // 表格数据canCheck?: boolean // 是否显示复选框hasMore?: boolean // 是否还有更多数据
}>()// 定义事件
const emit = defineEmits(['select-all', 'select-row', 'load-more'])// 获取插槽
const slots = useSlots()// 选中的行
const selectedRows = ref<TableRow[]>([])// 是否全选
const isAllSelected = computed(() => {return selectedRows.value.length === props.data.length
})// 是否有操作列
const hasActions = computed(() => {return !!slots.actions // 检查是否有 actions 插槽
})// 处理全选
const handleSelectAll = (e: any) => {if (e.detail.value.length > 0) {selectedRows.value = [...props.data]} else {selectedRows.value = []}emit('select-all', selectedRows.value)
}// 处理选择行
const handleSelectRow = (row: TableRow, e: any) => {if (e.detail.value.length > 0) {selectedRows.value.push(row)} else {selectedRows.value = selectedRows.value.filter((r) => r !== row)}emit('select-row', selectedRows.value)
}// 加载更多
const loadMore = () => {emit('load-more')
}
</script><style scoped>
.table-container {width: 100%;
}.table {width: 100%;border-collapse: collapse;
}.table-header,
.table-row {display: flex;align-items: center;border-bottom: 1px solid #eee;
}.header-cell,
.body-cell {padding: 10px;text-align: left;
}.checkbox-cell {width: 50px;text-align: center;
}.actions-cell {display: flex;justify-content: flex-end;
}.selected {background-color: #f0f0f0;
}.load-more {text-align: center;padding: 10px;color: #007aff;cursor: pointer;
}
</style>-------------------父组件中使用-------------------------------<Table:columns="columns":data="tableData":canCheck="true":hasMore="hasMore"@select-all="handleSelectAll"@select-row="handleSelectRow"@load-more="handleLoadMore"><template #cell="{ row, column }"><!-- 自定义 age 列 --><template v-if="column.key === 'age'"><view @click="test" :style="{ color: '#f00' }">{{ row.age }}</view></template><!-- 默认渲染 --><template v-else>{{ row[column.key] }}</template></template><!-- 操作列插槽 --><template #actions="{ row, index }"><button type="primary" size="mini" @click="handleDelete(row, index)">删除</button></template></Table><script setup>// 表格列配置
const columns = ref([{ title: '姓名', key: 'name', width: '40px' },{title: '年龄',key: 'age',width: '40px',slot: 'age'},{ title: '地址', key: 'address' }
])// 表格数据
const tableData = ref([{ name: '张三', age: 25, address: '北京市' },{ name: '李四', age: 30, address: '上海市' },{ name: '王五', age: 28, address: '广州市' }
])</script>