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

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

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

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

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

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

@ -683,7 +683,7 @@ export default {
::: demo ::: demo
<template> <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> <template v-slot:toolbar>
<lay-button size="sm">新增</lay-button> <lay-button size="sm">新增</lay-button>
<lay-button size="sm">删除</lay-button> <lay-button size="sm">删除</lay-button>
@ -718,7 +718,7 @@ export default {
title: "序号", title: "序号",
fixed: "left", fixed: "left",
type: "number", type: "number",
width: "30px", width: "50px",
}, },
{ {
title:"姓名", title:"姓名",