建立一个属于自己的网站,seo排名哪家有名,浙江短视频seo优化网站,中英文网站建设公司最近ui有个设计稿#xff0c;表格要求如图#xff1a; 由于本地antd table列宽column没有设置最小宽度minWidth属性#xff0c;只有width属性#xff0c;所以开发时我考虑按照列宽等比例计算后去设置width属性#xff1b;
一、实现#xff1a; 1.表头数组中设置minWidth…最近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 - fixedWidthlet 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,},]}})
四、全部代码如下
templatediv classwrapa-tableclassmyTable:class{ empty-table: !tableArr.length }iddefine-table:columnsheaderArr:data-sourcetableArr:localetablenodata:loadingloading:scrollScrollOBJ:paginationfalsev-iftableReashtemplate slotchangePrice slot-scopetext, recordspan:style{color:record.changePrice 0? #E25454: record.changePrice 0? #12A96E: }{{ record.changePrice }}/span/templatetemplate slotchgPercent slot-scopetext, recordspan:style{color:record.chgPercent 0? #E25454: record.chgPercent 0? #12A96E: }{{record.chgPercent 0? record.chgPercent %: record.chgPercent %}}/span/templatetemplate slotaction slot-scopetext, recordspan classadd-code clickaddCode(record)span classadd-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暂无数据 sizesmall/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 langless scoped/style
