mirror of
https://gitee.com/wot-design-uni/wot-design-uni.git
synced 2025-12-06 17:18:40 +08:00
feat: ✨ TableColumn组件value插槽新增index参数
This commit is contained in:
xuqingkai
不如摸鱼去
parent
6ec0397bc9
commit
b8b03c352b
@ -4,7 +4,6 @@
|
||||
|
||||
用于展示多条结构类似的数据， 可对数据进行排序等操作。
|
||||
|
||||
|
||||
## 基础用法
|
||||
|
||||
通过`data`设置表格数据。
|
||||
@ -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: '计算机科学与技术专业'
|
||||
}
|
||||
])
|
||||
```
|
||||
|
||||
@ -76,8 +75,6 @@ const dataList = reactive([
|
||||
</wd-table>
|
||||
```
|
||||
|
||||
|
||||
|
||||
## 表格高度
|
||||
|
||||
通过`height`设置表格高度，默认为`80vh`。
|
||||
@ -111,7 +108,7 @@ function handleSort(e) {
|
||||
## 自定义列模板
|
||||
|
||||
自定义列的显示内容，可组合其他组件使用。
|
||||
通过 `Scoped slot` 可以获取到 `row` 的数据，用法参考 demo。
|
||||
通过 `Scoped slot` 可以获取到 `row`, `index` 的数据，用法参考 demo。
|
||||
|
||||
```html
|
||||
<wd-table :data="dataList" @sort-method="handleSort">
|
||||
@ -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 |
|
||||
|
||||
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|
||||
| ---------- | -------------------------- | ----------------- | ------ | ------ | -------- |
|
||||
| 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 |
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|
||||
| -------- | --------------------------- | --------------- | ------------------- | ------ | -------- |
|
||||
| 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 Slot
|
||||
|
||||
| name | 说明 | 参数 | 最低版本 |
|
||||
| ----- | -------------------------------------- | -------------------------------- | -------- |
|
||||
| value | 自定义列的内容，1.2.16 新增`index`参数 | `{ row: Object, index: number }` | 0.1.22 |
|
||||
|
||||
@ -92,4 +92,3 @@ function handleClick() {
|
||||
<style lang="scss" scoped>
|
||||
@import './index.scss';
|
||||
</style>
|
||||
../wd-sidebar/type
|
||||
|
||||
@ -147,4 +147,3 @@ function getCurrentTitle(currentStatus: string) {
|
||||
<style lang="scss" scoped>
|
||||
@import './index.scss';
|
||||
</style>
|
||||
../wd-steps/type
|
||||
|
||||
@ -99,4 +99,3 @@ defineExpose({
|
||||
<style lang="scss" scoped>
|
||||
@import './index.scss';
|
||||
</style>
|
||||
../wd-tabs/type
|
||||
|
||||
@ -72,4 +72,3 @@ function handleClick() {
|
||||
<style lang="scss" scoped>
|
||||
@import './index.scss';
|
||||
</style>
|
||||
../wd-tabbar/type
|
||||
|
||||
@ -89,4 +89,3 @@ function setPlaceholderHeight() {
|
||||
<style lang="scss" scoped>
|
||||
@import './index.scss';
|
||||
</style>
|
||||
../wd-tabbar-item/type./type
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -251,4 +251,3 @@ function setRowClick(index: number) {
|
||||
<style lang="scss" scoped>
|
||||
@import './index.scss';
|
||||
</style>
|
||||
../wd-table-col/type
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user