(table): 新增 indent-size 设置 tree-table 行级缩进

This commit is contained in:
就眠儀式
2022-05-29 16:14:38 +08:00
parent dfe2d372b3
commit 4385d0cffe
5 changed files with 57 additions and 26 deletions

View File

@@ -376,7 +376,7 @@ export default {
::: title 树形表格
:::
::: demo 树形数据的展示,当数据中有 children 字段时会自动展示为树形表格
::: demo 树形数据的展示,当数据中有 children 字段时会自动展示为树形表格, 通过设置 indentSize 以控制每一层的缩进宽度
<template>
<lay-table :columns="columns7" :dataSource="dataSource7">
@@ -402,12 +402,8 @@ export default {
]
const dataSource7 = [
{name:"张三", score:100, children: [{name:"张三", score:100},{name:"张三", score:100}]},
{name:"李四", score:80, children: [{name:"张三", score:100},{name:"张三", score:100}]},
{name:"王二", score:99, children: [{name:"张三", score:100},{name:"张三", score:100}]},
{name:"麻子", score:92, children: [{name:"张三", score:100},{name:"张三", score:100}]},
{name:"无名", score:60, children: [{name:"张三", score:100},{name:"张三", score:100}]},
{name:"有名", score:70, children: [{name:"张三", score:100},{name:"张三", score:100}]},
{name:"系统管理", score:100, children: [{name:"用户管理", score:100, children: [{name:"用户修改", score:100},{name:"用户删除", score:100}]},{name:"角色管理", score:100}]},
{name:"电商管理", score:100, children: [{name:"商品管理", score:100},{name:"分类管理", score:100}]},
]
return {
@@ -467,17 +463,17 @@ export default {
::: table
| 插槽 | 描述 | 类型 | 默认值 | 可选值 |
| ---------- | ---------- | -------- | ------ | ----------------------- |
| title | 列标题 | -- | -- | -- |
| key | 数据字段 | -- | -- | -- |
| customSlot | 自定义插槽 | -- | -- | -- |
| width | 宽度 | -- | -- | -- |
| minWidth | 最小宽度 | -- | -- | -- |
| sort | 排序 | -- | -- | -- |
| titleSlot | 标题插槽 | -- | -- | -- |
| align | 对齐方式 | `string` | `left` | `left` `right` `center` |
| ellipsisTooltip | 当内容过长被隐藏时显示 tooltip | `boolean` | `false` | `true` `false` |
| 插槽 | 描述 | 类型 | 默认值 | 可选值 |
| --------------- | ------------------------------ | --------- | ------- | ----------------------- |
| title | 列标题 | -- | -- | -- |
| key | 数据字段 | -- | -- | -- |
| customSlot | 自定义插槽 | -- | -- | -- |
| width | 宽度 | -- | -- | -- |
| minWidth | 最小宽度 | -- | -- | -- |
| sort | 排序 | -- | -- | -- |
| titleSlot | 标题插槽 | -- | -- | -- |
| align | 对齐方式 | `string` | `left` | `left` `right` `center` |
| ellipsisTooltip | 当内容过长被隐藏时显示 tooltip | `boolean` | `false` | `true` `false` |
:::

View File

@@ -11,6 +11,16 @@
<template>
<lay-timeline>
<lay-timeline-item title="1.1.x">
<ul>
<a name="1-1-4"></a>
<li>
<h3>1.1.4 <span class="layui-badge-rim">2022-05-29</span></h3>
<ul>
<li>[新增] table 组件 expand 插槽, 内容较多不能一次性完全展示时使用, 参数 data 为当前行数据</li>
<li>[新增] table 组件 children 字段解析, 当字段中存在 children 时会自动转化为树表, 通过设置 indentSize 以控制每一层的缩进宽度</li>
</ul>
</li>
</ul>
<ul>
<a name="1-1-3"></a>
<li>