Browse Source

fix:调整列宽

master
白凤吉 2 weeks ago
parent
commit
800585ea01
  1. 38
      src/components/setting/HistoryDetail.vue

38
src/components/setting/HistoryDetail.vue

@ -38,27 +38,32 @@ const tableData = computed(() => {
return item
})
})
const columnWidths = [250, null, 150, null, null, null, null, null, null, null, 180, 180]
//
const tableColumns = computed(() => {
return tableHeaders.value.map(header => ({
prop: header,
label: header,
minWidth: 120,
}))
})
const tableColumns = computed(() =>
tableHeaders.value.map((h, i) => {
const col: Record<string, any> = {
prop: h,
label: h,
minWidth: 120,
}
if (columnWidths[i] != null) {
col.minWidth = columnWidths[i]
}
return col
}),
)
</script>
<template>
<div class="data-table-container">
<el-table :data="tableData" style="width: 100%">
<el-table :data="tableData" style="width:100%">
<el-table-column
v-for="column in tableColumns"
:key="column.prop"
:prop="column.prop"
:label="column.label"
width="200"
:min-width="column.minWidth"
v-for="col in tableColumns"
:key="col.prop"
:prop="col.prop"
:label="col.label"
:min-width="col.minWidth"
/>
</el-table>
</div>
@ -66,6 +71,9 @@ const tableColumns = computed(() => {
<style scoped>
.data-table-container {
/* 保留滚动与高度设置 */
padding: 20px;
height: 80vh;
overflow: auto;
}
</style>
Loading…
Cancel
Save