news 2026/4/2 12:32:30

vxe-table 修改为紧凑型样式单元格编辑和虚拟滚动

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
vxe-table 修改为紧凑型样式单元格编辑和虚拟滚动

vxe-table 修改为紧凑型样式单元格编辑和虚拟滚动,由于公司业务需求,需要一屏看非常多的数据,所以需要将行高调低,这样就能显示更多的数据;需要注意的是当行高越小,渲染的单元格数量越多,可能会影响流畅度。

https://vxetable.cn

通过 cell-config.height 和 cell-config.pading 来修改默认单元格高度和边距

<template><div><vxe-gridv-bind="gridOptions"></vxe-grid></div></template><scriptsetup>import{reactive}from'vue'constgridOptions=reactive({border:true,showOverflow:true,showHeaderOverflow:true,showFooterOverflow:true,height:800,size:'mini',cellConfig:{// padding: false,height:30},editConfig:{trigger:'click',mode:'cell'},virtualYConfig:{enabled:true,gt:0},columns:[{type:'seq',width:70},{field:'name',title:'Name',minWidth:100,editRender:{name:'VxeInput'}},{field:'nickname',title:'Nickname',width:200,editRender:{name:'VxeInput'}},{field:'sex',title:'Sex',width:100,editRender:{name:'VxeInput'}},{field:'age',title:'Age',width:100,editRender:{name:'VxeInput'}},{field:'num',title:'Num',width:100,editRender:{name:'VxeInput'}},{field:'time',title:'Time',width:100,editRender:{name:'VxeInput'}},{field:'attr1',title:'Attr1',width:150,editRender:{name:'VxeInput'}},{field:'attr2',title:'Attr2',width:200,editRender:{name:'VxeInput'}},{field:'attr3',title:'Attr3',width:150,editRender:{name:'VxeInput'}},{field:'attr4',title:'Attr4',width:100,editRender:{name:'VxeInput'}},{field:'attr5',title:'Attr5',width:150,editRender:{name:'VxeInput'}},{field:'address',title:'Address',width:200,editRender:{name:'VxeInput'}}],data:[]})// 模拟后端接口constloadList=(size=200)=>{constdataList=[]for(leti=0;i<size;i++){dataList.push({id:10000+i,name:'Test'+i,nickname:'nickname'+i,role:'Developer',sex:'女',age:18,num:100000+i,time:10000000+i,address:'address'+i,attr1:'attr1'+i,attr2:'attr2'+i,attr3:'attr3'+i,attr4:'attr4'+i,attr5:'attr4'+i})}gridOptions.data=dataList}loadList(1000)</script>

https://gitee.com/x-extends/vxe-table

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/3/31 5:23:56

军工仿真软件如何实现三维公式与Word数据联动至XHEDITOR?

Word一键转存CMS升级方案 项目背景与需求分析 作为山西软件工程专业的大三学生&#xff0c;我正在给自己的CMS新闻管理系统添加Word一键转存功能。核心需求包括&#xff1a; 富文本粘贴&#xff1a;支持Word内容粘贴并保留完整样式自动上传&#xff1a;图片自动上传到阿里云…

作者头像 李华
网站建设 2026/4/1 18:58:37

Cesium 处理屏幕空间事件(鼠标点击、移动、滚轮)的示例

鼠标点击事件通过LEFT_CLICK类型监听&#xff0c;使用drillPick方法获取点击的对象并打印其名称。鼠标移动事件通过MOUSE_MOVE类型监听&#xff0c;使用pickEllipsoid方法获取鼠标位置对应的经纬度并打印。鼠标滚轮事件通过WHEEL类型监听&#xff0c;通过调整相机的高度来实现缩…

作者头像 李华
网站建设 2026/3/28 3:03:01

计算机视觉“奥运会”:CVPR, ICCV, ECCV 全解析

点击 “AladdinEdu&#xff0c;你的AI学习实践工作坊”&#xff0c;注册即送-H卡级别算力&#xff0c;沉浸式云原生集成开发环境&#xff0c;80G大显存多卡并行&#xff0c;按量弹性计费&#xff0c;教育用户更享超低价。 计算机视觉“奥运会”&#xff1a;CVPR&#xff0c; IC…

作者头像 李华
网站建设 2026/3/27 2:10:22

普通人成为一名网络安全工程师难吗?

如果对该专业感兴趣且愿意为之努力&#xff0c;那么学起来是十分轻松的&#xff1b;如果不感兴趣且不愿下功夫&#xff0c;学习起来肯定比较难的 需要学什么&#xff1f; 成为网络安全工程师&#xff0c;需要经历3各阶段&#xff1a;初级安全工程师→中级安全工程师→高级安全…

作者头像 李华