uview-plus组件库全面升级更新，订单结算判断支付方式是否可用代码调整，公众号关注二维码修改
This commit is contained in:
328
uni_modules/uview-plus/components/u-table2/tableRow.vue
Normal file
328
uni_modules/uview-plus/components/u-table2/tableRow.vue
Normal file
@@ -0,0 +1,328 @@
|
||||
<style lang="scss" scoped>
|
||||
.u-table-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
// 添加border样式支持
|
||||
.u-table-border {
|
||||
border-top: 1px solid #ebeef5;
|
||||
border-left: 1px solid #ebeef5;
|
||||
border-right: 1px solid #ebeef5;
|
||||
.u-table-cell {
|
||||
border-right: 1px solid #ebeef5;
|
||||
}
|
||||
|
||||
.u-table-cell:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
|
||||
.u-table-cell {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 10px 1px;
|
||||
font-size: 14px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
line-height: 1.1;
|
||||
border-bottom: 1px solid #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-row-zebra {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.u-table-row-highlight {
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
|
||||
.u-table-empty {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
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) : '',
|
||||
stripe && rowIndex % 2 === 1 ? 'u-table-row-zebra' : ''
|
||||
]" :style="{height: rowHeight}" @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) : '',
|
||||
getFixedClass(col),
|
||||
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)" :style="{width: expandWidth}">
|
||||
<view v-if="row.children && row.children.length > 0">
|
||||
{{ isExpanded(row) ? '▼' : '▶' }}
|
||||
</view>
|
||||
</view>
|
||||
<slot name="cellChild" :row="row" :column="col" :prow="parentRow"
|
||||
:rowIndex="rowIndex" :columnIndex="colIndex" :level="level">
|
||||
<view class="u-table-cell_content">
|
||||
{{ row[col.key] }}
|
||||
</view>
|
||||
</slot>
|
||||
</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"
|
||||
:stripe="stripe"
|
||||
:cell-class-name="cellClassName"
|
||||
:get-fixed-class="getFixedClass"
|
||||
: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"
|
||||
@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">
|
||||
</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
|
||||
},
|
||||
stripe: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
cellClassName: {
|
||||
type: Function,
|
||||
default: null
|
||||
},
|
||||
getFixedClass: {
|
||||
type: Function,
|
||||
required: true
|
||||
},
|
||||
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
|
||||
},
|
||||
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
|
||||
}
|
||||
},
|
||||
emits: ['rowClick', 'toggleExpand', 'toggleSelect'],
|
||||
methods: {
|
||||
isSelected(row) {
|
||||
return this.selectedRows.some(r => r[this.rowKey] === row[this.rowKey]);
|
||||
},
|
||||
// 获取单元格的合并信息
|
||||
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
|
||||
});
|
||||
|
||||
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>
|
||||
756
uni_modules/uview-plus/components/u-table2/u-table2.vue
Normal file
756
uni_modules/uview-plus/components/u-table2/u-table2.vue
Normal file
@@ -0,0 +1,756 @@
|
||||
<template>
|
||||
<view class="u-table2" :class="{ 'u-table-border': border }">
|
||||
<scroll-view scroll-x scroll-y class="u-table2-content"
|
||||
:style="{ height: height ? addUnit(height) : 'auto' }"
|
||||
@scroll="onScroll">
|
||||
<!-- 表头 -->
|
||||
<view v-if="showHeader" class="u-table-header"
|
||||
:class="{ 'u-table-sticky': fixedHeader }"
|
||||
:style="{minWidth: scrollWidth}">
|
||||
<view class="u-table-row">
|
||||
<view v-for="(col, colIndex) in columns" :key="col.key" class="u-table-cell"
|
||||
:class="[col.headerAlign ? 'u-text-' + col.headerAlign : (col.align ? 'u-text-' + col.align : '') ,
|
||||
headerCellClassName ? headerCellClassName(col) : '',
|
||||
getFixedClass(col)
|
||||
]" :style="headerColStyle(col)" @click="handleHeaderClick(col)">
|
||||
<slot name="header" :column="col" :columnIndex="colIndex" :level="1">
|
||||
</slot>
|
||||
<text v-if="!$slots['header']">{{ col.title }}</text>
|
||||
<template v-if="col.sortable">
|
||||
<slot name="headerSort" :sortStatus="getSortValue(col.key)" :column="col"
|
||||
:columnIndex="colIndex" :level="1">
|
||||
</slot>
|
||||
<view v-if="!$slots['headerSort']">
|
||||
{{ getSortIcon(col.key) }}
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 表体 -->
|
||||
<view class="u-table-body" :style="{ minWidth: scrollWidth, maxHeight: maxHeight ? maxHeight + 'px' : 'none' }">
|
||||
<template v-if="data && data.length > 0">
|
||||
<table-row
|
||||
v-for="(row, rowIndex) in sortedData"
|
||||
:key="row[rowKey] || rowIndex"
|
||||
:row="row"
|
||||
:rowIndex="rowIndex"
|
||||
:parent-row="null"
|
||||
:columns="columns"
|
||||
:tree-props="treeProps"
|
||||
:row-key="rowKey"
|
||||
:expanded-keys="expandedKeys"
|
||||
:cell-style-inner="cellStyleInner"
|
||||
:is-expanded="isExpanded"
|
||||
:row-class-name="rowClassName"
|
||||
:stripe="stripe"
|
||||
:cell-class-name="cellClassName"
|
||||
:get-fixed-class="getFixedClass"
|
||||
:highlight-current-row="highlightCurrentRow"
|
||||
:current-row="currentRow"
|
||||
:handle-row-click="handleRowClick"
|
||||
:toggle-expand="toggleExpand"
|
||||
:level="1"
|
||||
:rowHeight="rowHeight"
|
||||
:hasTree="hasTree"
|
||||
:selectedRows="selectedRows"
|
||||
:expandWidth="expandWidth"
|
||||
:computedMainCol="computedMainCol"
|
||||
:span-method="spanMethod"
|
||||
@toggle-select="toggleSelect"
|
||||
@row-click="handleRowClick"
|
||||
@toggle-expand="toggleExpand"
|
||||
>
|
||||
<template v-slot:cellChild="scope">
|
||||
<slot name="cell" :row="scope.row" :column="scope.column" :prow="scope.prow"
|
||||
:rowIndex="scope.rowIndex" :columnIndex="scope.columnIndex" :level="scope.level">
|
||||
</slot>
|
||||
</template>
|
||||
</table-row>
|
||||
</template>
|
||||
<template v-else>
|
||||
<slot name="empty">
|
||||
</slot>
|
||||
<view v-if="!$slots['empty']" class="u-table-empty">{{ emptyText }}</view>
|
||||
</template>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 固定列浮动视图 -->
|
||||
<view v-if="showFixedColumnShadow" class="u-table-fixed-shadow" :style="{ height: tableHeight }">
|
||||
<!-- 表头 -->
|
||||
<view v-if="showHeader" class="u-table-header" :class="{ 'u-table-sticky': fixedHeader }" :style="{minWidth: scrollWidth}">
|
||||
<view class="u-table-row" :style="{height: headerHeight}">
|
||||
<view v-for="(col, colIndex) in visibleFixedLeftColumns" :key="col.key" class="u-table-cell"
|
||||
:style="headerColStyle(col)"
|
||||
:class="[col.align ? 'u-text-' + col.align : '',
|
||||
headerCellClassName ? headerCellClassName(col) : '',
|
||||
getFixedClass(col)
|
||||
]" @click="handleHeaderClick(col)">
|
||||
<slot name="header" :column="col" :columnIndex="colIndex" :level="1">
|
||||
</slot>
|
||||
<text v-if="!$slots['header']">{{ col.title }}</text>
|
||||
<template v-if="col.sortable">
|
||||
<slot name="headerSort" :sortStatus="getSortValue(col.key)" :column="col"
|
||||
:columnIndex="colIndex" :level="1">
|
||||
</slot>
|
||||
<view v-if="!$slots['headerSort']">
|
||||
{{ getSortIcon(col.key) }}
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 表体 -->
|
||||
<view class="u-table-body" :style="{ minWidth: scrollWidth, maxHeight: maxHeight ? maxHeight + 'px' : 'none' }">
|
||||
<template v-if="data && data.length > 0">
|
||||
<template v-for="(row, rowIndex) in sortedData" :key="row[rowKey] || rowIndex">
|
||||
<!-- 子级渲染 (递归组件) -->
|
||||
<table-row
|
||||
:row="row"
|
||||
:rowIndex="rowIndex"
|
||||
:parent-row="null"
|
||||
:columns="visibleFixedLeftColumns"
|
||||
:tree-props="treeProps"
|
||||
:row-key="rowKey"
|
||||
:expanded-keys="expandedKeys"
|
||||
:cell-style-inner="cellStyleInner"
|
||||
:is-expanded="isExpanded"
|
||||
:row-class-name="rowClassName"
|
||||
:stripe="stripe"
|
||||
:cell-class-name="cellClassName"
|
||||
:get-fixed-class="getFixedClass"
|
||||
:highlight-current-row="highlightCurrentRow"
|
||||
:current-row="currentRow"
|
||||
:handle-row-click="handleRowClick"
|
||||
:toggle-expand="toggleExpand"
|
||||
:level="1"
|
||||
:rowHeight="rowHeight"
|
||||
:hasTree="hasTree"
|
||||
:selectedRows="selectedRows"
|
||||
:expandWidth="expandWidth"
|
||||
:computedMainCol="computedMainCol"
|
||||
:span-method="spanMethod"
|
||||
@toggle-select="toggleSelect"
|
||||
@row-click="handleRowClick"
|
||||
@toggle-expand="toggleExpand"
|
||||
>
|
||||
<template v-slot:cellChild="scope">
|
||||
<slot name="cell" :row="scope.row" :column="scope.column" :prow="scope.prow"
|
||||
:rowIndex="scope.rowIndex" :columnIndex="scope.columnIndex" :level="scope.level">
|
||||
</slot>
|
||||
</template>
|
||||
</table-row>
|
||||
</template>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { addUnit, sleep } from '../../libs/function/index';
|
||||
import tableRow from './tableRow.vue'; // 引入递归组件
|
||||
|
||||
export default {
|
||||
name: 'u-table2',
|
||||
components: {
|
||||
tableRow // 注册递归组件
|
||||
},
|
||||
props: {
|
||||
data: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
},
|
||||
columns: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => {
|
||||
return []
|
||||
},
|
||||
validator: cols =>
|
||||
cols.every(col =>
|
||||
['default', 'selection', 'expand'].includes(col.type || 'default')
|
||||
)
|
||||
},
|
||||
stripe: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
border: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
height: {
|
||||
type: [String, Number],
|
||||
default: null
|
||||
},
|
||||
maxHeight: {
|
||||
type: [String, Number],
|
||||
default: null
|
||||
},
|
||||
showHeader: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
highlightCurrentRow: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
rowKey: {
|
||||
type: String,
|
||||
default: 'id'
|
||||
},
|
||||
currentRowKey: {
|
||||
type: [String, Number],
|
||||
default: null
|
||||
},
|
||||
rowStyle: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
cellClassName: {
|
||||
type: Function,
|
||||
default: null
|
||||
},
|
||||
cellStyle: {
|
||||
type: Function,
|
||||
default: null
|
||||
},
|
||||
headerCellClassName: {
|
||||
type: Function,
|
||||
default: null
|
||||
},
|
||||
rowClassName: {
|
||||
type: Function,
|
||||
default: null
|
||||
},
|
||||
context: {
|
||||
type: Object,
|
||||
default: null
|
||||
},
|
||||
showOverflowTooltip: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
lazy: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
load: {
|
||||
type: Function,
|
||||
default: null
|
||||
},
|
||||
treeProps: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
children: 'children',
|
||||
hasChildren: 'hasChildren'
|
||||
})
|
||||
},
|
||||
defaultExpandAll: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
expandRowKeys: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
sortOrders: {
|
||||
type: Array,
|
||||
default: () => ['ascending', 'descending']
|
||||
},
|
||||
sortable: {
|
||||
type: [Boolean, String],
|
||||
default: false
|
||||
},
|
||||
multiSort: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
sortBy: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
sortMethod: {
|
||||
type: Function,
|
||||
default: null
|
||||
},
|
||||
filters: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
fixedHeader: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
emptyText: {
|
||||
type: String,
|
||||
default: '暂无数据'
|
||||
},
|
||||
// 添加mainCol属性，用于指定树形结构展开控制图标所在的列
|
||||
mainCol: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
expandWidth: {
|
||||
type: String,
|
||||
default: '25px'
|
||||
},
|
||||
rowHeight: {
|
||||
type: String,
|
||||
default: '36px'
|
||||
},
|
||||
// 添加spanMethod属性，用于合并单元格
|
||||
spanMethod: {
|
||||
type: Function,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
emits: [
|
||||
'select', 'select-all', 'selection-change',
|
||||
'cell-click', 'row-click', 'row-dblclick',
|
||||
'header-click', 'sort-change', 'filter-change',
|
||||
'current-change', 'expand-change'
|
||||
],
|
||||
data() {
|
||||
return {
|
||||
scrollWidth: 'auto',
|
||||
// 将setup中的ref转换为data属性
|
||||
expandedKeys: [...this.expandRowKeys],
|
||||
selectedRows: [],
|
||||
sortConditions: [],
|
||||
currentRow: null,
|
||||
scrollLeft: 0, // 新增滚动位置数据
|
||||
showFixedColumnShadow: false, // 是否显示固定列阴影
|
||||
fixedLeftColumns: [], // 左侧固定列
|
||||
tableHeight: 'auto', // 表格高度
|
||||
headerHeight: 'auto', // 新增表头高度属性
|
||||
hasTree: false // 新增属性，用于判断是否存在树形结构
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getComponentWidth()
|
||||
// 处理currentRowKey初始化
|
||||
if (this.currentRowKey !== null) {
|
||||
const found = this.data.find(item => item[this.rowKey] === this.currentRowKey);
|
||||
if (found) {
|
||||
this.currentRow = found;
|
||||
}
|
||||
}
|
||||
// 获取固定列
|
||||
this.fixedLeftColumns = this.columns.filter(col => col.fixed === 'left');
|
||||
},
|
||||
computed: {
|
||||
// 将setup中的computed转换为computed属性
|
||||
filteredData() {
|
||||
return this.data.filter(row => {
|
||||
return Object.keys(this.filters).every(key => {
|
||||
const filter = this.filters[key];
|
||||
if (!filter) return true;
|
||||
return row[key]?.toString().includes(filter.toString());
|
||||
});
|
||||
});
|
||||
},
|
||||
sortedData() {
|
||||
if (!this.sortConditions.length) return this.filteredData;
|
||||
|
||||
const data = [...this.filteredData];
|
||||
|
||||
return data.sort((a, b) => {
|
||||
for (const condition of this.sortConditions) {
|
||||
const { field, order } = condition;
|
||||
let valA = a[field];
|
||||
let valB = b[field];
|
||||
|
||||
if (this.sortMethod) {
|
||||
const result = this.sortMethod(a, b, field);
|
||||
if (result !== 0) return result * (order === 'ascending' ? 1 : -1);
|
||||
}
|
||||
|
||||
if (valA < valB) return order === 'ascending' ? -1 : 1;
|
||||
if (valA > valB) return order === 'ascending' ? 1 : -1;
|
||||
}
|
||||
return 0;
|
||||
});
|
||||
},
|
||||
// 计算当前应该显示的固定左侧列
|
||||
visibleFixedLeftColumns() {
|
||||
if (this.scrollLeft <= 0) {
|
||||
return [];
|
||||
}
|
||||
|
||||
let totalWidth = 0;
|
||||
let fixedWidth = 0;
|
||||
const visibleColumns = [];
|
||||
|
||||
// 遍历所有列，不仅仅是固定列
|
||||
for (let i = 0; i < this.columns.length; i++) {
|
||||
const col = this.columns[i];
|
||||
const colWidth = col.width ? parseInt(col.width) : 100; // 默认宽度100px
|
||||
|
||||
// 如果是固定列且滚动位置足够显示该列
|
||||
if (col.fixed === 'left' && this.scrollLeft > totalWidth - fixedWidth) {
|
||||
visibleColumns.push(col);
|
||||
fixedWidth += colWidth;
|
||||
}
|
||||
|
||||
totalWidth += colWidth;
|
||||
}
|
||||
|
||||
return visibleColumns;
|
||||
},
|
||||
// 获取mainCol的值，如果未设置则默认为第一列的key
|
||||
computedMainCol() {
|
||||
if (this.mainCol) {
|
||||
return this.mainCol;
|
||||
}
|
||||
// 修改为排除有type值的列
|
||||
const validColumns = this.columns.filter(col => !col.type);
|
||||
let mainCol = validColumns && validColumns.length > 0 ? validColumns[0].key : '';
|
||||
// console.log('mainCol', mainCol)
|
||||
return mainCol;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
// 将setup中的watch转换为watch属性
|
||||
expandRowKeys: {
|
||||
handler(newVal) {
|
||||
this.expandedKeys = [...newVal];
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
currentRowKey: {
|
||||
handler(newVal) {
|
||||
const found = this.data.find(item => item[this.rowKey] === newVal);
|
||||
if (found) {
|
||||
this.currentRow = found;
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
columns: {
|
||||
handler() {
|
||||
// this.fixedLeftColumns = this.columns.filter(col => col.fixed === 'left');
|
||||
},
|
||||
deep: true,
|
||||
immediate: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
addUnit,
|
||||
onScroll(e) {
|
||||
this.scrollLeft = e.detail.scrollLeft;
|
||||
// 获取所有左侧固定列
|
||||
this.fixedLeftColumns = this.columns.filter(col => col.fixed === 'left');
|
||||
// 计算是否需要显示固定列阴影
|
||||
if (this.fixedLeftColumns.length > 0) {
|
||||
this.showFixedColumnShadow = this.scrollLeft > 0;
|
||||
}
|
||||
},
|
||||
|
||||
getFixedShadowStyle(col, index) {
|
||||
let style = {
|
||||
width: col.width ? addUnit(col.width) : 'auto',
|
||||
};
|
||||
|
||||
if (col?.style) {
|
||||
style = {...style, ...col?.style};
|
||||
}
|
||||
|
||||
return style;
|
||||
},
|
||||
|
||||
getFixedClass(col) {
|
||||
return ''; // 不再使用原来的固定列样式类
|
||||
},
|
||||
|
||||
headerColStyle(col) {
|
||||
let style = {
|
||||
width: col.width ? addUnit(col.width) : 'auto',
|
||||
flex: col.width ? 'none' : 1
|
||||
};
|
||||
if (col?.style) {
|
||||
style = {...style, ...col?.style};
|
||||
}
|
||||
return style;
|
||||
},
|
||||
|
||||
setCellStyle(e) {
|
||||
this.cellStyle = e
|
||||
},
|
||||
cellStyleInner(scope) {
|
||||
let style = {
|
||||
width: scope.column?.width ? addUnit(scope.column.width) : 'auto',
|
||||
flex: scope.column?.width ? 'none' : 1
|
||||
};
|
||||
// 只有展开列设置padding
|
||||
if (scope.column.key == this.computedMainCol) {
|
||||
style.paddingLeft = (16 * (scope.level -1 )) + 2 + 'px'
|
||||
}
|
||||
if (this.cellStyle != null) {
|
||||
let styleCalc = this.cellStyle(scope)
|
||||
if (styleCalc != null) {
|
||||
style = {...style, ...styleCalc}
|
||||
}
|
||||
}
|
||||
return style;
|
||||
},
|
||||
// 获取组件的宽度
|
||||
async getComponentWidth() {
|
||||
// 延时一定时间，以获取dom尺寸
|
||||
await sleep(30)
|
||||
this.$uGetRect('.u-table-row').then(size => {
|
||||
this.scrollWidth = size.width + 'px'
|
||||
})
|
||||
|
||||
// 获取表头高度并设置
|
||||
this.$uGetRect('.u-table-header').then(size => {
|
||||
if (size.height) {
|
||||
this.headerHeight = size.height + 'px';
|
||||
}
|
||||
})
|
||||
|
||||
// 遍历数据列表第一层判断是否存在树形结构
|
||||
this.hasTree = this.sortedData.some(item => {
|
||||
return item[this.treeProps.children] && item[this.treeProps.children].length > 0;
|
||||
});
|
||||
},
|
||||
// 将setup中的函数转换为methods
|
||||
handleRowClick(row) {
|
||||
if (this.highlightCurrentRow) {
|
||||
const oldRow = this.currentRow;
|
||||
this.currentRow = row;
|
||||
this.$emit('current-change', row, oldRow);
|
||||
}
|
||||
this.$emit('row-click', row);
|
||||
},
|
||||
handleHeaderClick(column) {
|
||||
if (!column.sortable) return;
|
||||
|
||||
const index = this.sortConditions.findIndex(c => c.field === column.key);
|
||||
let newOrder = 'ascending';
|
||||
|
||||
if (index >= 0) {
|
||||
if (this.sortConditions[index].order === 'ascending') {
|
||||
newOrder = 'descending';
|
||||
} else {
|
||||
this.sortConditions.splice(index, 1);
|
||||
this.$emit('sort-change', this.sortConditions);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
if (!this.multiSort) {
|
||||
this.sortConditions = [{ field: column.key, order: newOrder }];
|
||||
} else {
|
||||
if (index >= 0) {
|
||||
this.sortConditions[index].order = newOrder;
|
||||
} else {
|
||||
this.sortConditions.push({ field: column.key, order: newOrder });
|
||||
}
|
||||
}
|
||||
|
||||
this.$emit('sort-change', this.sortConditions);
|
||||
},
|
||||
getSortIcon(field) {
|
||||
const cond = this.sortConditions.find(c => c.field === field);
|
||||
if (!cond) return '';
|
||||
return cond.order === 'ascending' ? '↑' : '↓';
|
||||
},
|
||||
getSortValue(field) {
|
||||
const cond = this.sortConditions.find(c => c.field === field);
|
||||
if (!cond) return '';
|
||||
return cond.order === 'ascending';
|
||||
},
|
||||
toggleSelect(row) {
|
||||
const index = this.selectedRows.findIndex(r => r[this.rowKey] === row[this.rowKey]);
|
||||
if (index >= 0) {
|
||||
// 取消选中当前行及其所有子节点
|
||||
this.selectedRows.splice(index, 1);
|
||||
// 递归取消所有子节点
|
||||
this.unselectChildren(row);
|
||||
} else {
|
||||
// 选中当前行及其所有子节点
|
||||
this.selectedRows.push(row);
|
||||
// 递归选中所有子节点
|
||||
this.selectChildren(row);
|
||||
}
|
||||
console.log(this.selectedRows)
|
||||
this.$emit('selection-change', this.selectedRows);
|
||||
this.$emit('select', row);
|
||||
},
|
||||
toggleExpand(row) {
|
||||
// console.log(row)
|
||||
const key = row[this.rowKey];
|
||||
const index = this.expandedKeys.indexOf(key);
|
||||
if (index === -1) {
|
||||
this.expandedKeys.push(key);
|
||||
} else {
|
||||
this.expandedKeys.splice(index, 1);
|
||||
}
|
||||
this.$emit('expand-change', this.expandedKeys);
|
||||
},
|
||||
isExpanded(row) {
|
||||
if (!row) {
|
||||
return false;
|
||||
}
|
||||
return this.expandedKeys.includes(row[this.rowKey]);
|
||||
},
|
||||
// 新增方法：递归选中所有子节点
|
||||
selectChildren(row) {
|
||||
const children = row[this.treeProps.children];
|
||||
if (children && children.length > 0) {
|
||||
children.forEach(child => {
|
||||
// 检查是否已选中，避免重复添加
|
||||
const childIndex = this.selectedRows.findIndex(r => r[this.rowKey] === child[this.rowKey]);
|
||||
if (childIndex === -1) {
|
||||
this.selectedRows.push(child);
|
||||
}
|
||||
// 递归处理子节点的子节点
|
||||
this.selectChildren(child);
|
||||
});
|
||||
}
|
||||
},
|
||||
// 新增方法：递归取消选中所有子节点
|
||||
unselectChildren(row) {
|
||||
const children = row[this.treeProps.children];
|
||||
if (children && children.length > 0) {
|
||||
children.forEach(child => {
|
||||
const childIndex = this.selectedRows.findIndex(r => r[this.rowKey] === child[this.rowKey]);
|
||||
if (childIndex >= 0) {
|
||||
this.selectedRows.splice(childIndex, 1);
|
||||
}
|
||||
// 递归处理子节点的子节点
|
||||
this.unselectChildren(child);
|
||||
});
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-table2 {
|
||||
width: auto;
|
||||
overflow: auto;
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
|
||||
.u-table-header {
|
||||
min-width: 100% !important;
|
||||
width: fit-content;
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
|
||||
.u-table-body {
|
||||
min-width: 100% !important;
|
||||
width: fit-content;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.u-table-sticky {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.u-table-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
// min-height: 40px;
|
||||
}
|
||||
|
||||
// 添加border样式支持
|
||||
&.u-table-border {
|
||||
border-top: 1px solid #ebeef5;
|
||||
border-left: 1px solid #ebeef5;
|
||||
border-right: 1px solid #ebeef5;
|
||||
.u-table-cell {
|
||||
border-right: 1px solid #ebeef5;
|
||||
}
|
||||
|
||||
.u-table-cell:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
|
||||
.u-table-cell {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 10px 1px;
|
||||
font-size: 14px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
line-height: 1.1;
|
||||
border-bottom: 1px solid #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-row-zebra {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.u-table-row-highlight {
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
|
||||
.u-table-empty {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
// 固定列浮动视图
|
||||
.u-table-fixed-shadow {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: auto;
|
||||
z-index: 20;
|
||||
box-shadow: 2px 0 5px rgba(0, 0, 0, 0.15);
|
||||
overflow: hidden;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
// .u-table-fixed-row {
|
||||
// display: flex;
|
||||
// flex-direction: row;
|
||||
// align-items: center;
|
||||
// border-bottom: 1rpx solid #ebeef5;
|
||||
// position: relative;
|
||||
// }
|
||||
|
||||
// 为固定列也添加border样式支持
|
||||
.u-table-fixed-shadow .u-table-border {
|
||||
.u-table-cell {
|
||||
border-right: 1rpx solid #ebeef5;
|
||||
}
|
||||
|
||||
.u-table-cell:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user