🌀(component): 优化 table 子表嵌套

This commit is contained in:
就眠儀式 2022-07-30 18:01:05 +08:00
parent 90cdaf037d
commit 43e626cfe6
3 changed files with 32 additions and 17 deletions

View File

@ -162,7 +162,7 @@ const renderFixedStyle = (column: any, columnIndex: number) => {
isLast = false;
}
}
return isLast ? { "border-right": "none" } as StyleValue : {};
return isLast ? ({ "border-right": "none" } as StyleValue) : {};
}
return {} as StyleValue;
};
@ -454,7 +454,9 @@ const renderFixedClassName = (column: any, columnIndex: number) => {
</tr>
<tr class="layui-table-cell-expand" v-if="slot.expand && isExpand">
<td class="layui-table-cell" :colspan="columns.length">
<slot name="expand" :data="data"></slot>
</td>
</tr>
<template v-if="data[childrenColumnName] && isExpand">

View File

@ -6,7 +6,16 @@ export default {
<script setup lang="ts">
import "./index.less";
import { ref, watch, useSlots, withDefaults, onMounted, StyleValue, WritableComputedRef, computed } from "vue";
import {
ref,
watch,
useSlots,
withDefaults,
onMounted,
StyleValue,
WritableComputedRef,
computed,
} from "vue";
import { v4 as uuidv4 } from "../../utils/guidUtil";
import { Recordable } from "../../types";
import { LayIcon } from "@layui/icons-vue";
@ -328,7 +337,7 @@ const renderFixedStyle = (column: any, columnIndex: number) => {
isLast = false;
}
}
return isLast ? { "border-right": "none" } as StyleValue : {};
return isLast ? ({ "border-right": "none" } as StyleValue) : {};
}
return {} as StyleValue;
};
@ -458,9 +467,13 @@ const renderTotalRowCell = (column: any) => {
:class="[
renderFixedClassName(column, columnIndex),
column.fixed ? `layui-table-fixed-${column.fixed}` : '',
column.type == 'checkbox' ? 'layui-table-cell-checkbox' : '',
column.type == 'checkbox'
? 'layui-table-cell-checkbox'
: '',
column.type == 'radio' ? 'layui-table-cell-radio' : '',
column.type == 'number' ? 'layui-table-cell-number' : '',
column.type == 'number'
? 'layui-table-cell-number'
: '',
]"
:style="[
{

View File

@ -13,7 +13,7 @@
::: demo 使用 `lay-panel` 标签, 创建面板组件
<template>
<lay-panel><div style="padding: 30px;">面板</div></lay-panel>
<lay-panel>面板</lay-panel>
</template>
<script>