417 lines
13 KiB
Vue
417 lines
13 KiB
Vue
|
<style lang="scss" scoped>
|
||
|
|
.u-table-row {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: row;
|
||
|
|
position: relative;
|
||
|
|
color: var(--up-content-color, #606266);
|
||
|
|
}
|
||
|
|
|
||
|
|
// 添加border样式支持
|
||
|
|
.u-table-border {
|
||
|
|
border-top: 1px solid var(--up-border-color, #ebeef5);
|
||
|
|
border-left: 1px solid var(--up-border-color, #ebeef5);
|
||
|
|
border-right: 1px solid var(--up-border-color, #ebeef5);
|
||
|
|
.u-table-cell {
|
||
|
|
border-right: 1px solid var(--up-border-color, #ebeef5);
|
||
|
|
}
|
||
|
|
|
||
|
|
.u-table-cell:last-child {
|
||
|
|
border-right: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.u-table-cell {
|
||
|
|
flex: 1;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: row;
|
||
|
|
align-items: center;
|
||
|
|
min-width: 0;
|
||
|
|
box-sizing: border-box;
|
||
|
|
padding: 10px 1px;
|
||
|
|
font-size: 14px;
|
||
|
|
white-space: nowrap;
|
||
|
|
overflow: hidden;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
line-height: 1.1;
|
||
|
|
color: var(--up-content-color, #606266);
|
||
|
|
border-bottom: 1px solid var(--up-border-color, #ebeef5);
|
||
|
|
&.u-text-left {
|
||
|
|
justify-content: flex-start;
|
||
|
|
text-align: left;
|
||
|
|
}
|
||
|
|
&.u-text-center {
|
||
|
|
justify-content: center;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
&.u-text-right {
|
||
|
|
justify-content: flex-end;
|
||
|
|
text-align: right;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.u-table-cell_content {
|
||
|
|
width: 100%;
|
||
|
|
min-width: 0;
|
||
|
|
max-width: 100%;
|
||
|
|
flex: 1;
|
||
|
|
box-sizing: border-box;
|
||
|
|
display: block;
|
||
|
|
text-align: inherit;
|
||
|
|
}
|
||
|
|
|
||
|
|
.u-table-cell_text {
|
||
|
|
width: 100%;
|
||
|
|
min-width: 0;
|
||
|
|
max-width: 100%;
|
||
|
|
display: block;
|
||
|
|
box-sizing: border-box;
|
||
|
|
text-align: inherit;
|
||
|
|
}
|
||
|
|
|
||
|
|
.u-table-cell_content-overflow,
|
||
|
|
.u-table-cell_content-overflow .u-table-cell_text {
|
||
|
|
width: 100%;
|
||
|
|
min-width: 0;
|
||
|
|
max-width: 100%;
|
||
|
|
display: block;
|
||
|
|
overflow: hidden;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
white-space: nowrap;
|
||
|
|
}
|
||
|
|
|
||
|
|
.u-table-row-zebra {
|
||
|
|
background-color: var(--up-table2-zebra-bg-color, #fafafa);
|
||
|
|
}
|
||
|
|
|
||
|
|
.u-table-row-highlight {
|
||
|
|
background-color: var(--up-table2-highlight-bg-color, #f5f7fa);
|
||
|
|
}
|
||
|
|
|
||
|
|
.u-table-empty {
|
||
|
|
text-align: center;
|
||
|
|
padding: 20px;
|
||
|
|
color: var(--up-tips-color, #999);
|
||
|
|
}
|
||
|
|
|
||
|
|
// 隐藏被合并的单元格
|
||
|
|
.u-table-cell-hidden {
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
// 合并单元格样式
|
||
|
|
.u-table-cell-merged {
|
||
|
|
z-index: 1;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<template>
|
||
|
|
<view class="u-table-row u-table-row-child"
|
||
|
|
:class="[highlightCurrentRow && currentRow === row ? 'u-table-row-highlight' : '',
|
||
|
|
rowClassName ? rowClassName(row, rowIndex, context) : '',
|
||
|
|
stripe && rowIndex % 2 === 1 ? 'u-table-row-zebra' : ''
|
||
|
|
]" :style="[{height: rowHeight}, getRowStyle(row, rowIndex)]" @click="handleRowClick(row)">
|
||
|
|
<view v-for="(col, colIndex) in columns" :key="col.key"
|
||
|
|
class="u-table-cell"
|
||
|
|
:class="[col.align ? 'u-text-' + col.align : '',
|
||
|
|
cellClassName ? cellClassName(row, col, context) : '',
|
||
|
|
getFixedClass(col),
|
||
|
|
isOverflowTooltipEnabled(col) ? 'u-table-cell-overflow' : '',
|
||
|
|
getCellSpanClass(rowIndex, colIndex)
|
||
|
|
]"
|
||
|
|
:style="[cellStyleInner({row: row, column: col, rowIndex: rowIndex, columnIndex: colIndex, level: level}), getCellSpanStyle(rowIndex, colIndex)]">
|
||
|
|
<!-- 复选框列 -->
|
||
|
|
<view v-if="col.type === 'selection'">
|
||
|
|
<checkbox :checked="isSelected(row)"
|
||
|
|
@click.stop="$emit('toggleSelect', row)" />
|
||
|
|
</view>
|
||
|
|
<template v-else>
|
||
|
|
<!-- 在mainCol列显示展开图标 -->
|
||
|
|
<view v-if="col.key === computedMainCol && hasTree"
|
||
|
|
@click.stop="toggleExpand(row, level)" :style="{width: expandWidth}">
|
||
|
|
<view v-if="hasExpandableChildren(row)">
|
||
|
|
{{ isLazyLoading(row) ? '...' : (isExpanded(row) ? '▼' : '▶') }}
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="u-table-cell_content"
|
||
|
|
:class="{ 'u-table-cell_content-overflow': isOverflowTooltipEnabled(col) }">
|
||
|
|
<slot name="cellChild" :row="row" :column="col" :prow="parentRow"
|
||
|
|
:rowIndex="rowIndex" :columnIndex="colIndex" :level="level" :context="context">
|
||
|
|
<text class="u-table-cell_text" :class="{ 'u-line-1': isOverflowTooltipEnabled(col) }" :lines="isOverflowTooltipEnabled(col) ? 1 : undefined">
|
||
|
|
{{ row[col.key] }}
|
||
|
|
</text>
|
||
|
|
</slot>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<!-- 递归渲染更深层的子级 -->
|
||
|
|
<template v-if="isExpanded(row) && row[treeProps.children] && row[treeProps.children].length">
|
||
|
|
<template v-for="(rowChild, childIndex) in row[treeProps.children]" :key="rowChild[rowKey] || childIndex">
|
||
|
|
<table-row
|
||
|
|
:row="rowChild"
|
||
|
|
:rowIndex="childIndex"
|
||
|
|
:parent-row="row"
|
||
|
|
:columns="columns"
|
||
|
|
:tree-props="treeProps"
|
||
|
|
:row-key="rowKey"
|
||
|
|
:expanded-keys="expandedKeys"
|
||
|
|
:cell-style-inner="cellStyleInner"
|
||
|
|
:is-expanded="isExpanded"
|
||
|
|
:row-class-name="rowClassName"
|
||
|
|
:row-style="rowStyle"
|
||
|
|
:stripe="stripe"
|
||
|
|
:cell-class-name="cellClassName"
|
||
|
|
:get-fixed-class="getFixedClass"
|
||
|
|
:context="context"
|
||
|
|
:highlight-current-row="highlightCurrentRow"
|
||
|
|
:current-row="currentRow"
|
||
|
|
:handle-row-click="handleRowClick"
|
||
|
|
:toggle-expand="toggleExpand"
|
||
|
|
:level="level + 1"
|
||
|
|
:rowHeight="rowHeight"
|
||
|
|
:hasTree="hasTree"
|
||
|
|
:selectedRows="selectedRows"
|
||
|
|
:expandWidth="expandWidth"
|
||
|
|
:computed-main-col="computedMainCol"
|
||
|
|
:span-method="spanMethod"
|
||
|
|
:show-overflow-tooltip="showOverflowTooltip"
|
||
|
|
:has-expandable-children="hasExpandableChildren"
|
||
|
|
:is-lazy-loading="isLazyLoading"
|
||
|
|
@toggle-select="$emit('toggleSelect', $event)"
|
||
|
|
@row-click="$emit('rowClick', $event)"
|
||
|
|
@toggle-expand="$emit('toggleExpand', $event)"
|
||
|
|
>
|
||
|
|
<template v-slot:cellChild="scope">
|
||
|
|
<slot name="cellChild" :row="scope.row" :column="scope.column" :prow="scope.prow"
|
||
|
|
:rowIndex="scope.rowIndex" :columnIndex="scope.columnIndex" :level="level" :context="context">
|
||
|
|
<text class="u-table-cell_text" :class="{ 'u-line-1': isOverflowTooltipEnabled(scope.column) }" :lines="isOverflowTooltipEnabled(scope.column) ? 1 : undefined">
|
||
|
|
{{ scope.row[scope.column.key] }}
|
||
|
|
</text>
|
||
|
|
</slot>
|
||
|
|
</template>
|
||
|
|
</table-row>
|
||
|
|
</template>
|
||
|
|
</template>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: 'tableRow',
|
||
|
|
props: {
|
||
|
|
row: {
|
||
|
|
type: Object,
|
||
|
|
required: true
|
||
|
|
},
|
||
|
|
rowIndex: {
|
||
|
|
type: Number,
|
||
|
|
required: true
|
||
|
|
},
|
||
|
|
parentRow: {
|
||
|
|
type: Object,
|
||
|
|
default: null
|
||
|
|
},
|
||
|
|
columns: {
|
||
|
|
type: Array,
|
||
|
|
required: true
|
||
|
|
},
|
||
|
|
treeProps: {
|
||
|
|
type: Object,
|
||
|
|
required: true
|
||
|
|
},
|
||
|
|
rowKey: {
|
||
|
|
type: String,
|
||
|
|
required: true
|
||
|
|
},
|
||
|
|
expandedKeys: {
|
||
|
|
type: Array,
|
||
|
|
required: true
|
||
|
|
},
|
||
|
|
cellStyleInner: {
|
||
|
|
type: Function,
|
||
|
|
required: true
|
||
|
|
},
|
||
|
|
isExpanded: {
|
||
|
|
type: Function,
|
||
|
|
required: true
|
||
|
|
},
|
||
|
|
rowClassName: {
|
||
|
|
type: Function,
|
||
|
|
default: null
|
||
|
|
},
|
||
|
|
rowStyle: {
|
||
|
|
type: [Object, Function],
|
||
|
|
default: () => ({})
|
||
|
|
},
|
||
|
|
stripe: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false
|
||
|
|
},
|
||
|
|
cellClassName: {
|
||
|
|
type: Function,
|
||
|
|
default: null
|
||
|
|
},
|
||
|
|
getFixedClass: {
|
||
|
|
type: Function,
|
||
|
|
required: true
|
||
|
|
},
|
||
|
|
context: {
|
||
|
|
type: Object,
|
||
|
|
default: null
|
||
|
|
},
|
||
|
|
highlightCurrentRow: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false
|
||
|
|
},
|
||
|
|
currentRow: {
|
||
|
|
type: Object,
|
||
|
|
default: null
|
||
|
|
},
|
||
|
|
handleRowClick: {
|
||
|
|
type: Function,
|
||
|
|
required: true
|
||
|
|
},
|
||
|
|
toggleExpand: {
|
||
|
|
type: Function,
|
||
|
|
required: true
|
||
|
|
},
|
||
|
|
level: {
|
||
|
|
type: Number,
|
||
|
|
required: true
|
||
|
|
},
|
||
|
|
// 添加computedMainCol属性
|
||
|
|
computedMainCol: {
|
||
|
|
type: String,
|
||
|
|
required: true
|
||
|
|
},
|
||
|
|
showOverflowTooltip: {
|
||
|
|
type: [Boolean, Object],
|
||
|
|
default: false
|
||
|
|
},
|
||
|
|
expandWidth: {
|
||
|
|
type: String,
|
||
|
|
required: true
|
||
|
|
},
|
||
|
|
hasTree: {
|
||
|
|
type: Boolean,
|
||
|
|
required: false
|
||
|
|
},
|
||
|
|
selectedRows: {
|
||
|
|
type: Array,
|
||
|
|
required: false
|
||
|
|
},
|
||
|
|
rowHeight: {
|
||
|
|
type: String,
|
||
|
|
required: true
|
||
|
|
},
|
||
|
|
// 添加spanMethod属性
|
||
|
|
spanMethod: {
|
||
|
|
type: Function,
|
||
|
|
default: null
|
||
|
|
},
|
||
|
|
hasExpandableChildren: {
|
||
|
|
type: Function,
|
||
|
|
required: true
|
||
|
|
},
|
||
|
|
isLazyLoading: {
|
||
|
|
type: Function,
|
||
|
|
required: true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
emits: ['rowClick', 'toggleExpand', 'toggleSelect'],
|
||
|
|
methods: {
|
||
|
|
isSelected(row) {
|
||
|
|
return this.selectedRows.some(r => r[this.rowKey] === row[this.rowKey]);
|
||
|
|
},
|
||
|
|
isOverflowTooltipEnabled(column) {
|
||
|
|
if (column && column.type === 'selection') {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
if (column && typeof column.showOverflowTooltip !== 'undefined') {
|
||
|
|
return !!column.showOverflowTooltip;
|
||
|
|
}
|
||
|
|
return !!this.showOverflowTooltip;
|
||
|
|
},
|
||
|
|
getRowStyle(row, rowIndex) {
|
||
|
|
if (typeof this.rowStyle === 'function') {
|
||
|
|
return this.rowStyle({
|
||
|
|
row,
|
||
|
|
rowIndex,
|
||
|
|
level: this.level,
|
||
|
|
parentRow: this.parentRow,
|
||
|
|
context: this.context
|
||
|
|
}) || {};
|
||
|
|
}
|
||
|
|
return this.rowStyle || {};
|
||
|
|
},
|
||
|
|
// 获取单元格的合并信息
|
||
|
|
getCellSpan(rowIndex, columnIndex) {
|
||
|
|
if (typeof this.spanMethod !== 'function') {
|
||
|
|
return { rowspan: 1, colspan: 1 };
|
||
|
|
}
|
||
|
|
|
||
|
|
const row = this.row;
|
||
|
|
const column = this.columns[columnIndex];
|
||
|
|
|
||
|
|
const result = this.spanMethod({
|
||
|
|
row,
|
||
|
|
column,
|
||
|
|
rowIndex,
|
||
|
|
columnIndex,
|
||
|
|
context: this.context
|
||
|
|
});
|
||
|
|
|
||
|
|
if (Array.isArray(result)) {
|
||
|
|
const [rowspan, colspan] = result;
|
||
|
|
return { rowspan: rowspan != null ? rowspan : 1, colspan: colspan != null ? colspan : 1 };
|
||
|
|
} else if (typeof result === 'object') {
|
||
|
|
return {
|
||
|
|
rowspan: rowspan != null ? rowspan : 1,
|
||
|
|
colspan: colspan != null ? colspan : 1
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
return { rowspan: 1, colspan: 1 };
|
||
|
|
},
|
||
|
|
// 获取单元格的样式类
|
||
|
|
getCellSpanClass(rowIndex, columnIndex) {
|
||
|
|
const span = this.getCellSpan(rowIndex, columnIndex);
|
||
|
|
|
||
|
|
// 如果rowspan为0或colspan为0，表示该单元格被合并，需要隐藏
|
||
|
|
if (span.rowspan === 0 || span.colspan === 0) {
|
||
|
|
return 'u-table-cell-hidden';
|
||
|
|
} else if (span.rowspan > 1 || span.colspan > 1) {
|
||
|
|
// 如果有合并，添加合并样式类
|
||
|
|
return 'u-table-cell-merged';
|
||
|
|
}
|
||
|
|
|
||
|
|
return '';
|
||
|
|
},
|
||
|
|
// 获取单元格的样式
|
||
|
|
getCellSpanStyle(rowIndex, columnIndex) {
|
||
|
|
const span = this.getCellSpan(rowIndex, columnIndex);
|
||
|
|
const style = {};
|
||
|
|
|
||
|
|
// 设置rowspan
|
||
|
|
if (span.rowspan > 1) {
|
||
|
|
// 正确计算合并后的高度
|
||
|
|
const currentHeight = parseInt(this.rowHeight);
|
||
|
|
if (!isNaN(currentHeight)) {
|
||
|
|
style.height = `${span.rowspan * currentHeight}px`;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 设置colspan
|
||
|
|
if (span.colspan > 1) {
|
||
|
|
style.flex = span.colspan;
|
||
|
|
}
|
||
|
|
|
||
|
|
// 如果rowspan为0或colspan为0，表示该单元格被合并，需要隐藏
|
||
|
|
if (span.rowspan === 0 || span.colspan === 0) {
|
||
|
|
style.display = 'none';
|
||
|
|
}
|
||
|
|
|
||
|
|
return style;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|