perf(table): 新增 size 配置, 支持不同尺寸

This commit is contained in:
就眠仪式
2021-10-20 14:07:03 +08:00
parent e04b53988a
commit ba6de34bdb
5 changed files with 103 additions and 21 deletions

View File

@@ -68,6 +68,6 @@ export default {
::: field 容器属性
:::
| Name | Description | Accepted Values |
| Name | Description | Accepted Values |
| ----- | ------ | -------------- |
| fluid | 流模式 | `true` `false` |

View File

@@ -1,3 +1,6 @@
::: field 基础使用
:::
::: demo
<template>
@@ -55,6 +58,69 @@ export default {
:::
::: field 不同尺寸
:::
::: demo
<template>
<lay-table :columns="columns" :dataSource="dataSource" size="lg">
<template v-slot:username="{ data }"> {{data.username}} </template>
<template v-slot:password="{ data }"> {{data.password}} </template>
<template v-slot:operator="{ data }">
<lay-button >修改</lay-button>
<lay-button type="primary">删除</lay-button>
</template>
</lay-table>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const columns = [
{
title:"账户",
width:"200px",
slot:"username",
key:"username"
},{
title:"密码",
width: "180px",
slot:"password",
key:"password"
},{
title:"年龄",
width: "180px",
key:"age"
},{
title:"操作",
width: "180px",
customSlot:"operator",
key:"operator"
}
]
const dataSource = [
{username:"root", password:"root", age:"18"},
{username:"woow", password:"woow", age:"20"}
]
return {
columns,
dataSource
}
}
}
</script>
:::
::: field 开启分页
:::
::: demo
<template>
@@ -123,6 +189,9 @@ export default {
:::
::: field 完整表格
:::
::: demo
<template>
@@ -202,7 +271,8 @@ export default {
| checkbox | 开启复现框 | -- |
| id | 主键 | -- |
| selectedKeys ( v-model ) | 选中项 | -- |
| default-toolbar | 开启工具栏 | -- |
| default-toolbar | 开启工具栏 | `lg` `md` `sm` |
| size | 尺寸 | -- |
::: field table slots