(table): 新增 childrenColumnName 属性

This commit is contained in:
就眠儀式
2022-05-30 22:53:18 +08:00
parent 810b52d2ac
commit 922dc2cc92
4 changed files with 16 additions and 10 deletions

View File

@@ -5,7 +5,7 @@ export default {
</script>
<script setup lang="ts">
import { computed } from "vue";
import { computed, StyleValue } from "vue";
import "./index.less";
export interface LayBadgeProps {
@@ -29,7 +29,7 @@ const classes = computed(() => {
];
});
const styles = computed(() => {
const styles = computed<StyleValue>(() => {
props.color ? `background-color: ${props.color}` : "";
});
</script>

View File

@@ -14,6 +14,7 @@ export interface LayTableRowProps {
expandSpace: boolean;
selectedKeys: Recordable[];
tableColumnKeys: Recordable[];
childrenColumnName: string;
columns: Recordable[];
checkbox?: boolean;
id: string;
@@ -30,6 +31,7 @@ const emit = defineEmits([
const props = withDefaults(defineProps<LayTableRowProps>(), {
checkbox: false,
childrenColumnName: 'children'
});
const tableSelectedKeys: WritableComputedRef<Recordable[]> = computed({
@@ -113,13 +115,13 @@ const childrenIndentSize = props.currentIndentSize + props.indentSize;
<span
v-if="
expandSpace && !data.children && !slot.expand && index === 0
expandSpace && !data[childrenColumnName] && !slot.expand && index === 0
"
class="layui-table-cell-expand-icon-spaced"
></span>
<lay-icon
v-if="(slot.expand || data.children) && index === 0"
v-if="(slot.expand || data[childrenColumnName]) && index === 0"
class="layui-table-cell-expand-icon"
:type="expandIconType"
@click="handleExpand"
@@ -156,13 +158,13 @@ const childrenIndentSize = props.currentIndentSize + props.indentSize;
<span
v-if="
expandSpace && !data.children && !slot.expand && index === 0
expandSpace && !data[childrenColumnName] && !slot.expand && index === 0
"
class="layui-table-cell-expand-icon-spaced"
></span>
<lay-icon
v-if="(slot.expand || data.children) && index === 0"
v-if="(slot.expand || data[childrenColumnName]) && index === 0"
class="layui-table-cell-expand-icon"
:type="expandIconType"
@click="handleExpand"
@@ -189,8 +191,8 @@ const childrenIndentSize = props.currentIndentSize + props.indentSize;
</tr>
<!-- 树形结构 -->
<template v-if="data.children && isExpand">
<template v-for="(children, index) in data.children" :key="index">
<template v-if="data[childrenColumnName] && isExpand">
<template v-for="(children, index) in data[childrenColumnName]" :key="index">
<table-row
:id="id"
:data="children"

View File

@@ -27,12 +27,14 @@ export interface LayTableProps {
defaultToolbar?: boolean;
selectedKeys?: Recordable[];
indentSize?: number;
childrenColumnName: string;
}
const props = withDefaults(defineProps<LayTableProps>(), {
id: "id",
size: "md",
indentSize: 30,
childrenColumnName: "children",
dataSource: () => [],
selectedKeys: () => [],
});
@@ -214,7 +216,7 @@ const childrenExpandSpace = ref(false);
const currentIndentSize = ref(0);
props.dataSource.map((value: any) => {
if (value.children) {
if (value[props.childrenColumnName]) {
childrenExpandSpace.value = true;
}
});