331 lines
7.8 KiB
Vue
331 lines
7.8 KiB
Vue
|
<!-- components/uni-table/uni-table.vue -->
|
|||
|
|
<template>
|
|||
|
|
<view class="uni-table-container">
|
|||
|
|
<!-- 横向表格模式 -->
|
|||
|
|
<scroll-view
|
|||
|
|
v-if="mode === 'horizontal'"
|
|||
|
|
scroll-x
|
|||
|
|
class="horizontal-table"
|
|||
|
|
:style="{ maxHeight: height }"
|
|||
|
|
>
|
|||
|
|
<view class="table-header">
|
|||
|
|
<view
|
|||
|
|
v-for="(col, index) in columns"
|
|||
|
|
:key="index"
|
|||
|
|
class="header-cell"
|
|||
|
|
:style="getHeaderStyle(col)"
|
|||
|
|
>
|
|||
|
|
{{ col.title }}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view
|
|||
|
|
v-for="(row, rowIndex) in data"
|
|||
|
|
:key="rowIndex"
|
|||
|
|
class="table-row"
|
|||
|
|
:class="{ 'row-hover': rowHover }"
|
|||
|
|
@click="handleRowClick(row, rowIndex)"
|
|||
|
|
>
|
|||
|
|
<view
|
|||
|
|
v-for="(col, colIndex) in columns"
|
|||
|
|
:key="colIndex"
|
|||
|
|
class="body-cell"
|
|||
|
|
:style="getCellStyle(col)"
|
|||
|
|
>
|
|||
|
|
<slot
|
|||
|
|
v-if="col.slot"
|
|||
|
|
:name="col.slot"
|
|||
|
|
:row="row"
|
|||
|
|
:column="col"
|
|||
|
|
></slot>
|
|||
|
|
<text v-else>{{ formatCellValue(row[col.key], col) }}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view v-if="data.length === 0" class="empty-tip">
|
|||
|
|
<u-empty mode="data" icon="/static/empty.png"/>
|
|||
|
|
</view>
|
|||
|
|
</scroll-view>
|
|||
|
|
|
|||
|
|
<!-- 纵向表格模式 -->
|
|||
|
|
<scroll-view
|
|||
|
|
v-else
|
|||
|
|
scroll-y
|
|||
|
|
class="vertical-table"
|
|||
|
|
:style="{ maxHeight: height }"
|
|||
|
|
>
|
|||
|
|
<view
|
|||
|
|
v-for="(row, rowIndex) in data"
|
|||
|
|
:key="rowIndex"
|
|||
|
|
class="vertical-row"
|
|||
|
|
:class="{ 'row-hover': rowHover }"
|
|||
|
|
@click="handleRowClick(row, rowIndex)"
|
|||
|
|
>
|
|||
|
|
<view
|
|||
|
|
v-for="(col, colIndex) in columns"
|
|||
|
|
:key="colIndex"
|
|||
|
|
class="vertical-cell"
|
|||
|
|
>
|
|||
|
|
<view class="cell-label">{{ col.title }}：</view>
|
|||
|
|
<view class="cell-value">
|
|||
|
|
<slot
|
|||
|
|
v-if="col.slot"
|
|||
|
|
:name="col.slot"
|
|||
|
|
:row="row"
|
|||
|
|
:column="col"
|
|||
|
|
></slot>
|
|||
|
|
<text v-else>{{ formatCellValue(row[col.key], col) }}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view v-if="data.length === 0" class="empty-tip">
|
|||
|
|
<u-empty mode="data" icon="/static/empty.png"/>
|
|||
|
|
</view>
|
|||
|
|
</scroll-view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
name: 'UniTable',
|
|||
|
|
props: {
|
|||
|
|
// 表格模式：horizontal（横向）/vertical（纵向）
|
|||
|
|
mode: {
|
|||
|
|
type: String,
|
|||
|
|
default: 'horizontal',
|
|||
|
|
validator: value => ['horizontal', 'vertical'].includes(value)
|
|||
|
|
},
|
|||
|
|
// 列配置
|
|||
|
|
columns: {
|
|||
|
|
type: Array,
|
|||
|
|
required: true,
|
|||
|
|
},
|
|||
|
|
// 表格数据
|
|||
|
|
data: {
|
|||
|
|
type: Array,
|
|||
|
|
default: () => []
|
|||
|
|
},
|
|||
|
|
// 固定高度（支持px/rpx）
|
|||
|
|
height: {
|
|||
|
|
type: String,
|
|||
|
|
default: '1000rpx'
|
|||
|
|
},
|
|||
|
|
// 是否显示边框
|
|||
|
|
border: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: true
|
|||
|
|
},
|
|||
|
|
// 是否显示行hover效果
|
|||
|
|
rowHover: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: true
|
|||
|
|
},
|
|||
|
|
// 是否显示斑马纹
|
|||
|
|
stripe: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: false
|
|||
|
|
},
|
|||
|
|
// 是否显示序号列
|
|||
|
|
showIndex: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: false
|
|||
|
|
},
|
|||
|
|
// 序号列标题
|
|||
|
|
indexLabel: {
|
|||
|
|
type: String,
|
|||
|
|
default: '序号'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
computed: {
|
|||
|
|
// 处理后的列配置
|
|||
|
|
processedColumns() {
|
|||
|
|
let cols = [...this.columns]
|
|||
|
|
if (this.showIndex) {
|
|||
|
|
cols.unshift({
|
|||
|
|
title: this.indexLabel,
|
|||
|
|
key: '_index',
|
|||
|
|
width: '80rpx',
|
|||
|
|
align: 'center'
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
return cols
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
methods: {
|
|||
|
|
// 获取表头样式
|
|||
|
|
getHeaderStyle(col) {
|
|||
|
|
return {
|
|||
|
|
width: col.width || '200rpx',
|
|||
|
|
textAlign: col.align || 'left',
|
|||
|
|
flex: col.flex ? `0 0 ${col.width}` : 'none',
|
|||
|
|
backgroundColor: this.border ? '#f5f7fa' : 'transparent'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 获取单元格样式
|
|||
|
|
getCellStyle(col) {
|
|||
|
|
return {
|
|||
|
|
width: col.width || '200rpx',
|
|||
|
|
textAlign: col.align || 'left',
|
|||
|
|
flex: col.flex ? `0 0 ${col.width}` : 'none'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 行点击事件
|
|||
|
|
handleRowClick(row, index) {
|
|||
|
|
this.$emit('row-click', row, index)
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 格式化单元格值
|
|||
|
|
formatCellValue(value, col) {
|
|||
|
|
if (value === undefined || value === null) {
|
|||
|
|
return '--'
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 如果列定义了format函数，使用format函数处理
|
|||
|
|
if (col.format && typeof col.format === 'function') {
|
|||
|
|
return col.format(value)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 如果是日期类型
|
|||
|
|
if (col.type === 'date') {
|
|||
|
|
return this.formatDate(value, col.dateFormat)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 如果是数字类型
|
|||
|
|
if (col.type === 'number') {
|
|||
|
|
return this.formatNumber(value, col.precision)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return value
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 格式化日期
|
|||
|
|
formatDate(value, format = 'YYYY-MM-DD') {
|
|||
|
|
if (!value) return '--'
|
|||
|
|
// 这里可以使用日期格式化库，如dayjs
|
|||
|
|
return value
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 格式化数字
|
|||
|
|
formatNumber(value, precision) {
|
|||
|
|
if (typeof value !== 'number') return value
|
|||
|
|
return precision !== undefined ? value.toFixed(precision) : value
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.uni-table-container {
|
|||
|
|
background-color: #fff;
|
|||
|
|
border-radius: 12rpx;
|
|||
|
|
overflow: hidden;
|
|||
|
|
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
|
|||
|
|
|
|||
|
|
.horizontal-table {
|
|||
|
|
.table-header {
|
|||
|
|
display: flex;
|
|||
|
|
background-color: #f5f7fa;
|
|||
|
|
border-bottom: 2rpx solid #ebeef5;
|
|||
|
|
position: sticky;
|
|||
|
|
top: 0;
|
|||
|
|
z-index: 1;
|
|||
|
|
|
|||
|
|
.header-cell {
|
|||
|
|
padding: 24rpx;
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: #303133;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
transition: background-color 0.3s;
|
|||
|
|
position: relative;
|
|||
|
|
|
|||
|
|
&::after {
|
|||
|
|
content: '';
|
|||
|
|
position: absolute;
|
|||
|
|
right: 0;
|
|||
|
|
top: 50%;
|
|||
|
|
transform: translateY(-50%);
|
|||
|
|
height: 50%;
|
|||
|
|
width: 2rpx;
|
|||
|
|
background-color: #ebeef5;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.table-row {
|
|||
|
|
display: flex;
|
|||
|
|
border-bottom: 1rpx solid #ebeef5;
|
|||
|
|
transition: background-color 0.3s;
|
|||
|
|
|
|||
|
|
&:last-child {
|
|||
|
|
border-bottom: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.row-hover:active {
|
|||
|
|
background-color: #f5f7fa;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.body-cell {
|
|||
|
|
padding: 24rpx;
|
|||
|
|
color: #606266;
|
|||
|
|
word-break: break-all;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.vertical-table {
|
|||
|
|
.vertical-row {
|
|||
|
|
padding: 24rpx;
|
|||
|
|
border-bottom: 1rpx solid #ebeef5;
|
|||
|
|
transition: background-color 0.3s;
|
|||
|
|
|
|||
|
|
&:last-child {
|
|||
|
|
border-bottom: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.row-hover:active {
|
|||
|
|
background-color: #f5f7fa;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.vertical-cell {
|
|||
|
|
display: flex;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
|
|||
|
|
&:last-child {
|
|||
|
|
margin-bottom: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.cell-label {
|
|||
|
|
width: 200rpx;
|
|||
|
|
color: #909399;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.cell-value {
|
|||
|
|
flex: 1;
|
|||
|
|
color: #303133;
|
|||
|
|
word-break: break-all;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
padding-left: 20rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.empty-tip {
|
|||
|
|
padding: 80rpx 0;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
background-color: #fff;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|