<template>
|
<div>
|
<span v-if="data?.title" class="text-base font-bold flex-center mb-5">{{ data?.title }}</span>
|
<div class="w-full" style="height: 70vh" ref="containerRef" v-resize="resizeHandler">
|
<el-table
|
ref="tableRef"
|
border
|
:cell-style="{ textAlign: 'center' }"
|
:header-cell-style="{ textAlign: 'center' }"
|
:data="data?.values"
|
highlight-current-row
|
class="w-full h-full"
|
cellClassName="text-sm"
|
headerCellClassName="text-sm"
|
>
|
<template v-if="data?.cols?.length > 0">
|
<el-table-column
|
v-for="(item, index) in colList"
|
:label="item.title"
|
:width="item.width"
|
:sortable="item.type === 'time'"
|
:key="index"
|
:prop="index + ''"
|
show-overflow-tooltip
|
/>
|
</template>
|
</el-table>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import type { TableInstance } from 'element-plus';
|
import _ from 'lodash';
|
import { onMounted, ref, type PropType } from 'vue';
|
import { debounce, getTextWidth } from '/@/utils/util';
|
|
const props = defineProps({
|
data: {
|
type: Object as PropType<any>,
|
},
|
});
|
|
const colList = ref([]);
|
const containerRef = ref<HTMLDivElement>(null);
|
const tableRef = ref<TableInstance>(null);
|
const measureWidthOffset = 28;
|
|
const resizeEvent = ({ width, height }) => {
|
if (width === 0 || height === 0) {
|
return;
|
}
|
if (props.data?.cols?.length > 0 && props.data?.values?.length > 0) {
|
const maxStrList = props.data.cols.map((item) => item.title);
|
const maxLenList = props.data.cols.map((item) => item.title.gblen());
|
for (const item of props.data.values) {
|
item.map((subItem, index) => {
|
const subItemLen = subItem?.gblen();
|
if (maxLenList[index] < subItemLen) {
|
maxLenList[index] = subItemLen;
|
maxStrList[index] = subItem;
|
}
|
});
|
}
|
// 总宽
|
let sumWidth = 0;
|
let maxWidthList = maxStrList.map((item, index) => {
|
const width =
|
getTextWidth(item, {
|
size: '0.875rem',
|
}) + measureWidthOffset;
|
sumWidth += width;
|
return {
|
index,
|
maxWidth: width,
|
};
|
});
|
if (sumWidth <= width) {
|
maxWidthList = maxWidthList.map((item) => ({
|
...item,
|
width: (item.maxWidth / sumWidth) * width,
|
}));
|
// 先满足小的，剩余空间按比例均分
|
} else {
|
let curWidth = 0;
|
const sortedWidthList = _.sortBy(maxWidthList, 'maxWidth');
|
let restWidth = width;
|
let notFitStartIndex = 1;
|
for (let index = 0; index < sortedWidthList.length; index++) {
|
const item = sortedWidthList[index];
|
curWidth += item.maxWidth;
|
if (curWidth < width || index === 0) {
|
maxWidthList[item.index].width = item.maxWidth;
|
continue;
|
}
|
restWidth = width - (curWidth - item.maxWidth);
|
notFitStartIndex = index;
|
break;
|
}
|
let sumRestMaxWidth = 0;
|
const notFitIndexList = sortedWidthList.slice(notFitStartIndex).map((item) => {
|
sumRestMaxWidth += item.maxWidth;
|
return item.index;
|
});
|
|
// 平均分配剩余空间
|
for (const item of notFitIndexList) {
|
maxWidthList[item].width = restWidth * (maxWidthList[item].maxWidth / sumRestMaxWidth);
|
if (maxWidthList[item].maxWidth <= restWidth) {
|
maxWidthList[item].width = restWidth;
|
}
|
|
// maxWidthList[item].width = undefined;
|
}
|
}
|
colList.value = props.data.cols.map((item, index) => ({
|
...item,
|
width: maxWidthList[index].width,
|
}));
|
} else {
|
colList.value = [];
|
}
|
tableRef.value.doLayout();
|
};
|
|
const resizeHandler = debounce(resizeEvent);
|
|
onMounted(() => {
|
resizeEvent({
|
width: containerRef.value.clientWidth,
|
height: 0.7 * document.body.clientHeight,
|
});
|
});
|
</script>
|
<style scoped lang="scss"></style>
|
