✨(table): 新增 childrenColumnName 属性
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user