vxetable的表格滚动条加粗功能

easyboot2026-03-12 8:33

1.在vxetable中加入 :scrollbar-config="{ width: 32, height: 32 }"

<vxe-table ref="tableRef" stripe :cell-style="cellStyle" :data="list" :loading="loading"

id="myQueryStorage" border show-overflow height="96%"

class="mytable-style vxetablefilter mytable-scrollbar" :row-class-name="rowClassName"

:custom-config="{ storage: true }" show-header-overflow header-align="center"

:export-config="{ type: 'xlsx' }" :sort-config="{ multiple: true, trigger: 'cell' }"

:row-config="{ height: 30, useKey: true }" :column-config="{ resizable: true, useKey: true }"

:scrollbar-config="{ width: 32, height: 32 }" :virtual-x-config="{ enabled: true, gt: 0 }"

:virtual-y-config="{ enabled: true }" :header-cell-style="{

// 'text-align': 'center',

'height': '30px'

}">

2.设置样式

<style scoped lang="scss" >

:deep(.vxe-table .vxe-table--scroll-x-handle) {

height: 32px;

}

:deep(.vxe-table .vxe-table--scroll-y-handle) {

width: 32px;

}

.mytable-scrollbar {

::-webkit-scrollbar {

width: 32px !important;

height: 32px !important;

}

::-webkit-scrollbar-thumb {

border-radius: 4px;

}

}

</style>

3.完整代码

