修改vxe-table 3.12.10版本 中vxe-cell 高度

### 修改 vxe-table 3.12.10 版本中 vxe-cell 的高度 在 `vxe-table` 中，单元格的高度主要由表格的行高控制。可以通过自定义 CSS 变量来调整默认行高的样式[^2]，或者启用行高拖拽功能动态调整行高[^3]。 #### 方法一：通过自定义 CSS 变量设置行高 `vxe-table` 提供了一组用于配置不同尺寸 (`default`, `medium`, `small`, `mini`) 行高的 CSS 变量。可以在项目的全局样式文件（如 `vxe-table-reset.scss`）中覆盖这些变量： ```scss // 自定义 vxe-table 默认行高 :root { --vxe-ui-table-row-height-default: 80px; } ``` 完成以上操作后，在项目入口文件（如 `main.js` 或 `main.ts`）引入该样式文件即可生效[^1]： ```javascript import '@/styles/vxe-table-reset.scss'; ``` 此方法适用于静态场景下统一调整整个表格的行高。 --- #### 方法二：通过列配置单独调整特定列的行高 如果仅需针对某些列调整其单元格高度，则可以利用 `row-resize` 属性配合 `column` 配置实现。例如： ```html <template> <div> <vxe-grid v-bind="gridOptions"></vxe-grid> </div> </template> <script setup> import { reactive } from 'vue'; const gridOptions = reactive({ border: true, rowConfig: { resizable: true // 启用行高拖拽功能 }, columns: [ { type: 'seq', width: 70, rowResize: true }, // 开启当前列的行高拖拽 { field: 'name', title: 'Name' }, { field: 'sex', title: 'Sex' }, { field: 'age', title: 'Age' }, { field: 'time', title: 'Time' }, { field: 'address', title: 'Address' } ], data: [ { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' }, { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' }, { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' }, { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' } ] }); </script> ``` 在此示例中，`row-resize` 被应用于序列号列（`type: 'seq'`），允许用户手动调整该列对应的行高[^3]。 --- #### 方法三：通过 slot 自定义渲染内容并调整高度 对于更复杂的场景，可以直接通过 `slot` 定制单元格的内容及其样式。例如： ```html <template> <vxe-table :data="tableData"> <vxe-column field="name" title="Name"> <template #default="{ row }"> <div style="height: 50px; line-height: 50px;"> {{ row.name }} </div> </template> </vxe-column> <vxe-column field="sex" title="Sex"></vxe-column> <vxe-column field="age" title="Age"></vxe-column> </vxe-table> </template> <script> export default { data() { return { tableData: [ { id: 10001, name: 'Test1', sex: 'Man', age: 28 }, { id: 10002, name: 'Test2', sex: 'Women', age: 22 } ] }; } }; </script> ``` 这种方法适合需要精确控制单个单元格显示效果的情况。 --- #### 总结 - 如果希望整体调整行高，推荐使用 **CSS 变量** 方式。 - 若需求涉及交互式的行高调整，可借助 `row-resize` 功能。 - 对于特殊定制化需求，可通过 `slot` 实现完全自由的布局设计。 ---