386 lines
12 KiB
Vue
386 lines
12 KiB
Vue
<template>
|
|
<view v-if="show" class="u-table__column" :style="[columnStyle]">
|
|
<block v-for="(row, index) in tableData" :key="index">
|
|
<view class="u-table__cell" :style="[cellStyles(row, index)]" :class="[cellClasses(row, index)]"
|
|
@click="handleCellClick(row, index)" v-if="!isCellHidden(row, index)">
|
|
<view class="u-table__value" :class="{ 'is-ellipsis': isEllipsis }">
|
|
<slot :row="row" :column="columnConfig" :index="index" :value="row">
|
|
<template v-if="type === 'index'">
|
|
{{ index + 1 }}
|
|
</template>
|
|
<template v-else-if="type === 'selection'">
|
|
<u-checkbox :checked="isSelectionSelected(row)"
|
|
@change="(checked) => handleSelectionChange(row, checked)"></u-checkbox>
|
|
</template>
|
|
<template v-else>
|
|
{{ getCellValue(row) }}
|
|
</template>
|
|
</slot>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import props from './props.js';
|
|
import mixin from '../../libs/mixin/mixin'
|
|
import mpMixin from '../../libs/mixin/mpMixin';
|
|
|
|
/**
|
|
* table-col 表格列
|
|
* @description 表格列组件，需要与u-table组件配合使用
|
|
* @tutorial https://www.uviewui.com/components/table.html
|
|
* @property {String} prop 字段名称，对应列内容的字段名 (默认 '' )
|
|
* @property {String} label 显示的标题 (默认 '' )
|
|
* @property {String|Number} width 列宽度 (默认 '' )
|
|
* @property {String|Number} minWidth 列最小宽度 (默认 '' )
|
|
* @property {Boolean} sortable 是否可排序 (默认 false )
|
|
* @property {Boolean} fixed 是否固定列 (默认 false )
|
|
* @property {String} align 对齐方式 (默认 'left' )
|
|
* @property {String} type 列类型：selection/index (默认 '' )
|
|
* @property {Function} formatter 格式化函数 (默认 null )
|
|
* @property {Boolean} show 是否显示 (默认 true )
|
|
* @property {String} headerAlign 表头对齐方式 (默认 'left' )
|
|
* @property {Boolean} headerEllipsis 表头超出1行隐藏 (默认 false )
|
|
* @property {String} columnKey 列的key (默认 '' )
|
|
* @property {String} className 列的类名 (默认 '' )
|
|
* @property {Object} customStyle 定义需要用到的外部样式
|
|
* @example <u-table-column prop="name" label="姓名" width="100"></u-table-column>
|
|
*/
|
|
export default {
|
|
name: 'u-table-column',
|
|
mixins: [mpMixin, mixin, props],
|
|
data() {
|
|
return {
|
|
parentData: {
|
|
data: [],
|
|
border: false,
|
|
stripe: false,
|
|
rowHeight: null,
|
|
ellipsis: true,
|
|
cellStyle: {},
|
|
selectedRowKeys: [],
|
|
toggleRowSelection: null,
|
|
mergeInfo: {}
|
|
},
|
|
sortDirection: 0,
|
|
innerFormatter: (value) => value
|
|
};
|
|
},
|
|
computed: {
|
|
columnConfig() {
|
|
return {
|
|
prop: this.prop,
|
|
type: this.type,
|
|
label: this.label,
|
|
width: this.width,
|
|
minWidth: this.minWidth,
|
|
sortable: this.sortable,
|
|
align: this.align,
|
|
type: this.type,
|
|
formatter: this.formatter,
|
|
sortDirection: this.sortDirection
|
|
};
|
|
},
|
|
tableData() {
|
|
return this.parentData.data || [];
|
|
},
|
|
isEllipsis() {
|
|
return this.parentData.ellipsis;
|
|
},
|
|
|
|
columnStyle() {
|
|
const style = {};
|
|
|
|
if (this.width) {
|
|
style.width = this.$u.addUnit(this.width);
|
|
} else if (this.minWidth) {
|
|
style.minWidth = this.$u.addUnit(this.minWidth);
|
|
} else {
|
|
style.flex = 1;
|
|
}
|
|
|
|
return style;
|
|
},
|
|
// 响应式的行选中状态映射
|
|
isSelectionSelected() {
|
|
return (row) => {
|
|
if (this.parentData.selectedRowKeys && this.parentData.selectedRowKeys.length > 0) {
|
|
const rowKey = this.getRowKey(row);
|
|
return this.parentData.selectedRowKeys.includes(rowKey);
|
|
}
|
|
return false;
|
|
}
|
|
},
|
|
cellStyles(row, index) {
|
|
return (row, index) => {
|
|
const style = {};
|
|
|
|
if (this.parentData.rowHeight) {
|
|
style.height = this.$u.addUnit(this.parentData.rowHeight);
|
|
}
|
|
|
|
// 处理合并单元格样式
|
|
if (this.parentData.mergeInfo && this.prop) {
|
|
const mergeKey = `${index}-${this.prop}`;
|
|
const mergeData = this.parentData.mergeInfo[mergeKey];
|
|
|
|
if (mergeData) {
|
|
// 设置合并单元格的高度
|
|
if (mergeData.rowspan > 1) {
|
|
const rowHeight = parseInt(this.parentData.rowHeight);
|
|
style.height = this.$u.addUnit(rowHeight * mergeData.rowspan + 1);
|
|
}
|
|
|
|
// 设置显示状态
|
|
if (mergeData.display === 'none') {
|
|
style.display = 'none';
|
|
}
|
|
}
|
|
}
|
|
|
|
return uni.$u.deepMerge(style, uni.$u.addStyle(this.parentData.cellStyle));
|
|
}
|
|
},
|
|
cellClasses(row, index) {
|
|
return (row, index) => {
|
|
let classes = [
|
|
this.className,
|
|
`is-${this.align || 'left'}`,
|
|
];
|
|
|
|
if (this.parentData.border) {
|
|
classes.push('is-border');
|
|
}
|
|
|
|
if (this.parentData.fixed) {
|
|
classes.push('is-fixed');
|
|
}
|
|
|
|
if (this.parentData.stripe && index % 2 === 1) {
|
|
classes.push('is-stripe');
|
|
}
|
|
|
|
// 添加合并单元格的样式类
|
|
if (this.parentData.mergeInfo && this.prop) {
|
|
const mergeKey = `${index}-${this.prop}`;
|
|
const mergeData = this.parentData.mergeInfo[mergeKey];
|
|
|
|
if (mergeData && mergeData.rowspan > 1) {
|
|
classes.push('is-merged');
|
|
}
|
|
}
|
|
|
|
// #ifdef MP-ALIPAY || MP-TOUTIAO
|
|
classes = classes.join(' ')
|
|
// #endif
|
|
|
|
return classes;
|
|
}
|
|
},
|
|
},
|
|
mounted() {
|
|
this.init()
|
|
},
|
|
// #ifdef VUE3
|
|
emits: ['cellClick'],
|
|
// #endif
|
|
methods: {
|
|
init() {
|
|
this.updateParentData();
|
|
if (!this.parent) {
|
|
uni.$u.error('u-table-column必须搭配u-table组件使用');
|
|
return;
|
|
}
|
|
},
|
|
updateParentData() {
|
|
this.getParentData('u-table');
|
|
},
|
|
|
|
// 获取行的唯一标识（与父组件保持一致）
|
|
getRowKey(row) {
|
|
if (!row) return '';
|
|
// 这里需要与父组件的rowKey属性保持一致
|
|
const rowKeyProp = this.parent?.rowKey || 'id';
|
|
return this.getValueByPath(row, rowKeyProp) || JSON.stringify(row);
|
|
},
|
|
|
|
// 获取嵌套属性值
|
|
getValueByPath(obj, path) {
|
|
if (!path || !obj) return '';
|
|
|
|
const keys = path.split('.');
|
|
let value = obj;
|
|
|
|
for (const key of keys) {
|
|
if (value && typeof value === 'object') {
|
|
value = value[key];
|
|
} else {
|
|
value = '';
|
|
break;
|
|
}
|
|
}
|
|
|
|
return value;
|
|
},
|
|
|
|
// 处理选择状态变化
|
|
handleSelectionChange(row, checked) {
|
|
if (typeof this.parentData.toggleRowSelection === 'function') {
|
|
this.parentData.toggleRowSelection(row, checked);
|
|
}
|
|
},
|
|
|
|
// 处理展开点击
|
|
handleExpandClick(row) {
|
|
if (typeof this.parentData.toggleRowExpansion === 'function') {
|
|
this.parentData.toggleRowExpansion(row);
|
|
}
|
|
},
|
|
|
|
handleCellClick(row, rowIndex) {
|
|
// 如果是selection或expand类型，不触发cell-click事件
|
|
if (this.type === 'selection' || this.type === 'expand') {
|
|
return;
|
|
}
|
|
|
|
const cellData = {
|
|
row,
|
|
column: this.columnConfig,
|
|
rowIndex,
|
|
columnIndex: this.getColumnIndex(),
|
|
value: this.getCellValue(row)
|
|
};
|
|
|
|
this.$emit('cellClick', cellData);
|
|
|
|
if (this.parent) {
|
|
this.parent.$emit('cellClick', cellData);
|
|
}
|
|
},
|
|
getCellValue(row) {
|
|
if (!this.prop) return '';
|
|
const keys = this.prop.split('.');
|
|
let value = row;
|
|
|
|
for (const key of keys) {
|
|
if (value && typeof value === 'object') {
|
|
value = value[key];
|
|
} else {
|
|
value = '';
|
|
break;
|
|
}
|
|
}
|
|
|
|
const formatter = this.formatter || this.innerFormatter;
|
|
return formatter(value);
|
|
},
|
|
getColumnIndex() {
|
|
if (!this.parent || !this.parent.children) return 0;
|
|
return this.parent.children.findIndex(col => col.prop === this.prop);
|
|
},
|
|
|
|
isCellHidden(row, index) {
|
|
// 检查合并信息，如果该单元格被合并到其他单元格中，则隐藏
|
|
if (this.parentData.mergeInfo && this.prop) {
|
|
const mergeKey = `${index}-${this.prop}`;
|
|
const mergeData = this.parentData.mergeInfo[mergeKey];
|
|
|
|
if (mergeData && mergeData.display === 'none') {
|
|
return true;
|
|
}
|
|
}
|
|
|
|
return false;
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import '../../libs/css/components.scss';
|
|
|
|
.u-table {
|
|
&__column {
|
|
@include flex(column);
|
|
flex-shrink: 0;
|
|
|
|
&:last-child .is-border {
|
|
border-right: none;
|
|
}
|
|
}
|
|
|
|
&__cell {
|
|
@include flex(column);
|
|
padding: 0px 10px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
|
|
&.is-left {
|
|
align-items: flex-start;
|
|
}
|
|
|
|
&.is-center {
|
|
align-items: center;
|
|
}
|
|
|
|
&.is-right {
|
|
align-items: flex-end;
|
|
}
|
|
|
|
&.is-border {
|
|
border-right: 1px solid $u-border-color;
|
|
border-bottom: 1px solid $u-border-color;
|
|
|
|
&:last-child {
|
|
border-bottom: none;
|
|
}
|
|
}
|
|
|
|
&.is-stripe {
|
|
background-color: $u-bg-color;
|
|
}
|
|
|
|
&.is-merged {
|
|
position: relative;
|
|
z-index: 1;
|
|
background-color: inherit;
|
|
}
|
|
}
|
|
|
|
&__value {
|
|
font-size: 13px;
|
|
line-height: 15px;
|
|
|
|
&.is-ellipsis {
|
|
word-break: break-all;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
&__expand-icon {
|
|
@include flex(row);
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 20px;
|
|
height: 20px;
|
|
cursor: pointer;
|
|
transition: transform 0.2s ease;
|
|
|
|
&.is-expanded {
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
&:hover {
|
|
background-color: rgba(0, 0, 0, 0.05);
|
|
border-radius: 2px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|