自己做挖矿网站,平面广告设计公司,烟台网站的建设,成都专业制作网站公司前言
开发中有一个需要呈现不同时间点各个气象要素的值需求#xff0c;我觉得一个table可以实现这类数据的展示#xff0c;只是因为时间点时关注的重点#xff0c;所以需要列选中效果#xff0c;清晰的展示时间点下的要素数据。我选择的是antd的table组件#xff0c;这个…前言
开发中有一个需要呈现不同时间点各个气象要素的值需求我觉得一个table可以实现这类数据的展示只是因为时间点时关注的重点所以需要列选中效果清晰的展示时间点下的要素数据。我选择的是antd的table组件这个组件没有列选中的效果所以还是需要自己动手丰衣足食改造一下。
分析
这个功能的难点在于列选中效果我们需要给他一个背景加上边框虽然antd的table没有列选中效果但是它提供了customCellcustomHeaderCell我们可以根据这些回调函数的特点灵活使用实现列选中效果。
参数说明类型用途customCell设置单元格属性Function(record, rowIndex)根据activeColIndex参数为选中列包含的单元格添加class并且为最后一个单元格加上“lastCol”的class因为最后一个需要加上下边框customHeaderCell设置头部单元格属性Function(column)主要为选中列的第一个单元格加上class因为表头单元格需要加上上边框
源代码
/**
* CustomTable.vue
* Author ZhangJun
* Date 2024/5/28 11:39
**/
templatea-spin :spinningloadingtemplate v-ifdataSourcedataSource.length0a-table :paginationfalse:columnsgetColumns:dataSourcedataSourcerowKeyitemCode:scroll{y:dataSource.length9?280px:false}/a-table/templatecustom-empty v-elsedesc暂无机场高影响数据sub-titleNO DATA IS AVAILABLEstylemargin: 8% auto;/custom-empty/a-spin
/templatescript
import CustomEmpty from /components/CustomEmpty.vue;
import moment from moment;
import {HighImpactWeatherApi} from /api/HighImpactWeatherApi;
import WizStyleHelper from /utils/leaflet/WizStyleHelper;
import BigNumber from bignumber.js;export default {name: CustomTable,components: {CustomEmpty},props: {currentDateTime: {type: String},//选择的可显示的要素visibleItemsConfig: {type: Array, default: () ([])},airportId: {type: String}},data() {return {loading: false,itemDefaultConfig: {visibility: {unit: m, name: 能见度},wins: {unit: m/s, name: 风},rain: {unit: mm, name: 雨},lowTemperature: {unit: ℃, name: 低温},},itemColors: {},//要素配色缓存dataSource: [],activeColIndex: -1,//现在选中的列}},computed: {/*** 动态获取表格的columns* returns {*[]}*/getColumns() {//获取各种要素的颜色let colors this.visibleItemsConfig?.map(({styleCode}) {return [styleCode, this.getItemColor(styleCode)];}) || [];this.itemColors Object.fromEntries(colors);//要素名称列自定义let itemCodeCustomRender (text) {let {styleCode, pCode, name} this.visibleItemsConfig?.find(({code}) code text);let unit this.itemDefaultConfig?.[pCode]?.unit || ;let color this.itemColors?.[styleCode];return div classflex justify-end stylewidth:80px;{name}div style{{padding: 0 4px, color}}{unit}/div/div};let dayDate moment(this.currentDateTime, YYYYMMDDHHmmss);let columns_temp [];for (let i 0; i 24; i) {let dataIndex dayDate.clone().add(i, hour);columns_temp [...columns_temp, {align: center,title: dataIndex.format(HH:mm),dataIndex: dataIndex.format(YYYYMMDDHH),key: dataIndex.format(YYYYMMDDHH),className: customCell,//为了实现列选中高亮效果customCell: (record, rowIndex) {return {class: {activeCol: i this.activeColIndex,//如果该cell所以选中的那一列中就在上这个样式lastCol: rowIndex this.dataSource.length - 1//如果该cell属于选中列的最后一个cell就加上这个样式因为要在这个cell加上下边框},on: {mouseenter: (e) {//赋值当前cell所在的列索引为高亮列做准备this.activeColIndex i;},mouseleave: (event) {//清空this.activeColIndex -1;}}}},//头部需要加上上边框customHeaderCell: (column) {//自定义表头return {class: {activeCol: i this.activeColIndex,//该表头为选中列的表头加上这个样式因为列头需要加上边框headerCell: true},}},customRender: (text, record) {text Number(text);if (text 1000) {text new BigNumber(text).toFixed(0);} else if (text 1000 text 100) {text new BigNumber(text).toFixed(0);} else if (text 100 text 10) {text new BigNumber(text).toFixed(1);} else if (text 10 text 0) {text new BigNumber(text).toFixed(2);}let {itemCode} record;let {styleCode, legendImage, name, pCode} this.visibleItemsConfig?.find(({code}) code itemCode);let unit this.itemDefaultConfig?.[pCode]?.unit || ;//如果有图标就显示图标if (legendImage) {if (text 0) {return img height15 title{${name}${text} ${unit}} src{legendImage} alt{name}/;}return div style{{padding: 4px 0,overflow: hidden,width: 28px,textAlign: center,cursor: default,}} title{${name}${text} ${unit}}-/div}let color this.itemColors?.[styleCode];return div style{{background: text 0 ? color : ,padding: 4px 0,overflow: hidden,width: 28px,textAlign: center,cursor: default,}} title{${name}${text} ${unit}}{text}/div;}}];}return [{title: ,dataIndex: itemCode,key: itemCode,className: customCell,align: right,width: 80,customRender: itemCodeCustomRender,}, ...columns_temp];},},methods: {/*** 获取数据*/fetchData() {if (this.currentDateTime this.visibleItemsConfig?.length 0 this.airportId) {let startTime moment(this.currentDateTime, YYYYMMDDHH).format(YYYYMMDDHH);let endTime moment(this.currentDateTime, YYYYMMDDHH).add(23, hour).format(YYYYMMDDHH);let itemCodes this.visibleItemsConfig?.map(({code}) code).join(,);this.loading true;HighImpactWeatherApi.getHighImpactSingleAirportFutureImpactInfo({startTime,// 2024051102,endTime,itemCodes,airportId: this.airportId}).then((res {}) {let {data} res;if (data) {this.dataSource itemCodes.split(,).map(itemCode {return {itemCode, ...data[itemCode]};});}}, () {this.dataSource [];}).finally(() {this.loading false;});}},/*** 获取站点图例颜色* param styleCode 配色code*/getItemColor(styleCode) {if (styleCode) {const wizStyleHelper new WizStyleHelper();const colorConfig wizStyleHelper.getStyleImpl(styleCode);let {colors: [, color]} colorHelper.getColorImpl(colorConfig.shaded.color).colorPalettes;return rgba(${color.join(,)});}return undefined},},mounted() {this.fetchData();this.$watch(() [this.currentDateTime, this.airportId, this.visibleItemsConfig], ([params1, params2, params3]) {this.fetchData();});}
}
/scriptstyle scoped langless
/deep/ .customCell {background: transparent;padding: 4px 0 !important;border-color: transparent;border-width: 0 1px 0 1px;* {font-family: D-DIN, sans-serif;font-size: 12px;font-weight: normal;line-height: 12px;text-align: center;letter-spacing: 0;color: rgba(255, 255, 255, 0.6);white-space: nowrap;}
}/deep/ .customRow { td {font-family: D-DIN, sans-serif;font-size: 12px;font-weight: normal;line-height: normal;text-align: center;letter-spacing: 0;color: white;}
}/deep/ .ant-table-header {background: transparent;.ant-table-hide-scrollbar {margin-right: -0.69rem;}
}/deep/ .ant-table-body {background: transparent !important;::-webkit-scrollbar {/* 对应纵向滚动条的宽度 */width: 0.425rem;/* 对应横向滚动条的宽度 */height: 0.425rem;}::-webkit-scrollbar-thumb {background: #198CF8;border-radius: 32px;}::-webkit-scrollbar-track {background: rgba(7, 28, 65, 0.5);border-radius: 32px;}.ant-table-tbody { tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) td {background: unset;}}
}/deep/ .headerCell {border-width: 1px 1px 0;border-style: solid;border-color: transparent;
}/deep/ .lastCol {border-width: 0 1px 1px;border-style: solid;border-color: transparent;
}/deep/ .activeCol {background: rgba(77, 136, 255, 0.19) !important;//border-width: 0 1px 0 1px;border-style: solid;border-color: #5FACFF;.headerCell {border-radius: 2px 2px 0 0;}.lastCol {border-radius: 0 0 2px 2px;}
}
/style效果
