antd table表格设置最小宽度，列宽等比例显示
最近ui有个设计稿，表格要求如图：
由于本地antd table列宽column没有设置最小宽度minWidth属性，只有width属性，所以开发时我考虑按照列宽等比例计算后去设置width属性；
一、实现：
1.表头数组中设置minWidth属性，固定列操作栏直接写width属性即可
this.headerArr = [
{
dataIndex: 'indexShortName',
title: '指标名称',
minWidth: 320,
},
{
dataIndex: 'dataValue',
title: '最新值',
minWidth: 120,
align: 'right',
},
{ dataIndex: 'unit', title: '单位', minWidth: 80 },
{
dataIndex: 'changePrice',
title: '涨跌',
minWidth: 100,
scopedSlots: { customRender: 'changePrice' },
align: 'right',
},
{
dataIndex: 'chgPercent',
title: '涨跌幅',
minWidth: 100,
scopedSlots: { customRender: 'chgPercent' },
align: 'right',
},
{ dataIndex: 'dataDate', title: '数据日期', minWidth: 100 },
{
dataIndex: 'action',
title: '操作',
align: 'center',
fixed: 'right',
scopedSlots: { customRender: 'action' },
width: 118,
},
]二、创建完表头数据后，执行等比例列宽计算获取每列width
1.headerArr:表头数组
2.allwidth:表格所占宽度
3.fixedWidth:所有固定列总宽度
4.excludeList:不用计算的数组，一般保留一列不去设置width,让它自适应即可
//headerArr:要处理的表头，allWidth表格宽度，fixedWidth：固定列宽度，excludeList：排除不需要设置的序列
autoHeader(headerArr, allWidth, fixedWidth, excludeList) {
let autoWidth = allWidth - fixedWidth
let bili = headerArr
.map((e) => (e.minWidth ? e.minWidth : 0))
.reduce((a, b) => a + b)
headerArr.forEach((e, index) => {
if (!e.fixed) {
if (excludeList && excludeList.length > 0) {
if (!excludeList.includes(index)) {
e.width = autoWidth * (e.minWidth / bili)
}
} else {
e.width = autoWidth * (e.minWidth / bili)
}
}
})
return headerArr
},三、执行完成后还需添加监听事件，让表格列宽能够自适应并且动态显示滚动条
1.elementResizeDetectorMaker是监听组件，此处监听表格父容器的宽度变化，当宽度>=938时执行计算列宽等比函数，当宽度<938时表格显示横向滚动条，表头数组直接写上width
//响应页面宽度变化，动态设置表头列宽
this.erd = elementResizeDetectorMaker()
this.erd.listenTo(document.querySelector('.wrap'), (element) => {
console.log('element', element.clientWidth)
if (element.clientWidth >= 938) {
this.headerArr = this.autoHeader(
this.headerArr,
document.querySelector('.wrap').clientWidth,
118,
[0],
)
this.ScrollOBJ = {}
} else {
this.ScrollOBJ = { x: 938 }
this.headerArr = [
{
dataIndex: 'indexShortName',
title: '指标名称',
minWidth: 320,
},
{
dataIndex: 'dataValue',
title: '最新值',
width: 120,
minWidth: 120,
align: 'right',
},
{ dataIndex: 'unit', title: '单位', width: 80, minWidth: 80 },
{
dataIndex: 'changePrice',
title: '涨跌',
width: 100,
minWidth: 100,
scopedSlots: { customRender: 'changePrice' },
align: 'right',
},
{
dataIndex: 'chgPercent',
title: '涨跌幅',
width: 100,
minWidth: 100,
scopedSlots: { customRender: 'chgPercent' },
align: 'right',
},
{
dataIndex: 'dataDate',
title: '数据日期',
width: 100,
minWidth: 100,
},
{
dataIndex: 'action',
title: '操作',
align: 'center',
fixed: 'right',
scopedSlots: { customRender: 'action' },
width: 118,
},
]
}
})四、全部代码如下：
<template>
<div class="wrap">
<a-table
class="myTable"
:class="{ 'empty-table': !tableArr.length }"
id="define-table"
:columns="headerArr"
:data-source="tableArr"
:locale="tablenodata"
:loading="loading"
:scroll="ScrollOBJ"
:pagination="false"
v-if="tableReash"
>
<template slot="changePrice" slot-scope="text, record">
<span
:style="{
color:
record.changePrice > 0
? '#E25454'
: record.changePrice < 0
? '#12A96E'
: ''
}"
>{{ record.changePrice }}</span
>
</template>
<template slot="chgPercent" slot-scope="text, record">
<span
:style="{
color:
record.chgPercent > 0
? '#E25454'
: record.chgPercent < 0
? '#12A96E'
: ''
}"
>{{
record.chgPercent > 0
? "+" + record.chgPercent + "%"
: record.chgPercent + "%"
}}</span
>
</template>
<template slot="action" slot-scope="text, record">
<span class="add-code" @click="addCode(record)"
><span class="add-code-img"></span>添加指标</span
>
</template>
</a-table>
</div>
</template>
<script>
import { Table } from "ant-design-vue";
import noResult from "@/components/no-result.vue";
import elementResizeDetectorMaker from "element-resize-detector";
export default {
components: {
ATable: Table,
"no-result": noResult
},
data() {
return {
loading: false,
headerArr: [],
tableArr: [],
ScrollOBJ: {},
tradingDay: "",
updateTime: "",
commonHeight: "",
tablenodata: {
emptyText: <no-result title="暂无数据" size="small"></no-result>
},
tableReash: true,
marginTopPx: 90
};
},
mounted() {
this.ScrollOBJ =
document.querySelector(".wrap").clientWidth >= 938 ? {} : { x: 938 };
this.setHeader();
//this.setScrollY()
//响应页面宽度变化，动态设置表头列宽
this.erd = elementResizeDetectorMaker();
this.erd.listenTo(document.querySelector(".wrap"), element => {
console.log("element", element.clientWidth);
if (element.clientWidth >= 938) {
this.headerArr = this.autoHeader(
this.headerArr,
document.querySelector(".wrap").clientWidth,
118,
[0]
);
this.ScrollOBJ = {};
} else {
this.ScrollOBJ = { x: 938 };
this.headerArr = [
{
dataIndex: "indexShortName",
title: "指标名称",
minWidth: 320
},
{
dataIndex: "dataValue",
title: "最新值",
width: 120,
minWidth: 120,
align: "right"
},
{ dataIndex: "unit", title: "单位", width: 80, minWidth: 80 },
{
dataIndex: "changePrice",
title: "涨跌",
width: 100,
minWidth: 100,
scopedSlots: { customRender: "changePrice" },
align: "right"
},
{
dataIndex: "chgPercent",
title: "涨跌幅",
width: 100,
minWidth: 100,
scopedSlots: { customRender: "chgPercent" },
align: "right"
},
{
dataIndex: "dataDate",
title: "数据日期",
width: 100,
minWidth: 100
},
{
dataIndex: "action",
title: "操作",
align: "center",
fixed: "right",
scopedSlots: { customRender: "action" },
width: 118
}
];
}
this.tableReash = false;
console.log("this.ScrollOBJ", this.ScrollOBJ);
this.$nextTick(() => {
this.tableReash = true;
});
});
},
methods: {
//上游价格指数--设置表头
setHeader() {
this.headerArr = [
{
dataIndex: "indexShortName",
title: "指标名称",
minWidth: 320
},
{
dataIndex: "dataValue",
title: "最新值",
minWidth: 120,
align: "right"
},
{ dataIndex: "unit", title: "单位", minWidth: 80 },
{
dataIndex: "changePrice",
title: "涨跌",
minWidth: 100,
scopedSlots: { customRender: "changePrice" },
align: "right"
},
{
dataIndex: "chgPercent",
title: "涨跌幅",
minWidth: 100,
scopedSlots: { customRender: "chgPercent" },
align: "right"
},
{ dataIndex: "dataDate", title: "数据日期", minWidth: 100 },
{
dataIndex: "action",
title: "操作",
align: "center",
fixed: "right",
scopedSlots: { customRender: "action" },
width: 118
}
];
this.tableArr = [
{
indexShortName: "Mysteel普钢价格指",
dataValue: "3590.14",
unit: "元/吨",
changePrice: "5.87",
chgPercent: "0.16",
dataDate: "2024/10/28",
indexCode: "ID20128188"
},
{
indexShortName: "Mysteel普钢价格指",
dataValue: "3590.14",
unit: "元/吨",
changePrice: "5.87",
chgPercent: "0.16",
dataDate: "2024/10/28",
indexCode: "ID20128188"
},
{
indexShortName: "Mysteel普钢价格指",
dataValue: "3590.14",
unit: "元/吨",
changePrice: "-5.87",
chgPercent: "-0.16",
dataDate: "2024/10/28",
indexCode: "ID20128188"
},
{
indexShortName: "Mysteel普钢价格指",
dataValue: "3590.14",
unit: "元/吨",
changePrice: "-5.87",
chgPercent: "-0.16",
dataDate: "2024/10/28",
indexCode: "ID20128188"
},
{
indexShortName: "Mysteel普钢价格指",
dataValue: "3590.14",
unit: "元/吨",
changePrice: "5.87",
chgPercent: "0.16",
dataDate: "2024/10/28",
indexCode: "ID20128188"
},
{
indexShortName: "Mysteel普钢价格指",
dataValue: "3590.14",
unit: "元/吨",
changePrice: "5.87",
chgPercent: "0.16",
dataDate: "2024/10/28",
indexCode: "ID20128188"
}
];
this.tableArr = [...this.tableArr, ...this.tableArr];
//表头按比例设置宽度
this.headerArr = this.autoHeader(
this.headerArr,
document.querySelector(".wrap").clientWidth,
118,
[0]
);
},
//headerArr:要处理的表头，allWidth表格宽度，fixedWidth：固定列宽度，excludeList：排除不需要设置的序列
autoHeader(headerArr, allWidth, fixedWidth, excludeList) {
let autoWidth = allWidth - fixedWidth;
let bili = headerArr
.map(e => (e.minWidth ? e.minWidth : 0))
.reduce((a, b) => a + b);
headerArr.forEach((e, index) => {
if (!e.fixed) {
if (excludeList && excludeList.length > 0) {
if (!excludeList.includes(index)) {
e.width = autoWidth * (e.minWidth / bili);
}
} else {
e.width = autoWidth * (e.minWidth / bili);
}
}
});
return headerArr;
}
}
};
</script>
<style lang="less" scoped></style>
原文地址：https://blog.csdn.net/qq_36093530/article/details/143770713
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！