当前位置：首页 > news >正文

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

news 2026/4/6 17:51:24

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>