✨(table): 新增 indent-size 设置 tree-table 行级缩进
This commit is contained in:
就眠儀式
parent
dfe2d372b3
commit
4385d0cffe
@ -9,6 +9,8 @@ import { computed, ref, useSlots, WritableComputedRef } from "vue";
|
||||
import { Recordable } from "../../types";
|
||||
|
||||
export interface LayTableRowProps {
|
||||
indentSize: number;
|
||||
currentIndentSize: number;
|
||||
expandSpace: boolean;
|
||||
selectedKeys: Recordable[];
|
||||
tableColumnKeys: Recordable[];
|
||||
@ -67,6 +69,8 @@ const expandIconType = computed(() => {
|
||||
const handleExpand = () => {
|
||||
isExpand.value = !isExpand.value;
|
||||
};
|
||||
|
||||
const childrenIndentSize = props.currentIndentSize + props.indentSize;
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -101,6 +105,13 @@ const handleExpand = () => {
|
||||
whiteSpace: column.ellipsisTooltip ? 'nowrap' : 'normal',
|
||||
}"
|
||||
>
|
||||
|
||||
|
||||
<!-- 树表占位与缩进 -->
|
||||
<span v-if="expandSpace && index === 0" :style="{'margin-right': currentIndentSize + 'px'}"></span>
|
||||
|
||||
<span v-if="expandSpace && (!data.children && !slot.expand) && index === 0" class="layui-table-cell-expand-icon-spaced"></span>
|
||||
|
||||
<lay-icon
|
||||
v-if="(slot.expand || data.children) && index === 0"
|
||||
class="layui-table-cell-expand-icon"
|
||||
@ -131,6 +142,12 @@ const handleExpand = () => {
|
||||
whiteSpace: column.ellipsisTooltip ? 'nowrap' : 'normal',
|
||||
}"
|
||||
>
|
||||
|
||||
<!-- 树表占位与缩进 -->
|
||||
<span v-if="expandSpace && index === 0" :style="{'margin-right': currentIndentSize + 'px'}"></span>
|
||||
|
||||
<span v-if="expandSpace && (!data.children && !slot.expand) && index === 0" class="layui-table-cell-expand-icon-spaced"></span>
|
||||
|
||||
<lay-icon
|
||||
v-if="(slot.expand || data.children) && index === 0"
|
||||
class="layui-table-cell-expand-icon"
|
||||
@ -165,6 +182,8 @@ const handleExpand = () => {
|
||||
:id="id"
|
||||
:data="children"
|
||||
:columns="columns"
|
||||
:indent-size="indentSize"
|
||||
:current-indent-size="childrenIndentSize"
|
||||
:checkbox="checkbox"
|
||||
:tableColumnKeys="tableColumnKeys"
|
||||
:expandSpace="expandSpace"
|
||||
|
||||
@ -363,7 +363,9 @@
|
||||
}
|
||||
|
||||
.layui-table-cell-expand-icon-spaced {
|
||||
width: 26px;
|
||||
visibility: hidden;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.layui-table-body {
|
||||
|
||||
@ -26,11 +26,13 @@ export interface LayTableProps {
|
||||
dataSource: Recordable[];
|
||||
defaultToolbar?: boolean;
|
||||
selectedKeys?: Recordable[];
|
||||
indentSize?: number;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<LayTableProps>(), {
|
||||
id: "id",
|
||||
size: "md",
|
||||
indentSize: 30,
|
||||
dataSource: () => [],
|
||||
selectedKeys: () => [],
|
||||
});
|
||||
@ -208,14 +210,14 @@ props.columns.map((value: any) => {
|
||||
}
|
||||
});
|
||||
|
||||
// is tree
|
||||
const childrenExpandSpace = ref(false);
|
||||
const currentIndentSize = ref(0);
|
||||
|
||||
props.dataSource.map((value: any) => {
|
||||
if(value.children) {
|
||||
if (value.children) {
|
||||
childrenExpandSpace.value = true;
|
||||
}
|
||||
})
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -332,6 +334,8 @@ props.dataSource.map((value: any) => {
|
||||
:data="data"
|
||||
:columns="columns"
|
||||
:checkbox="checkbox"
|
||||
:indent-size="indentSize"
|
||||
:currentIndentSize="currentIndentSize"
|
||||
:tableColumnKeys="tableColumnKeys"
|
||||
:expandSpace="childrenExpandSpace"
|
||||
@row="rowClick"
|
||||
|
||||
@ -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 {
|
||||
@ -468,7 +464,7 @@ export default {
|
||||
::: table
|
||||
|
||||
| 插槽 | 描述 | 类型 | 默认值 | 可选值 |
|
||||
| ---------- | ---------- | -------- | ------ | ----------------------- |
|
||||
| --------------- | ------------------------------ | --------- | ------- | ----------------------- |
|
||||
| title | 列标题 | -- | -- | -- |
|
||||
| key | 数据字段 | -- | -- | -- |
|
||||
| customSlot | 自定义插槽 | -- | -- | -- |
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user