复制代码 
<template>
	<div class="container">
		<h1 style="color:green;">{{ $t('Page.Menus.DataQuery.DetectionQuery.Query.Title') }}</h1>
		<hr>
		<!-- -->
		<div class="">
			<!-- style="overflow: hidden; width: 100%;  height:80vh;" -->
			<div style="display: flex; flex-direction: column; height: 72dvh;">
				<vxe-toolbar ref="toolbarRef" custom export :toolbarConfig="{ custom: true }"
					:customConfig="{ storage: true }">
					<template #buttons>
						<el-date-picker v-model="QueryBeginDate" type="date" placeholder="Pick a day" :size="size" />
						<el-date-picker v-model="QueryEndDate" type="date" placeholder="Pick a day" :size="size" />
					 
							<template #prepend>
								<span class="SpanFont PrependWidth">{{ $t('Common.Barcode') }}</span>
							</template>
						</el-input>
						<el-button type="primary" @click="QuerySpongeStickMeasurement()">
							{{ $t('Common.BtnQuery') }}
						</el-button>
						<vxe-input v-model="filterName" type="search" placeholder="试试全表搜索"
							@keyup="searchEvent1"></vxe-input>

						<!-- <el-button type="success" @click="exportToXlsx()">
							导出Excel
						</el-button> -->
					</template>
				</vxe-toolbar>
				<!-- :sort-config="{ multiple: true, trigger: 'cell' }"   isHover: true, show-overflow show-header-overflow -->
				<vxe-table ref="tableRef" stripe :cell-style="cellStyle" :data="list" :loading="loading"
					id="mySpongeStickQueryStorage" border show-overflow height="96%"
					class="mytable-style vxetablefilter mytable-scrollbar" :row-class-name="rowClassName"
					:custom-config="{ storage: true }" show-header-overflow header-align="center"
					:export-config="{ type: 'xlsx' }" :sort-config="{ multiple: true, trigger: 'cell' }"
					:row-config="{ height: 30, useKey: true }" :column-config="{ resizable: true, useKey: true }"
					:scrollbar-config="{ width: 32, height: 32 }" :virtual-x-config="{ enabled: true, gt: 0 }"
					:virtual-y-config="{ enabled: true }" :header-cell-style="{
						// 'text-align': 'center',
						'height': '30px'
					}">

					<vxe-column type="seq" :title="$t('Common.Sequence')" width="70" fixed="left"></vxe-column>
					<vxe-column field="barcode" :title="$t('Common.Barcode')" width="100" sortable></vxe-column>
				 
					<vxe-colgroup field="groupSpongeNo1Width"
						:title="$t('DataQuery.SpongeStickResult.Table.SpongeWidth')">
						<vxe-column field="spongeNo1WidthMax" :title="$t('Common.Max')" width="90"
							sortable></vxe-column>
						<vxe-column field="spongeNo1WidthMin" :title="$t('Common.Min')" width="90"
							sortable></vxe-column>
						<vxe-column field="spongeNo1WidthAvg" :title="$t('Common.Avg')" width="90"
							sortable></vxe-column>
						<vxe-column field="spongeNo1WidthDelta" :title="$t('Common.Delta')" width="90" sortable
							v-if="IsUseSpongeWidthDelta"></vxe-column>
					</vxe-colgroup>
				 

					<vxe-colgroup field="groupspongeNo1Thickness"
						:title="$t('DataQuery.SpongeStickResult.Table.SpongeThickness')">
						<vxe-column field="spongeNo1ThicknessMax" :title="$t('Common.Max')" width="90"
							sortable></vxe-column>
						<vxe-column field="spongeNo1ThicknessMin" :title="$t('Common.Min')" width="90"
							sortable></vxe-column>
						<vxe-column field="spongeNo1ThicknessAvg" :title="$t('Common.Avg')" width="90"
							sortable></vxe-column>
						<vxe-column field="spongeNo1ThicknessDelta" :title="$t('Common.Delta')" width="90" sortable
							v-if="IsUseSpongeThicknessDelta"></vxe-column>
					</vxe-colgroup>
				 

					<vxe-colgroup field="groupSpongeFirstGap" :title=Title_SpongeStickMeasureGap1>
						<vxe-column field="firstGapUp" :title="$t('Common.Up')" width="90" sortable></vxe-column>
						<vxe-column field="firstGapDown" :title="$t('Common.Down')" width="90" sortable></vxe-column>
						<!-- <vxe-column field="firstGapAvg" :title="$t('Common.Avg')" width="90" sortable></vxe-column> -->
						<vxe-column field="firstGapDelta" :title="$t('Common.Delta')" width="90" sortable
							v-if="IsShowGapDelta"></vxe-column>
					</vxe-colgroup>

				 

					<vxe-colgroup field="groupSpongeFirstGapMisalignment"
						:title="$t('DataQuery.SpongeStickResult.Table.SpongeFirstGapMisaligned')">

						<vxe-column field="firstGapUpMisalignment" :title="$t('Common.TopMisalignment')" width="85"
							sortable v-if="IsShowGapUpMisalignment"></vxe-column>

						<vxe-column field="firstGapDownMisalignment" :title="$t('Common.BottomMisalignment')" width="85"
							sortable v-if="IsShowGapDownMisalignment"></vxe-column>

						<vxe-column field="firstGapAvgMisalignment" :title="$t('Common.AvgMisalignment')" width="96"
							sortable v-if="IsShowGapAvgMisalignment"></vxe-column>

						<vxe-column field="firstGapMaxMisalignment" :title="$t('Common.MaxMisalignment')" width="96"
							sortable v-if="IsShowGapMaxMisalignment"></vxe-column>
					</vxe-colgroup>

			 

					<vxe-colgroup field="groupSpongeNo1Wave" :title="$t('Common.SnakeShaped')"
						v-if="IsShowSpongeWaveData">
						<vxe-column field="spongeNo1SnakeShapedA" title="A" width="70" sortable></vxe-column>
						<vxe-column field="spongeNo1SnakeShapedB" title="B" width="70" sortable></vxe-column>
						<vxe-column field="spongeNo1SnakeShapedC" title="C" width="70" sortable></vxe-column>
						<vxe-column field="spongeNo1SnakeShapedD" title="D" width="70" sortable></vxe-column>
						<vxe-column field="spongeNo1Wave" :title="$t('Common.Wave')" width="70" sortable></vxe-column>
						<vxe-column field="spongeNo1WaveDelta" :title="$t('Common.WaveDelta')" width="70" sortable
							v-if="IsShowSpongeWaveDelta"></vxe-column>
					</vxe-colgroup>

				

					<vxe-column field="spongeNo1OffCenter"
						:title="$t('DataQuery.SpongeStickResult.Table.SpongeNo1OffCenter')" width="70"
						sortable></vxe-column>
					<vxe-column field="spongeNo1CenterLength"
						:title="$t('DataQuery.SpongeStickResult.Table.SpongeNo1CenterLength')" width="70" sortable
						v-if="IsShowSpongeCenterLength"></vxe-column>

					<vxe-colgroup field="groupSpongeNo2Width"
						:title="$t('DataQuery.SpongeStickResult.Table.SpongeNo2Width')" v-if="IsUseGap2">
						<vxe-column field="spongeNo2WidthMax" :title="$t('Common.Max')" width="90"
							sortable></vxe-column>
						<vxe-column field="spongeNo2WidthMin" :title="$t('Common.Min')" width="90"
							sortable></vxe-column>
						<vxe-column field="spongeNo2WidthAvg" :title="$t('Common.Avg')" width="90"
							sortable></vxe-column>
						<vxe-column field="spongeNo2WidthDelta" :title="$t('Common.Delta')" width="90" sortable
							v-if="IsUseSpongeWidthDelta"></vxe-column>
					</vxe-colgroup>

				


					<vxe-column field="result" :title="$t('Common.Result')" width="90" sortable></vxe-column>
					<vxe-column field="createdDate" :title="$t('Common.Date')" width="150" sort-type="string"
						sortable></vxe-column>
					<vxe-column width="80" :title="$t('Common.Image')" type="html">
						<template #default="{ row }">
							<el-button type='primary' :disabled="row.jpg.length < 1" @click="ShowJpgResult(row)">{{
								$t('DataQuery.SpongeStickResult.Table.ShowImage') }}</el-button>
						</template>
					</vxe-column>
					<vxe-column width="80" :title="$t('Common.Ply3D')" type="html">
						<template #default="{ row }">
							<el-button type='primary' @click="ShowPlyResult(row)" :disabled="!IsCanUse">{{
								$t('DataQuery.SpongeStickResult.Table.Show3D') }}</el-button>
						</template>
					</vxe-column>

				</vxe-table>
			</div>

			<el-row>
				<el-dialog v-model="dialogVisible" :title="$t('DataQuery.Result.Dialog.Title')" width="55%"
					draggable>
					<el-row>
						<el-col :span="10">
							<el-input v-model="Barcode" class="w-20 m-2" :readonly="true">
								<template #prepend>
									<span class="TitleWidth">
										{{ $t('DataQuery.SpongeStickResult.Dialog.Barcode') }}</span>
								</template>
							</el-input>
						</el-col>
						<el-col :span="14">
							<el-input v-model="Datetime" class="w-20 m-2" :readonly="true">
								<template #prepend>
									<span class="TitleWidth">{{ $t('DataQuery.SpongeStickResult.Dialog.DateTime')
									}}</span>
								</template>
							</el-input>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="24">
							<el-input v-model="Msg" class="w-20 m-2" :readonly="true" type="textarea" autosize>
								<template #prepend>
									<span class="TitleWidth">{{ $t('DataQuery.SpongeStickResult.Dialog.Msg') }}</span>
								</template>
							</el-input>
						</el-col>
					</el-row>
					<el-row>
						<el-image :src="SpongeStickImageURL" :preview-src-list="[SpongeStickImageURL]" />
					</el-row>
					<br>
					<template #footer>
						<div class="dialog-footer">
							<el-button @click="dialogVisible = false">取消</el-button>
							<el-button type="primary" @click="dialogVisible = false">
								确定
							</el-button>
						</div>
					</template>

				</el-dialog>
			</el-row>
		</div>
	</div>
