vxe-table size

### vxe-table 的 size 属性使用方法及样式调整 vxe-table 是一个功能强大的表格组件库，支持多种尺寸（size）的设置，可以通过 `size` 属性来调整表格的整体风格和单元格高度。以下是关于 `size` 属性的使用方法以及样式调整的详细说明： #### 1. `size` 属性的基本使用 `size` 属性用于定义表格的整体尺寸风格，支持以下几种值：`medium`、`small`、`mini` 和默认值（未设置时）。不同 `size` 值会影响表格的行高、字体大小以及其他相关样式。 ```javascript <template> <vxe-table :size="tableSize"> <!-- 表格内容 --> </vxe-table> </template> <script> export default { data() { return { tableSize: 'medium' // 可选值：'medium', 'small', 'mini' }; } }; </script> ``` 通过动态绑定 `size` 属性，可以实现表格尺寸的灵活切换[^2]。 #### 2. 样式调整 如果需要对不同 `size` 下的表格样式进行自定义调整，可以通过覆盖默认样式来实现。例如，调整表格底部页脚的高度： ```css /* 对应 vxe-table 的 size 没有设置的时候 */ .vxe-table--render-default.border--full .vxe-footer--column { height: 20px; } /* 对应 vxe-table 的 size="medium" 的时候 */ .vxe-table--render-default.size--medium .vxe-footer--column.col--ellipsis { height: 20px; } /* 对应 vxe-table 的 size="small" 的时候 */ .vxe-table--render-default.size--small .vxe-footer--column.col--ellipsis { height: 20px; } /* 对应 vxe-table 的 size="mini" 的时候 */ .vxe-table--render-default.size--mini .vxe-footer--column.col--ellipsis { height: 20px; } ``` 上述代码展示了如何为不同 `size` 设置对应的页脚高度[^1]。 #### 3. 全局配置与按需引入 为了减少打包体积，推荐使用按需引入的方式加载 vxe-table 组件及其样式。例如： ```javascript // 安装依赖 pnpm add xe-utils vxe-table@legacy pnpm add babel-plugin-import -D // 修改 .babelrc 或 babel.config.js { "plugins": [ ["import", { "libraryName": "vxe-table", "style": true // 是否按需加载样式 }] ] } ``` 通过按需引入，可以仅加载项目中实际使用的组件和样式[^3]。 #### 4. 动态调整 `size` 属性 如果需要根据用户偏好或系统状态动态调整 `size` 属性，可以结合 Vue 的响应式数据或 localStorage 实现。例如： ```javascript <template> <vxe-table :size="tableSize"> <!-- 表格内容 --> </vxe-table> </template> <script> export default { data() { return { tableSize: localStorage.getItem('tableSize') || 'medium' }; }, watch: { tableSize(newVal) { localStorage.setItem('tableSize', newVal); } } }; </script> ``` 上述代码通过监听 `tableSize` 的变化，将最新的值存储到 localStorage 中，从而实现持久化设置[^5]。 #### 5. 示例代码 以下是一个完整的示例，展示如何结合 `size` 属性和自定义样式使用 vxe-table： ```vue <template> <vxe-table :size="tableSize" border resizable> <vxe-column field="name" title="Name"></vxe-column> <vxe-column field="age" title="Age"></vxe-column> </vxe-table> </template> <script> export default { data() { return { tableSize: 'medium' }; } }; </script> <style> .vxe-table--render-default.size--medium .vxe-footer--column.col--ellipsis { height: 20px; } </style> ``` ###