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.最终效果如下所示

相关推荐
C澒2 小时前
供应链产研交付提效：样板间 2.0 从标准化到自动化的全链路落地实践
前端·ai编程
yangyanping201082 小时前
Vue入门到精通五之yarn部署项目
前端·javascript·vue.js
Luna-player2 小时前
npx create-vue 创建 Vue 3 项目的交互式配置界面
前端·javascript·vue.js
还是大剑师兰特2 小时前
const { proxy } = getCurrentInstance() 的正确使用方法
前端·javascript·vue.js
zhengzhengwang2 小时前
react18升级新特性
前端·javascript·react.js
Reisentyan2 小时前
[vue 3]HTML Learn Data Day 8
前端·vue.js·html
程序员小李白2 小时前
ES6详细解析
前端·ecmascript·es6
We་ct2 小时前
LeetCode 39. 组合总和：DFS回溯解法详解
前端·算法·leetcode·typescript·深度优先·个人开发·回溯
热门推荐
01GitHub 镜像站点02OpenClaw 使用和管理 MCP 完全指南03本地部署 OpenClaw + DeepSeek-R1 完全指南04得物前端部门，没了05OpenClaw 连接飞书完整指南：插件安装、配置与踩坑记录06OpenClaw 飞书机器人不回复消息？3 小时踩坑总结07Window 10部署openclaw报错node.exe : npm error code 12808OpenClaw macOS 完整安装与本地模型配置教程（实战版）09npm-error code 128问题解决方法10OpenClaw 接入 QQ Bot 完整实践指南