518 lines
16 KiB
Vue
518 lines
16 KiB
Vue
|
<template>
|
|||
|
|
<view scroll-x class="u-table2" :style="{ height: height ? height + 'px' : 'auto' }">
|
|||
|
|
<!-- 表头 -->
|
|||
|
|
<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"
|
|||
|
|
:style="headerColStyle(col)"
|
|||
|
|
:class="[
|
|||
|
|
col.align ? 'u-text-' + col.align : '',
|
|||
|
|
headerCellClassName ? headerCellClassName(col) : '',
|
|||
|
|
col.fixed === 'left' ? 'u-table-fixed-left' : '',
|
|||
|
|
col.fixed === 'right' ? 'u-table-fixed-right' : ''
|
|||
|
|
]" @click="handleHeaderClick(col)">
|
|||
|
|
<slot name="header" :column="col" :columnIndex="colIndex" :level="1">
|
|||
|
|
{{ col.title }}
|
|||
|
|
</slot>
|
|||
|
|
<view v-if="col.sortable">
|
|||
|
|
{{ getSortIcon(col.key) }}
|
|||
|
|
</view>
|
|||
|
|
</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, index) in sortedData" :key="row[rowKey] || index">
|
|||
|
|
<view class="u-table-row" :class="[
|
|||
|
|
highlightCurrentRow && currentRow === row ? 'u-table-row-highlight' : '',
|
|||
|
|
rowClassName ? rowClassName(row, index) : '',
|
|||
|
|
stripe && index % 2 === 1 ? 'u-table-row-zebra' : ''
|
|||
|
|
]" @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) : '',
|
|||
|
|
col.fixed === 'left' ? 'u-table-fixed-left' : '',
|
|||
|
|
col.fixed === 'right' ? 'u-table-fixed-right' : ''
|
|||
|
|
]" :style="cellStyleInner({row: row, column: col,
|
|||
|
|
rowIndex: index, columnIndex: colIndex, level: 0})">
|
|||
|
|
<!-- 复选框列 -->
|
|||
|
|
<view v-if="col.type === 'selection'">
|
|||
|
|
<checkbox :checked="isSelected(row)"
|
|||
|
|
@click.stop="toggleSelect(row)" />
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 树形结构展开图标 -->
|
|||
|
|
<view v-else-if="col.type === 'expand'"
|
|||
|
|
@click.stop="toggleExpand(row)">
|
|||
|
|
{{ isExpanded(row) ? '▼' : '▶' }}
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 默认插槽或文本 -->
|
|||
|
|
<slot name="cell" :row="row" :column="col"
|
|||
|
|
:rowIndex="index" :columnIndex="colIndex">
|
|||
|
|
<view class="u-table-cell_content">
|
|||
|
|
{{ row[col.key] }}
|
|||
|
|
</view>
|
|||
|
|
</slot>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 子级渲染 -->
|
|||
|
|
<template v-if="isExpanded(row) && row[treeProps.children] && row[treeProps.children].length">
|
|||
|
|
<view v-for="childRow in row[treeProps.children]" :key="childRow[rowKey]"
|
|||
|
|
class="u-table-row u-table-row-child">
|
|||
|
|
<view v-for="(col2, col2Index) in columns" :key="col2.key" class="u-table-cell"
|
|||
|
|
:style="cellStyleInner({row: childRow, column: col2,
|
|||
|
|
rowIndex: index, columnIndex: col2Index, level: 1})">
|
|||
|
|
<slot name="cell" :row="childRow" :column="col2" :prow="row"
|
|||
|
|
:rowIndex="index" :columnIndex="col2Index" :level="1">
|
|||
|
|
<view class="u-table-cell_content">
|
|||
|
|
{{ childRow[col2.key] }}
|
|||
|
|
</view>
|
|||
|
|
</slot>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
</template>
|
|||
|
|
</template>
|
|||
|
|
<template v-else>
|
|||
|
|
<slot name="empty">
|
|||
|
|
<view class="u-table-empty">{{ emptyText }}</view>
|
|||
|
|
</slot>
|
|||
|
|
</template>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import { ref, watch, computed } from 'vue'
|
|||
|
|
import { addUnit, sleep } from '../../libs/function/index';
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
name: 'u-table2',
|
|||
|
|
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: '暂无数据'
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
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'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
this.getComponentWidth()
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
addUnit,
|
|||
|
|
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,
|
|||
|
|
paddingLeft: (24 * scope.level) + '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'
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
setup(props, { emit }) {
|
|||
|
|
const expandedKeys = ref([...props.expandRowKeys]);
|
|||
|
|
const selectedRows = ref([]);
|
|||
|
|
const sortConditions = ref([]);
|
|||
|
|
|
|||
|
|
// 当前高亮行
|
|||
|
|
const currentRow = ref(null);
|
|||
|
|
|
|||
|
|
watch(
|
|||
|
|
() => props.expandRowKeys,
|
|||
|
|
newVal => {
|
|||
|
|
expandedKeys.value = [...newVal];
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
watch(
|
|||
|
|
() => props.currentRowKey,
|
|||
|
|
newVal => {
|
|||
|
|
const found = props.data.find(item => item[props.rowKey] === newVal);
|
|||
|
|
if (found) {
|
|||
|
|
currentRow.value = found;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
// 过滤后的数据
|
|||
|
|
const filteredData = computed(() => {
|
|||
|
|
return props.data.filter(row => {
|
|||
|
|
return Object.keys(props.filters).every(key => {
|
|||
|
|
const filter = props.filters[key];
|
|||
|
|
if (!filter) return true;
|
|||
|
|
return row[key]?.toString().includes(filter.toString());
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 排序后的数据
|
|||
|
|
const sortedData = computed(() => {
|
|||
|
|
if (!sortConditions.value.length) return filteredData.value;
|
|||
|
|
|
|||
|
|
const data = [...filteredData.value];
|
|||
|
|
|
|||
|
|
return data.sort((a, b) => {
|
|||
|
|
for (const condition of sortConditions.value) {
|
|||
|
|
const { field, order } = condition;
|
|||
|
|
let valA = a[field];
|
|||
|
|
let valB = b[field];
|
|||
|
|
|
|||
|
|
if (props.sortMethod) {
|
|||
|
|
const result = props.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;
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
function handleRowClick(row) {
|
|||
|
|
if (props.highlightCurrentRow) {
|
|||
|
|
const oldRow = currentRow.value;
|
|||
|
|
currentRow.value = row;
|
|||
|
|
emit('current-change', row, oldRow);
|
|||
|
|
}
|
|||
|
|
emit('row-click', row);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function handleHeaderClick(column) {
|
|||
|
|
if (!column.sortable) return;
|
|||
|
|
|
|||
|
|
const index = sortConditions.value.findIndex(c => c.field === column.key);
|
|||
|
|
let newOrder = 'ascending';
|
|||
|
|
|
|||
|
|
if (index >= 0) {
|
|||
|
|
if (sortConditions.value[index].order === 'ascending') {
|
|||
|
|
newOrder = 'descending';
|
|||
|
|
} else {
|
|||
|
|
sortConditions.value.splice(index, 1);
|
|||
|
|
emit('sort-change', sortConditions.value);
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (!props.multiSort) {
|
|||
|
|
sortConditions.value = [{ field: column.key, order: newOrder }];
|
|||
|
|
} else {
|
|||
|
|
if (index >= 0) {
|
|||
|
|
sortConditions.value[index].order = newOrder;
|
|||
|
|
} else {
|
|||
|
|
sortConditions.value.push({ field: column.key, order: newOrder });
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
emit('sort-change', sortConditions.value);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function getSortIcon(field) {
|
|||
|
|
const cond = sortConditions.value.find(c => c.field === field);
|
|||
|
|
if (!cond) return '';
|
|||
|
|
return cond.order === 'ascending' ? '↑' : '↓';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function toggleSelect(row) {
|
|||
|
|
const index = selectedRows.value.findIndex(r => r[props.rowKey] === row[props.rowKey]);
|
|||
|
|
if (index >= 0) {
|
|||
|
|
selectedRows.value.splice(index, 1);
|
|||
|
|
} else {
|
|||
|
|
selectedRows.value.push(row);
|
|||
|
|
}
|
|||
|
|
emit('selection-change', selectedRows.value);
|
|||
|
|
emit('select', row);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function isSelected(row) {
|
|||
|
|
return selectedRows.value.some(r => r[props.rowKey] === row[props.rowKey]);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function toggleExpand(row) {
|
|||
|
|
const key = row[props.rowKey];
|
|||
|
|
const index = expandedKeys.value.indexOf(key);
|
|||
|
|
if (index === -1) {
|
|||
|
|
expandedKeys.value.push(key);
|
|||
|
|
} else {
|
|||
|
|
expandedKeys.value.splice(index, 1);
|
|||
|
|
}
|
|||
|
|
emit('expand-change', expandedKeys.value);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function isExpanded(row) {
|
|||
|
|
return expandedKeys.value.includes(row[props.rowKey]);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return {
|
|||
|
|
currentRow,
|
|||
|
|
sortedData,
|
|||
|
|
expandedKeys,
|
|||
|
|
selectedRows,
|
|||
|
|
sortConditions,
|
|||
|
|
handleRowClick,
|
|||
|
|
handleHeaderClick,
|
|||
|
|
getSortIcon,
|
|||
|
|
toggleSelect,
|
|||
|
|
isSelected,
|
|||
|
|
toggleExpand,
|
|||
|
|
isExpanded
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.u-table2 {
|
|||
|
|
width: auto;
|
|||
|
|
overflow: auto;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
|
|||
|
|
.u-table-header {
|
|||
|
|
min-width: 100% !important;
|
|||
|
|
width: fit-content;
|
|||
|
|
background-color: #f5f7fa;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.u-table-body {
|
|||
|
|
min-width: 100% !important;
|
|||
|
|
width: fit-content;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.u-table-sticky {
|
|||
|
|
position: sticky;
|
|||
|
|
top: 0;
|
|||
|
|
z-index: 10;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.u-table-row {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
align-items: center;
|
|||
|
|
border-bottom: 1rpx solid #ebeef5;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.u-table-cell {
|
|||
|
|
flex: 1;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
padding: 5px 4px;
|
|||
|
|
font-size: 14px;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
overflow: hidden;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.u-table-fixed-left {
|
|||
|
|
position: sticky;
|
|||
|
|
left: 0;
|
|||
|
|
z-index: 9;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.u-table-fixed-right {
|
|||
|
|
position: sticky;
|
|||
|
|
right: 0;
|
|||
|
|
z-index: 9;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.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-text-left {
|
|||
|
|
text-align: left;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.u-text-center {
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.u-text-right {
|
|||
|
|
text-align: right;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|