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

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

https://vxetable.cn

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

<template>
  <div>
    <vxe-grid v-bind="gridOptions"></vxe-grid>
  </div>
</template>

<script setup>
import { reactive } from 'vue'

const gridOptions = 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: []
})
// 模拟后端接口
const loadList = (size = 200) => {
  const dataList = []
  for (let i = 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