Skip to content

Commit

Permalink
feat: ✨ TableColumn组件value插槽新增index参数
Browse files Browse the repository at this point in the history
  • Loading branch information
@Moonofweisheng
xuqingkai authored and Moonofweisheng committed Apr 12, 2024
1 parent 6ec0397 commit b8b03c3
Show file tree
Hide file tree
Showing 8 changed files with 40 additions and 46 deletions.
78 changes: 39 additions & 39 deletions docs/component/table.md
View file
Expand Up @@ -4,7 +4,6 @@

用于展示多条结构类似的数据， 可对数据进行排序等操作。


## 基础用法

通过`data`设置表格数据。
Expand All @@ -19,21 +18,21 @@

```ts
const dataList = reactive([
{
name: '赵云',
school: '武汉市阳逻妇幼保健学院',
major: '计算机科学与技术专业'
},
{
name: '孔明',
school: '武汉市阳逻卧龙学院',
major: '计算机科学与技术专业'
},
{
name: '刘备',
school: '武汉市阳逻编织学院',
major: '计算机科学与技术专业'
}
{
name: '赵云',
school: '武汉市阳逻妇幼保健学院',
major: '计算机科学与技术专业'
},
{
name: '孔明',
school: '武汉市阳逻卧龙学院',
major: '计算机科学与技术专业'
},
{
name: '刘备',
school: '武汉市阳逻编织学院',
major: '计算机科学与技术专业'
}
])
```

Expand Down Expand Up @@ -76,8 +75,6 @@ const dataList = reactive([
</wd-table>
```



## 表格高度

通过`height`设置表格高度，默认为`80vh`。
Expand Down Expand Up @@ -111,7 +108,7 @@ function handleSort(e) {
## 自定义列模板

自定义列的显示内容，可组合其他组件使用。
通过 `Scoped slot` 可以获取到 `row` 的数据，用法参考 demo。
通过 `Scoped slot` 可以获取到 `row`, `index` 的数据，用法参考 demo。

```html
<wd-table :data="dataList" @sort-method="handleSort">
Expand Down Expand Up @@ -216,29 +213,32 @@ function handleSort(e) {
align-items: center;
}
```
## Attributes


| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
| ----------- | -------------- | ----------------------- | ------------------- | --------- | --------- |
| data | 显示的数据 | Array | - | - | 0.0.39 |
| border | 是否带有边框 | boolean | - | true | 0.0.39 |
| stripe | 是否为斑马纹表 | boolean | - | true | 0.0.39 |
| height | Table 的高度，默认为`80vh` | string | - | `80vh` | 0.0.39 |
| rowHeight | 行高 | `number / string` | - | 50 | 0.0.39 |
| showHeader | 是否显示表头 | boolean | - | true | 0.0.39 |
| ellipsis | 是否超出2行隐藏 | boolean | - | true | 0.0.39 |
## Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
| ---------- | -------------------------- | ----------------- | ------ | ------ | -------- |
| data | 显示的数据 | Array | - | - | 0.0.39 |
| border | 是否带有边框 | boolean | - | true | 0.0.39 |
| stripe | 是否为斑马纹表 | boolean | - | true | 0.0.39 |
| height | Table 的高度，默认为`80vh` | string | - | `80vh` | 0.0.39 |
| rowHeight | 行高 | `number / string` | - | 50 | 0.0.39 |
| showHeader | 是否显示表头 | boolean | - | true | 0.0.39 |
| ellipsis | 是否超出 2 行隐藏 | boolean | - | true | 0.0.39 |

## TableColumn Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
| -------- | --------------------------- | --------------- | ------------------- | ------ | -------- |
| prop | 字段名称,对应列内容的字段名 | string | - | - | 0.0.39 |
| label | 显示的标题 | string | - | - | 0.0.39 |
| width | 对应列的宽度，单位为 px | number / string | - | 100 | 0.0.39 |
| sortable | 是否开启列排序 | boolean | - | false | 0.0.39 |
| fixed | 是否固定本列 | boolean | - | false | 0.0.39 |
| align | 列的对齐方式 | AlignType | left, center, right | left | 0.0.39 |

## TableColumn Attributes
## TableColumn Slot

| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
| --------- | ----------- | ---------------------- | ------------------------------------------------ | -------- | --------- |
| prop | 字段名称,对应列内容的字段名| string | - | - | 0.0.39 |
| label | 显示的标题 | string | - | - | 0.0.39 |
| width | 对应列的宽度，单位为px | number / string | - | 100 | 0.0.39 |
| sortable | 是否开启列排序 | boolean | - | false | 0.0.39 |
| fixed | 是否固定本列 | boolean | - | false | 0.0.39 |
| align | 列的对齐方式 | AlignType | left, center, right | left | 0.0.39 |
| name | 说明 | 参数 | 最低版本 |
| ----- | -------------------------------------- | -------------------------------- | -------- |
| value | 自定义列的内容，1.2.16 新增`index`参数 | `{ row: Object, index: number }` | 0.1.22 |
1 change: 0 additions & 1 deletion src/uni_modules/wot-design-uni/components/wd-sidebar-item/wd-sidebar-item.vue
View file
Expand Up @@ -92,4 +92,3 @@ function handleClick() {
<style lang="scss" scoped>
@import './index.scss';
</style>
../wd-sidebar/type
1 change: 0 additions & 1 deletion src/uni_modules/wot-design-uni/components/wd-step/wd-step.vue
View file
Expand Up @@ -147,4 +147,3 @@ function getCurrentTitle(currentStatus: string) {
<style lang="scss" scoped>
@import './index.scss';
</style>
../wd-steps/type
1 change: 0 additions & 1 deletion src/uni_modules/wot-design-uni/components/wd-tab/wd-tab.vue
View file
Expand Up @@ -99,4 +99,3 @@ defineExpose({
<style lang="scss" scoped>
@import './index.scss';
</style>
../wd-tabs/type
1 change: 0 additions & 1 deletion src/uni_modules/wot-design-uni/components/wd-tabbar-item/wd-tabbar-item.vue
View file
Expand Up @@ -72,4 +72,3 @@ function handleClick() {
<style lang="scss" scoped>
@import './index.scss';
</style>
../wd-tabbar/type
1 change: 0 additions & 1 deletion src/uni_modules/wot-design-uni/components/wd-tabbar/wd-tabbar.vue
View file
Expand Up @@ -89,4 +89,3 @@ function setPlaceholderHeight() {
<style lang="scss" scoped>
@import './index.scss';
</style>
../wd-tabbar-item/type./type
2 changes: 1 addition & 1 deletion src/uni_modules/wot-design-uni/components/wd-table-col/wd-table-col.vue
View file
Expand Up @@ -10,7 +10,7 @@
:style="cellStyle"
@click="handleRowClick(index)"
>
<slot name="value" v-if="$slots.value" :row="scope(index)"></slot>
<slot name="value" v-if="$slots.value" :row="scope(index)" :index="index"></slot>
<text :class="`wd-table__value ${ellipsis ? 'is-ellipsis' : ''}`" v-else>{{ row }}</text>
</view>
</view>
Expand Down
1 change: 0 additions & 1 deletion src/uni_modules/wot-design-uni/components/wd-table/wd-table.vue
View file
Expand Up @@ -251,4 +251,3 @@ function setRowClick(index: number) {
<style lang="scss" scoped>
@import './index.scss';
</style>
../wd-table-col/type

0 comments on commit b8b03c3

Please sign in to comment.