</template>

<script setup lang="ts" name="Query">
import { reactive, ref, onMounted } from 'vue'
import { global_const, global_PageParam } from '../../../globalconst'
import axios from 'axios'
import dateFormat, { getMyConfig, MyGlobalFun } from '../../../globalFun'
import { ElMessage } from 'element-plus'
import { VxeToolbarInstance, VxeTablePropTypes } from 'vxe-table'
import type { VxeTableInstance } from 'vxe-table'

import { SpongeStickRowVO } from '../../../Interface/SpongeStickInterface'
import { global_Language } from '../../../globalLanguage'
import type { VxeGridProps } from 'vxe-table'

const tableData = ref<SpongeStickRowVO[]>([])
const toolbarRef = ref<VxeToolbarInstance>()
const tableRef = ref<VxeTableInstance>()
const filterName = ref('')
const list = ref<SpongeStickRowVO[]>([])
const loading = ref(false)

const size = ref<'default' | 'large' | 'small'>('default')

const QueryBeginDate = ref('')
const QueryEndDate = ref('') 

const Barcode = ref('')
const Datetime = ref('')
const Msg = ref('')


 

const dialogVisible = ref(false)
 
onMounted(async () => {
	QueryBeginDate.value = dateFormat(new Date(), 'YYYY-MM-DD')
	QueryEndDate.value = dateFormat(new Date(), 'YYYY-MM-DD')
  
})

