admin/wot-design-uni
1
0
Fork 0
mirror of https://gitee.com/wot-design-uni/wot-design-uni.git synced 2025-12-07 01:28:30 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: ✨ Table 支持设置不固定表头 (#769)

Browse Source
This commit is contained in:
不如摸鱼去 2024-12-08 23:50:11 +08:00 committed by GitHub
parent 97c40047e8
commit b0a2461a1a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 185 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
docs/component/table.md
View File

@ -2,6 +2,10 @@
用于展示多条结构类似的数据， 可对数据进行排序等操作。 用于展示多条结构类似的数据， 可对数据进行排序等操作。
::: warning 提示
`$LOWEST_VERSION$`后取消了`height`的默认值，需要自行设置，最好设置为`number`类型，方便未来适配虚拟列表。
:::
## 基础用法 ## 基础用法
通过`data`设置表格数据。 通过`data`设置表格数据。
@ -9,7 +13,7 @@
::: details 基础用法 ::: details 基础用法
```html ```html
<wd-table :data="dataList"> <wd-table :data="dataList" :height="400">
<wd-table-col prop="name" label="姓名"></wd-table-col> <wd-table-col prop="name" label="姓名"></wd-table-col>
<wd-table-col prop="school" label="求学之所"></wd-table-col> <wd-table-col prop="school" label="求学之所"></wd-table-col>
<wd-table-col prop="major" label="专业"></wd-table-col> <wd-table-col prop="major" label="专业"></wd-table-col>
@ -46,7 +50,7 @@ const dataList = reactive([
::: :::
```html ```html
<wd-table :data="dataList"> <wd-table :data="dataList" :height="400">
<wd-table-col prop="name" label="姓名" fixed></wd-table-col> <wd-table-col prop="name" label="姓名" fixed></wd-table-col>
<wd-table-col prop="school" label="求学之所"></wd-table-col> <wd-table-col prop="school" label="求学之所"></wd-table-col>
<wd-table-col prop="major" label="专业"></wd-table-col> <wd-table-col prop="major" label="专业"></wd-table-col>
@ -58,7 +62,7 @@ const dataList = reactive([
通过`index`设置表格是否显示序号列，默认为`false`。同时也可以传入对象对序号列进行配置，参数同`TableColumnProps` 通过`index`设置表格是否显示序号列，默认为`false`。同时也可以传入对象对序号列进行配置，参数同`TableColumnProps`
```html ```html
<wd-table :data="dataList" height="328px" :index="true"> <wd-table :data="dataList" height="328px" :index="true" :height="400">
<wd-table-col prop="name" label="姓名" sortable></wd-table-col> <wd-table-col prop="name" label="姓名" sortable></wd-table-col>
<wd-table-col prop="grade" label="分数" sortable></wd-table-col> <wd-table-col prop="grade" label="分数" sortable></wd-table-col>
<wd-table-col prop="hobby" label="一言以蔽之" sortable :width="160"></wd-table-col> <wd-table-col prop="hobby" label="一言以蔽之" sortable :width="160"></wd-table-col>
@ -76,7 +80,7 @@ const dataList = reactive([
通过`stripe`设置表格是否展示斑马纹，默认`true`。 通过`stripe`设置表格是否展示斑马纹，默认`true`。
```html ```html
<wd-table :data="dataList" :stripe="false"> <wd-table :data="dataList" :stripe="false" :height="400">
<wd-table-col prop="name" label="姓名"></wd-table-col> <wd-table-col prop="name" label="姓名"></wd-table-col>
<wd-table-col prop="school" label="求学之所"></wd-table-col> <wd-table-col prop="school" label="求学之所"></wd-table-col>
<wd-table-col prop="major" label="专业"></wd-table-col> <wd-table-col prop="major" label="专业"></wd-table-col>
@ -88,7 +92,7 @@ const dataList = reactive([
通过`border`设置表格是否展示边框，默认`true`。 通过`border`设置表格是否展示边框，默认`true`。
```html ```html
<wd-table :data="dataList" :border="false"> <wd-table :data="dataList" :border="false" :height="400">
<wd-table-col prop="name" label="姓名"></wd-table-col> <wd-table-col prop="name" label="姓名"></wd-table-col>
<wd-table-col prop="school" label="求学之所"></wd-table-col> <wd-table-col prop="school" label="求学之所"></wd-table-col>
<wd-table-col prop="major" label="专业"></wd-table-col> <wd-table-col prop="major" label="专业"></wd-table-col>
@ -97,10 +101,10 @@ const dataList = reactive([
## 表格高度 ## 表格高度
通过`height`设置表格高度，默认为`80vh`。 通过`height`设置表格高度，设置高度后会自动固定表头。
```html ```html
<wd-table :data="dataList" height="328px"> <wd-table :data="dataList" :height="400">
<wd-table-col prop="name" label="姓名"></wd-table-col> <wd-table-col prop="name" label="姓名"></wd-table-col>
<wd-table-col prop="school" label="求学之所"></wd-table-col> <wd-table-col prop="school" label="求学之所"></wd-table-col>
<wd-table-col prop="major" label="专业"></wd-table-col> <wd-table-col prop="major" label="专业"></wd-table-col>
@ -112,7 +116,7 @@ const dataList = reactive([
当存在列参与排序时，点击会触发`sort-method`排序事件。 当存在列参与排序时，点击会触发`sort-method`排序事件。
```html ```html
<wd-table :data="dataList" @sort-method="handleSort"> <wd-table :data="dataList" @sort-method="handleSort" :height="400">
<wd-table-col prop="name" label="姓名"></wd-table-col> <wd-table-col prop="name" label="姓名"></wd-table-col>
<wd-table-col prop="school" label="求学之所" sortable></wd-table-col> <wd-table-col prop="school" label="求学之所" sortable></wd-table-col>
<wd-table-col prop="major" label="专业"></wd-table-col> <wd-table-col prop="major" label="专业"></wd-table-col>
@ -133,7 +137,7 @@ function handleSort(e) {
::: details 查看自定义列模版 demo ::: details 查看自定义列模版 demo
```html ```html
<wd-table :data="dataList" @sort-method="handleSort"> <wd-table :data="dataList" @sort-method="handleSort" :height="400">
<wd-table-col prop="name" label="姓名" fixed="true" width="320rpx" sortable></wd-table-col> <wd-table-col prop="name" label="姓名" fixed="true" width="320rpx" sortable></wd-table-col>
<wd-table-col prop="grade" label="分数" width="220rpx" sortable> <wd-table-col prop="grade" label="分数" width="220rpx" sortable>
<template #value="{row}"> <template #value="{row}">
@ -248,13 +252,16 @@ function handleSort(e) {
::: :::
## 结合分页器使用 ## 不固定表头结合分页器使用
使用`pagination`组件，通过`v-model`绑定分页器当前页码，通过`total`设置分页器总条数，实现分页加载效果。 使用`pagination`组件，通过`v-model`绑定分页器当前页码，通过`total`设置分页器总条数，实现分页加载效果。
::: details 查看结合分页器使用demo 设置`fixed-header`为`false`，取消固定表头。
::: details 查看结合分页器使用 demo
```html ```html
<wd-table :data="paginationData" height="auto"> <wd-table :data="paginationData" :height="400" :fixed-header="false">
<wd-table-col prop="name" label="姓名" fixed align="center"></wd-table-col> <wd-table-col prop="name" label="姓名" fixed align="center"></wd-table-col>
<wd-table-col prop="grade" label="分数" fixed align="center"></wd-table-col> <wd-table-col prop="grade" label="分数" fixed align="center"></wd-table-col>
<wd-table-col prop="hobby" label="一言以蔽之" :width="160"></wd-table-col> <wd-table-col prop="hobby" label="一言以蔽之" :width="160"></wd-table-col>
@ -439,20 +446,22 @@ const paginationData = computed(() => {
return dataList.value.slice((page.value - 1) * pageSize.value, page.value * pageSize.value) return dataList.value.slice((page.value - 1) * pageSize.value, page.value * pageSize.value)
}) })
``` ```
::: :::
## Attributes ## Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 | | 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
| ---------- | --------------------------------------------------- | ---------------------------- | ------ | ------ | -------- | | --------------- | --------------------------------------------------- | ---------------------------- | ------ | ------ | ---------------- |
| data | 显示的数据 | Array | - | - | 0.0.39 | | data | 显示的数据 | Array | - | - | 0.0.39 |
| border | 是否带有边框 | boolean | - | true | 0.0.39 | | border | 是否带有边框 | boolean | - | true | 0.0.39 |
| stripe | 是否为斑马纹表 | boolean | - | true | 0.0.39 | | stripe | 是否为斑马纹表 | boolean | - | true | 0.0.39 |
| height | Table 的高度，默认为`80vh` | string | - | `80vh` | 0.0.39 | | height | Table 的高度，无默认值，设置后自动开启固定表头。 | `number / string` | - | - | 0.0.39 |
| rowHeight | 行高 | `number / string` | - | 50 | 0.0.39 | | rowHeight | 行高 | `number / string` | - | 50 | 0.0.39 |
| showHeader | 是否显示表头 | boolean | - | true | 0.0.39 | | showHeader | 是否显示表头 | boolean | - | true | 0.0.39 |
| ellipsis | 是否超出 2 行隐藏 | boolean | - | true | 0.0.39 | | ellipsis | 是否超出 2 行隐藏 | boolean | - | true | 0.0.39 |
| index | 是否显示索引列，可传入`boolean`也可传入 column 配置 | `boolean / TableColumnProps` | | false | 1.2.19 | | index | 是否显示索引列，可传入`boolean`也可传入 column 配置 | `boolean / TableColumnProps` | | false | 1.2.19 |
| fixed-header | 是否固定表头，需要结合`height`才可以实现固定表头的效果。 | boolean | - | true | $LOWEST_VERSION$ |
## Events ## Events

18
src/pages/table/Index.vue
View File

@ -1,35 +1,35 @@
<template> <template>
<page-wraper> <page-wraper>
<demo-block title="基本用法"> <demo-block title="基本用法">
<wd-table :data="dataList" @sort-method="handleSort" height="328px" @row-click="handleRowClick"> <wd-table :data="dataList" @sort-method="handleSort" :height="400" @row-click="handleRowClick">
<wd-table-col prop="name" label="姓名" align="center" width="50%"></wd-table-col> <wd-table-col prop="name" label="姓名" align="center" width="50%"></wd-table-col>
<wd-table-col prop="grade" label="分数" align="center" width="50%"></wd-table-col> <wd-table-col prop="grade" label="分数" align="center" width="50%"></wd-table-col>
</wd-table> </wd-table>
</demo-block> </demo-block>
<demo-block title="无边框"> <demo-block title="无边框">
<wd-table :data="dataList" @sort-method="handleSort" height="328px" :border="false" @row-click="handleRowClick"> <wd-table :data="dataList" @sort-method="handleSort" :height="400" :border="false" @row-click="handleRowClick">
<wd-table-col prop="name" label="姓名" align="center" width="50%"></wd-table-col> <wd-table-col prop="name" label="姓名" align="center" width="50%"></wd-table-col>
<wd-table-col prop="grade" label="分数" align="center" width="50%"></wd-table-col> <wd-table-col prop="grade" label="分数" align="center" width="50%"></wd-table-col>
</wd-table> </wd-table>
</demo-block> </demo-block>
<demo-block title="无斑马纹"> <demo-block title="无斑马纹">
<wd-table :data="dataList" @sort-method="handleSort" height="328px" :stripe="false" @row-click="handleRowClick"> <wd-table :data="dataList" @sort-method="handleSort" :height="400" :stripe="false" @row-click="handleRowClick">
<wd-table-col prop="name" label="姓名" align="center" width="50%"></wd-table-col> <wd-table-col prop="name" label="姓名" align="center" width="50%"></wd-table-col>
<wd-table-col prop="grade" label="分数" align="center" width="50%"></wd-table-col> <wd-table-col prop="grade" label="分数" align="center" width="50%"></wd-table-col>
</wd-table> </wd-table>
</demo-block> </demo-block>
<demo-block title="不展示表头"> <demo-block title="不展示表头">
<wd-table :data="dataList" @sort-method="handleSort" height="328px" :show-header="false" @row-click="handleRowClick"> <wd-table :data="dataList" @sort-method="handleSort" :height="400" :show-header="false" @row-click="handleRowClick">
<wd-table-col prop="name" label="姓名" align="center" width="50%"></wd-table-col> <wd-table-col prop="name" label="姓名" align="center" width="50%"></wd-table-col>
<wd-table-col prop="grade" label="分数" align="center" width="50%"></wd-table-col> <wd-table-col prop="grade" label="分数" align="center" width="50%"></wd-table-col>
</wd-table> </wd-table>
</demo-block> </demo-block>
<demo-block title="固定列"> <demo-block title="固定列">
<wd-table :data="dataList" @sort-method="handleSort" @row-click="handleRowClick" height="328px"> <wd-table :data="dataList" @sort-method="handleSort" @row-click="handleRowClick" :height="400">
<wd-table-col prop="name" label="姓名" fixed sortable align="center"></wd-table-col> <wd-table-col prop="name" label="姓名" fixed sortable align="center"></wd-table-col>
<wd-table-col prop="grade" label="分数" fixed sortable align="center"></wd-table-col> <wd-table-col prop="grade" label="分数" fixed sortable align="center"></wd-table-col>
<wd-table-col prop="hobby" label="一言以蔽之" sortable :width="160"></wd-table-col> <wd-table-col prop="hobby" label="一言以蔽之" sortable :width="160"></wd-table-col>
@ -40,7 +40,7 @@
</demo-block> </demo-block>
<demo-block title="显示索引"> <demo-block title="显示索引">
<wd-table :data="dataList" height="328px" @sort-method="handleSort" :index="{ align: 'center' }"> <wd-table :data="dataList" :height="400" @sort-method="handleSort" :index="{ align: 'center' }">
<wd-table-col prop="name" label="姓名" sortable align="center"></wd-table-col> <wd-table-col prop="name" label="姓名" sortable align="center"></wd-table-col>
<wd-table-col prop="grade" label="分数" sortable align="center"></wd-table-col> <wd-table-col prop="grade" label="分数" sortable align="center"></wd-table-col>
<wd-table-col prop="hobby" label="一言以蔽之" sortable :width="160"></wd-table-col> <wd-table-col prop="hobby" label="一言以蔽之" sortable :width="160"></wd-table-col>
@ -51,7 +51,7 @@
</demo-block> </demo-block>
<demo-block title="自定义列模板"> <demo-block title="自定义列模板">
<wd-table :data="dataList" @sort-method="handleSort" @row-click="handleRowClick" height="328px"> <wd-table :data="dataList" @sort-method="handleSort" @row-click="handleRowClick" :height="400">
<wd-table-col prop="name" label="姓名" fixed sortable align="center"></wd-table-col> <wd-table-col prop="name" label="姓名" fixed sortable align="center"></wd-table-col>
<wd-table-col prop="grade" label="分数" fixed sortable align="center"> <wd-table-col prop="grade" label="分数" fixed sortable align="center">
<template #value="{ row }"> <template #value="{ row }">
@ -69,8 +69,8 @@
</wd-table> </wd-table>
</demo-block> </demo-block>
<demo-block title="结合分页器"> <demo-block title="不固定表头结合分页器">
<wd-table :data="paginationData" height="auto"> <wd-table :data="paginationData" :fixed-header="false">
<wd-table-col prop="name" label="姓名" fixed align="center"></wd-table-col> <wd-table-col prop="name" label="姓名" fixed align="center"></wd-table-col>
<wd-table-col prop="grade" label="分数" fixed align="center"></wd-table-col> <wd-table-col prop="grade" label="分数" fixed align="center"></wd-table-col>
<wd-table-col prop="hobby" label="一言以蔽之" :width="160"></wd-table-col> <wd-table-col prop="hobby" label="一言以蔽之" :width="160"></wd-table-col>

6
src/uni_modules/wot-design-uni/components/wd-table-col/wd-table-col.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<view <view
:class="`wd-table-col ${fixed ? 'wd-table-col--fixed' : ''} ${isLastFixed && isDef(table) && table.scrollLeft ? 'is-shadow' : ''}`" :class="`wd-table-col ${fixed ? 'wd-table-col--fixed' : ''} ${isLastFixed && isDef(table) && table.state.scrollLeft ? 'is-shadow' : ''}`"
:style="columnStyle" :style="columnStyle"
> >
<view <view
@ -27,7 +27,7 @@ export default {
} }
</script> </script>
<script lang="ts" setup> <script lang="ts" setup>
import { type CSSProperties, computed, ref, watch } from 'vue' import { type CSSProperties, computed, ref } from 'vue'
import { addUnit, isDef, objToStyle, isOdd, isFunction } from '../common/util' import { addUnit, isDef, objToStyle, isOdd, isFunction } from '../common/util'
import { tableColumnProps, type SortDirection } from './types' import { tableColumnProps, type SortDirection } from './types'
import { useParent } from '../composables/useParent' import { useParent } from '../composables/useParent'
@ -100,7 +100,7 @@ const columnStyle = computed(() => {
*/ */
const cellStyle = computed(() => { const cellStyle = computed(() => {
let style: CSSProperties = {} let style: CSSProperties = {}
const rowHeight: string | number = isDef(table) ? table.props.rowHeight : '80rpx' // 自定义行高 const rowHeight: string | number = isDef(table) ? table.props.rowHeight : 50 // 自定义行高
if (isDef(rowHeight)) { if (isDef(rowHeight)) {
style['height'] = addUnit(rowHeight) style['height'] = addUnit(rowHeight)
} }

27
src/uni_modules/wot-design-uni/components/wd-table/index.scss
View File

@ -43,7 +43,6 @@
border: 1px solid $-table-border-color; border: 1px solid $-table-border-color;
} }
:deep() { :deep() {
.wd-table-col:last-child { .wd-table-col:last-child {
.wd-table__cell { .wd-table__cell {
@ -72,6 +71,12 @@
@include e(content) { @include e(content) {
display: flex; display: flex;
@include m(header) {
position: sticky;
top: 0;
z-index: 2
}
} }
@include e(cell) { @include e(cell) {
@ -127,6 +132,26 @@
} }
} }
@include e(wrapper) {
width: 100%;
overflow: auto;
}
@include e(inner) {
display: flex;
flex-direction: column;
}
@include e(header-row) {
display: flex;
flex-direction: row;
width: 100%;
}
@include e(body) {
display: flex;
width: 100%;
}
@include e(value) { @include e(value) {
@include when(ellipsis) { @include when(ellipsis) {

15
src/uni_modules/wot-design-uni/components/wd-table/types.ts
View File

@ -1,14 +1,14 @@
/* /*
* @Author: weisheng * @Author: weisheng
* @Date: 2024-03-15 11:36:12 * @Date: 2024-03-15 11:36:12
* @LastEditTime: 2024-07-18 19:02:32 * @LastEditTime: 2024-12-08 23:22:26
* @LastEditors: weisheng * @LastEditors: weisheng
* @Description: * @Description:
* @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-table\types.ts * @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/wd-table/types.ts
* 记得注释 * 记得注释
*/ */
import type { CSSProperties, ExtractPropTypes, InjectionKey } from 'vue' import type { CSSProperties, ExtractPropTypes, InjectionKey } from 'vue'
import { baseProps, makeBooleanProp, makeNumericProp, makeRequiredProp, makeStringProp } from '../common/props' import { baseProps, makeBooleanProp, makeNumericProp, makeRequiredProp, numericProp } from '../common/props'
import type { TableColumnProps } from '../wd-table-col/types' import type { TableColumnProps } from '../wd-table-col/types'
import type { PropType } from 'vue' import type { PropType } from 'vue'
@ -29,7 +29,7 @@ export const tableProps = {
/** /**
* Table 的高度 * Table 的高度
*/ */
height: makeStringProp('80vh'), height: numericProp,
/** /**
* 行高 * 行高
*/ */
@ -48,14 +48,17 @@ export const tableProps = {
index: { index: {
type: [Object, Boolean] as PropType<boolean | Omit<Partial<TableColumnProps>, 'prop'>>, type: [Object, Boolean] as PropType<boolean | Omit<Partial<TableColumnProps>, 'prop'>>,
default: false default: false
} },
fixedHeader: makeBooleanProp(true)
} }
export type TableProps = ExtractPropTypes<typeof tableProps> export type TableProps = ExtractPropTypes<typeof tableProps>
export type TableProvide = { export type TableProvide = {
props: Omit<TableProps, 'index' | 'customStyle' | 'customClass'> props: Omit<TableProps, 'index' | 'customStyle' | 'customClass'>
scrollLeft: number state: {
scrollLeft: number
}
rowClick: (index: number) => void rowClick: (index: number) => void
getIsLastFixed: (column: { fixed: boolean; prop: string }) => boolean getIsLastFixed: (column: { fixed: boolean; prop: string }) => boolean
getFixedStyle: (index: number, style: CSSProperties) => CSSProperties getFixedStyle: (index: number, style: CSSProperties) => CSSProperties

173
src/uni_modules/wot-design-uni/components/wd-table/wd-table.vue
View File

@ -1,61 +1,109 @@
<template> <template>
<view :class="`wd-table ${border ? 'is-border' : ''} ${customClass}`" :style="tableStyle"> <view :class="`wd-table ${border ? 'is-border' : ''} ${customClass}`" :style="tableStyle">
<scroll-view <template v-if="fixedHeader">
:enable-flex="true" <scroll-view
:throttle="false" :enable-flex="true"
:scrollLeft="reactiveState.scrollLeft" :throttle="false"
:scroll-x="true" :scrollLeft="state.scrollLeft"
class="wd-table__header" :scroll-x="true"
@scroll="scroll" class="wd-table__header"
v-if="showHeader" @scroll="scroll"
> v-if="showHeader"
<view id="table-header" class="wd-table__content" :style="realWidthStyle" style="position: sticky; top: 0; z-index: 2"> >
<view <view id="table-header" class="wd-table__content wd-table__content--header" :style="realWidthStyle">
:class="`wd-table__cell ${border ? 'is-border' : ''} ${column.fixed ? 'is-fixed' : ''} ${stripe ? 'is-stripe' : ''} is-${column.align} ${ <view
getIsLastFixed(column) && reactiveState.scrollLeft ? 'is-shadow' : '' :class="`wd-table__cell ${border ? 'is-border' : ''} ${column.fixed ? 'is-fixed' : ''} ${stripe ? 'is-stripe' : ''} is-${column.align} ${
}`" getIsLastFixed(column) && state.scrollLeft ? 'is-shadow' : ''
:style="getCellStyle(index)" }`"
v-for="(column, index) in children" :style="getCellStyle(index)"
:key="index" v-for="(column, index) in children"
> :key="index"
<wd-sort-button >
v-model="column.$.exposed!.sortDirection.value" <wd-sort-button
allow-reset v-model="column.$.exposed!.sortDirection.value"
:line="false" allow-reset
:title="column.label" :line="false"
@change="({ value }) => handleSortChange(value, index)" :title="column.label"
v-if="column.sortable" @change="({ value }) => handleSortChange(value, index)"
/> v-if="column.sortable"
<text v-else :class="`wd-table__value ${ellipsis ? 'is-ellipsis' : ''}`">{{ column.label }}</text> />
<text v-else :class="`wd-table__value ${ellipsis ? 'is-ellipsis' : ''}`">{{ column.label }}</text>
</view>
</view> </view>
</view> </scroll-view>
</scroll-view> <scroll-view
<scroll-view class="wd-table__body"
class="wd-table__body" :style="bodyStyle"
:style="bodyStyle" :enable-flex="true"
:enable-flex="true" :throttle="false"
:throttle="false" :scroll-x="true"
:scroll-x="true" @scroll="scroll"
@scroll="scroll" :scrollLeft="state.scrollLeft"
:scrollLeft="reactiveState.scrollLeft" >
> <view id="table-body" class="wd-table__content" :style="realWidthStyle">
<view id="table-body" class="wd-table__content" :style="realWidthStyle"> <wd-table-col
<wd-table-col v-if="index !== false"
v-if="index !== false" :prop="indexColumn.prop"
:prop="indexColumn.prop" :label="indexColumn.label"
:label="indexColumn.label" :width="indexColumn.width"
:width="indexColumn.width" :sortable="indexColumn.sortable"
:sortable="indexColumn.sortable" :fixed="indexColumn.fixed"
:fixed="indexColumn.fixed" :align="indexColumn.align"
:align="indexColumn.align" >
> <template #value="{ index }">
<template #value="{ index }"> <text>{{ index + 1 }}</text>
<text>{{ index + 1 }}</text> </template>
</template> </wd-table-col>
</wd-table-col> <slot></slot>
<slot></slot> </view>
</view> </scroll-view>
</scroll-view> </template>
<!-- 非固定表头时使用单个scroll-view -->
<template v-else>
<scroll-view class="wd-table__wrapper" :enable-flex="true" :throttle="false" :scroll-x="true" @scroll="scroll" :scrollLeft="state.scrollLeft">
<view class="wd-table__inner" :style="realWidthStyle">
<!-- 表头部分 -->
<view v-if="showHeader" class="wd-table__header-row">
<view
v-for="(column, index) in children"
:key="index"
:class="`wd-table__cell ${border ? 'is-border' : ''} ${column.fixed ? 'is-fixed' : ''} ${stripe ? 'is-stripe' : ''} is-${
column.align
} ${getIsLastFixed(column) && state.scrollLeft ? 'is-shadow' : ''}`"
:style="getCellStyle(index)"
>
<wd-sort-button
v-if="column.sortable"
v-model="column.$.exposed!.sortDirection.value"
allow-reset
:line="false"
:title="column.label"
@change="({ value }) => handleSortChange(value, index)"
/>
<text v-else :class="`wd-table__value ${ellipsis ? 'is-ellipsis' : ''}`">{{ column.label }}</text>
</view>
</view>
<!-- 表格内容部分 -->
<view class="wd-table__content" :style="bodyStyle">
<wd-table-col
v-if="index !== false"
:prop="indexColumn.prop"
:label="indexColumn.label"
:width="indexColumn.width"
:sortable="indexColumn.sortable"
:fixed="indexColumn.fixed"
:align="indexColumn.align"
>
<template #value="{ index }">
<text>{{ index + 1 }}</text>
</template>
</wd-table-col>
<slot></slot>
</view>
</view>
</scroll-view>
</template>
</view> </view>
</template> </template>
@ -86,17 +134,13 @@ const { translate } = useTranslate('tableCol')
const props = defineProps(tableProps) const props = defineProps(tableProps)
const emit = defineEmits(['sort-method', 'row-click']) const emit = defineEmits(['sort-method', 'row-click'])
const reactiveState = reactive<TableProvide>({ const state = reactive({
props, scrollLeft: 0
scrollLeft: 0,
rowClick,
getIsLastFixed,
getFixedStyle
}) })
const { linkChildren, children } = useChildren<TableColumnInstance, TableProvide>(TABLE_KEY) const { linkChildren, children } = useChildren<TableColumnInstance, TableProvide>(TABLE_KEY)
linkChildren(reactiveState) linkChildren({ props, state, rowClick, getIsLastFixed, getFixedStyle })
const indexUUID = uuid() const indexUUID = uuid()
const indexColumn = ref<TableColumnProps>({ const indexColumn = ref<TableColumnProps>({
@ -227,10 +271,7 @@ function handleSortChange(value: SortDirection, index: number) {
* 滚动事件 * 滚动事件
*/ */
function handleScroll(event: any) { function handleScroll(event: any) {
if (!props.showHeader) { state.scrollLeft = event.detail.scrollLeft
return
}
reactiveState.scrollLeft = event.detail.scrollLeft
} }
function rowClick(index: number) { function rowClick(index: number) {