756 lines
26 KiB
Vue
756 lines
26 KiB
Vue
<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> |