async function loadData(): Promise<void> {
	try {
		//list.value = globalData.SpongeStickList// useSpongeStickListStore.$state.list
		// const data: string = await fetchData()
		// console.log(data)
	} catch (error) {
		if (error instanceof Error) {
			console.error(error.message)
		}
	}
}

const rowClassName: VxeTablePropTypes.RowClassName<SpongeStickRowVO> = ({ rowIndex }) => {
	//console.log(`${rowIndex}`)
	if (rowIndex % 2 === 0) {
		return 'row-blue'
	}
	return null
}
</script>

<style scoped lang="scss" >
.DynamicsInputWidth {
	width: 220px
}

.row-green {
	background-color: #187;
	color: #fff;
}

::v-deep(.mytable-style.vxe-table .vxe-body--row.row-green) {
	background-color: #187;
	color: #fff;
}

::v-deep(.mytable-style.vxe-table .vxe-body--row.row-blue) {
	background-color: #e0f7fa;
	color: #000;
}


::v-deep(.mytable-style.vxe-table .vxe-header--column.col-blue) {
	background-color: #2db7f5;
	color: #fff;
}

::v-deep(.mytable-style.vxe-table .vxe-body--column.col-red) {
	background-color: red;
	color: #fff;
} 

:deep(.vxe-table .vxe-table--scroll-x-handle) {
    height: 32px;
}

:deep(.vxe-table .vxe-table--scroll-y-handle) {
    width:  32px;
}
 

.mytable-scrollbar {
  ::-webkit-scrollbar {
    width: 32px !important;
    height: 32px !important;
  }
  ::-webkit-scrollbar-thumb {
    border-radius: 4px;
  }
}

</style>

4.最终效果如下所示

相关推荐
lichenyang4535 分钟前
IPC、JSVM、UIThread、libuv：ASCF 架构图里最容易混的几个词
前端
用户059540174469 分钟前
Redis记忆存储故障恢复测试踩坑实录：手动测试让我漏掉了2个一致性Bug
前端·css
用户21366100357211 分钟前
Vue2脚手架工程化与Axios集成
前端·vue.js
张元清16 分钟前
React useDebounce Hook：给状态和回调做防抖（2026）
javascript·react.js
我不是外星人18 分钟前
我把 Claude Code 搬到网页！自研高颜值 Web 交互工作台
前端·ai编程·claude
mixuecoding29 分钟前
零成本搭建全球科技热点情报站：12 个平台，6 小时，0 元
前端
用户0595401744634 分钟前
用了3年Mock，才发现Redis记忆存储的测试一直漏掉了60%的边界场景
前端·css
石小石Orz36 分钟前
AI具身交互：实现一个会说话的3D虚拟伴侣
前端·人工智能·后端
Muen1 小时前
iOS设计模式-外观Facade
前端
Cobyte1 小时前
21.Vue Vapor 组件的实现原理
前端·javascript·vue.js
热门推荐
012026年6月AI大模型全景报告：GPT-5.6、Claude Opus 4.8、Gemini 3.5，中美AI三足鼎立谁主沉浮？022026年6月AI行业全景：从百模大战到Agent元年，这30天发生了什么？032026 年 AI 编程工具终极横评：Cursor vs Claude Code vs Copilot vs Windsurf04飞书长连接_事件订阅（接收消息，审批任务状态变更）05Trae国际版与国内版深度测评：AI原生IDE的双生花06【AI】2026 年具身智能模型和世界模型总结07GitHub 镜像站点08Claude Code、Codex、Cursor三分天下：2026年AI编程Agent生态全景剖析092026 AI 编程工具终极实战指南：Cursor vs Claude Code vs Copilot，开发者该怎么选？102026年AI架构实战：彻底解决OpenAI接口超时与封号，Python调用GPT-5.2/Sora2企业级架构详解（附源码+压测报告）