(table): 更新文档

This commit is contained in:
就眠儀式 2022-05-30 23:07:53 +08:00
parent 922dc2cc92
commit e88d768d2f
3 changed files with 17 additions and 6 deletions

View File

@ -1,6 +1,6 @@
{ {
"name": "@layui/layui-vue", "name": "@layui/layui-vue",
"version": "1.1.3", "version": "1.1.4",
"author": "就眠儀式", "author": "就眠儀式",
"license": "MIT", "license": "MIT",
"description": "a component library for Vue 3 base on layui-vue", "description": "a component library for Vue 3 base on layui-vue",

View File

@ -31,7 +31,7 @@ const emit = defineEmits([
const props = withDefaults(defineProps<LayTableRowProps>(), { const props = withDefaults(defineProps<LayTableRowProps>(), {
checkbox: false, checkbox: false,
childrenColumnName: 'children' childrenColumnName: "children",
}); });
const tableSelectedKeys: WritableComputedRef<Recordable[]> = computed({ const tableSelectedKeys: WritableComputedRef<Recordable[]> = computed({
@ -115,7 +115,10 @@ const childrenIndentSize = props.currentIndentSize + props.indentSize;
<span <span
v-if=" v-if="
expandSpace && !data[childrenColumnName] && !slot.expand && index === 0 expandSpace &&
!data[childrenColumnName] &&
!slot.expand &&
index === 0
" "
class="layui-table-cell-expand-icon-spaced" class="layui-table-cell-expand-icon-spaced"
></span> ></span>
@ -158,7 +161,10 @@ const childrenIndentSize = props.currentIndentSize + props.indentSize;
<span <span
v-if=" v-if="
expandSpace && !data[childrenColumnName] && !slot.expand && index === 0 expandSpace &&
!data[childrenColumnName] &&
!slot.expand &&
index === 0
" "
class="layui-table-cell-expand-icon-spaced" class="layui-table-cell-expand-icon-spaced"
></span> ></span>
@ -192,7 +198,10 @@ const childrenIndentSize = props.currentIndentSize + props.indentSize;
<!-- 树形结构 --> <!-- 树形结构 -->
<template v-if="data[childrenColumnName] && isExpand"> <template v-if="data[childrenColumnName] && isExpand">
<template v-for="(children, index) in data[childrenColumnName]" :key="index"> <template
v-for="(children, index) in data[childrenColumnName]"
:key="index"
>
<table-row <table-row
:id="id" :id="id"
:data="children" :data="children"

View File

@ -376,7 +376,7 @@ export default {
::: title 树形表格 ::: title 树形表格
::: :::
::: demo 树形数据的展示,当数据中有 children 字段时会自动展示为树形表格, 通过设置 indentSize 以控制每一层的缩进宽度 ::: demo 树形数据的展示,当数据中有 children 字段时会自动展示为树形表格, 通过设置 indentSize 以控制每一层的缩进宽度, 使用 childrenColumnName 替换默认字段
<template> <template>
<lay-table :columns="columns7" :dataSource="dataSource7"> <lay-table :columns="columns7" :dataSource="dataSource7">
@ -430,6 +430,8 @@ export default {
| v-model:selectedKeys | 选中项 | -- | -- | -- | | v-model:selectedKeys | 选中项 | -- | -- | -- |
| default-toolbar | 工具栏 | `boolean` | `false` | `true` `false` | | default-toolbar | 工具栏 | `boolean` | `false` | `true` `false` |
| size | 尺寸 | `string` | `md` | `lg` `md` `sm` | | size | 尺寸 | `string` | `md` | `lg` `md` `sm` |
| children-column-name | 树节点字段 | `string` | `children`| -- |
| indent-size | 树表行级缩进 | `number` | `30` | -- |
::: :::