theluyuan/layui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

✨(table): 新增 expand-index 属性, 控制展开操作的所在列

Browse Source
This commit is contained in:
就眠儀式 2022-07-18 14:18:50 +08:00
parent a8b025c12a
commit d2f11c1866
3 changed files with 19 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
package/component/src/component/table/TableRow.vue
View File

@ -17,6 +17,7 @@ export interface LayTableRowProps {
indentSize: number;
currentIndentSize: number;
expandSpace: boolean;
expandIndex: number;
selectedKeys: Recordable[];
tableColumnKeys: Recordable[];
childrenColumnName?: string;
@ -191,9 +192,8 @@ const renderFixedClassName = (column: any, columnIndex: number) => {
<template v-for="(column, columnIndex) in columns" :key="columnIndex">
<!-- 展示否 -->
<template v-if="tableColumnKeys.includes(column.key)">
<template v-if="column.type == 'number'">
<td
<td
class="layui-table-cell"
:style="[
{
@ -210,7 +210,7 @@ const renderFixedClassName = (column: any, columnIndex: number) => {
>
<!-- 树表占位与缩进 -->
<span
v-if="expandSpace && columnIndex === 0"
v-if="expandSpace && columnIndex === expandIndex"
:style="{ 'margin-right': currentIndentSize + 'px' }"
></span>
@ -219,14 +219,14 @@ const renderFixedClassName = (column: any, columnIndex: number) => {
expandSpace &&
!data[childrenColumnName] &&
!slot.expand &&
columnIndex === 0
columnIndex === expandIndex
"
class="layui-table-cell-expand-icon-spaced"
></span>
<lay-icon
v-if="
(slot.expand || data[childrenColumnName]) && columnIndex === 0
(slot.expand || data[childrenColumnName]) && columnIndex === expandIndex
"
class="layui-table-cell-expand-icon"
:type="expandIconType"
@ -263,7 +263,7 @@ const renderFixedClassName = (column: any, columnIndex: number) => {
>
<!-- 树表占位与缩进 -->
<span
v-if="expandSpace && columnIndex === 0"
v-if="expandSpace && columnIndex === expandIndex"
:style="{ 'margin-right': currentIndentSize + 'px' }"
></span>
@ -272,14 +272,14 @@ const renderFixedClassName = (column: any, columnIndex: number) => {
expandSpace &&
!data[childrenColumnName] &&
!slot.expand &&
columnIndex === 0
columnIndex === expandIndex
"
class="layui-table-cell-expand-icon-spaced"
></span>
<lay-icon
v-if="
(slot.expand || data[childrenColumnName]) && columnIndex === 0
(slot.expand || data[childrenColumnName]) && columnIndex === expandIndex
"
class="layui-table-cell-expand-icon"
:type="expandIconType"
@ -318,7 +318,7 @@ const renderFixedClassName = (column: any, columnIndex: number) => {
>
<!-- 树表占位与缩进 -->
<span
v-if="expandSpace && columnIndex === 0"
v-if="expandSpace && columnIndex === expandIndex"
:style="{ 'margin-right': currentIndentSize + 'px' }"
></span>
@ -327,14 +327,14 @@ const renderFixedClassName = (column: any, columnIndex: number) => {
expandSpace &&
!data[childrenColumnName] &&
!slot.expand &&
columnIndex === 0
columnIndex === expandIndex
"
class="layui-table-cell-expand-icon-spaced"
></span>
<lay-icon
v-if="
(slot.expand || data[childrenColumnName]) && columnIndex === 0
(slot.expand || data[childrenColumnName]) && columnIndex === expandIndex
"
class="layui-table-cell-expand-icon"
:type="expandIconType"
@ -377,6 +377,7 @@ const renderFixedClassName = (column: any, columnIndex: number) => {
:checkbox="checkbox"
:tableColumnKeys="tableColumnKeys"
:expandSpace="expandSpace"
:expandIndex="expandIndex"
:cellStyle="cellStyle"
:cellClassName="cellClassName"
:rowStyle="rowStyle"

7
package/component/src/component/table/index.vue
View File

@ -31,6 +31,7 @@ export interface LayTableProps {
height?: number;
maxHeight?: string;
even?: boolean;
expandIndex: number;
rowClassName?: string | Function;
cellClassName?: string | Function;
rowStyle?: string | Function;
@ -48,6 +49,7 @@ const props = withDefaults(defineProps<LayTableProps>(), {
even: false,
rowClassName: "",
cellClassName: "",
expandIndex: 0,
rowStyle: "",
cellStyle: "",
});
@ -355,7 +357,7 @@ const renderFixedClassName = (column: any, columnIndex: number) => {
<col
:width="column.width"
:style="{
minWidth: column.minWidth ? column.minWidth : '100px',
minWidth: column.minWidth ? column.minWidth : '50px',
}"
/>
</template>
@ -450,7 +452,7 @@ const renderFixedClassName = (column: any, columnIndex: number) => {
<col
:width="column.width"
:style="{
minWidth: column.minWidth ? column.minWidth : '100px',
minWidth: column.minWidth ? column.minWidth : '50px',
}"
/>
</template>
@ -469,6 +471,7 @@ const renderFixedClassName = (column: any, columnIndex: number) => {
:currentIndentSize="currentIndentSize"
:tableColumnKeys="tableColumnKeys"
:expandSpace="childrenExpandSpace"
:expandIndex="expandIndex"
:cellStyle="cellStyle"
:cellClassName="cellClassName"
:rowStyle="rowStyle"

4
package/document-component/src/document/zh-CN/components/table.md
View File

@ -683,7 +683,7 @@ export default {
::: demo
<template>
<lay-table :columns="columns5" id="id" :dataSource="dataSource5" v-model:selectedKeys="selectedKeys5" :checkbox="checkbox5" :default-toolbar="defaultToolbar5" @row="rowClick5">
<lay-table :columns="columns5" id="id" :expandIndex="1" :dataSource="dataSource5" v-model:selectedKeys="selectedKeys5" :checkbox="checkbox5" :default-toolbar="defaultToolbar5" @row="rowClick5">
<template v-slot:toolbar>
<lay-button size="sm">新增</lay-button>
<lay-button size="sm">删除</lay-button>
@ -718,7 +718,7 @@ export default {
title: "序号",
fixed: "left",
type: "number",
width: "30px",
width: "50px",
},
{
title:"姓名",