✨(table): 更新文档
This commit is contained in:
parent
922dc2cc92
commit
e88d768d2f
@ -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",
|
||||||
|
@ -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"
|
||||||
|
@ -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` | -- |
|
||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user