郑州市网站建设_网站建设公司_Linux_seo优化

前言
Avue 好用，但配置散、文档长。本文只挑“常用却容易忘”的 15 个场景，一条给一段示例，粘进项目就能跑。建议收藏，写页面不用再翻山越岭。

1. 列宽自适应
{ label: '手机号', prop: 'mobile', minWidth: 120 }
minWidth 优先于 width，表格过窄自动折行，不挤变形。

2. 表头合并
{ label: '用户基础信息', children: [ { label: '姓名', prop: 'name' }, { label: '年龄', prop: 'age' } ] }
children 长度≥1 自动合并，可多阶嵌套。

3. 斑马纹 + 隔行换色
option: { stripe: true, rowClassName: ({ row, rowIndex }) => rowIndex % 2 ? 'even-row' : 'odd-row' }
配合 CSS 自定义双色行，护眼。

4. 跨页多选记忆
option: { reserveSelection: true, selection: true }
必须同时开 selection，翻页后仍保留勾选。

5. 新增按钮文字
option: { addBtnText: '添加用户', addBtnIcon: 'el-icon-plus' }
同理可改 editBtnText / delBtnText。

6. 行内编辑即时校验
{ label: '邮箱', prop: 'email', edit: true, rules: [ { required: true, message: '必填' }, { type: 'email', message: '格式错误' } ] }
失焦即触发，不用再写整个表单校验。

7. 编辑时禁止修改某列
{ label: '创建时间', prop: 'createTime', editDisabled: true }
viewDisabled 可控制查看弹窗是否显示该字段。

8. 字典回显一条龙
{ label: '状态', prop: 'status', type: 'select', dicData: 'sys_status' }
后端接口 /sys/dict/getByType/sys_status 自动下拉+回显，无需手动转 label。

9. 数字千分位/金额两位小数
{ label: '金额', prop: 'money', formatter: (row, val) => Number(val).toLocaleString('zh-CN', { minimumFractionDigits: 2 }) }
列内直接格式化，省去插槽。

10. 前端一次性加载（小数据表）
option: { pageSize: 9999, pagination: false }
数据<1000 条时前端分页，页面秒开。

11. 自定义空数据图标
option: { emptyText: '<div class="empty"><img src="xxx.gif"/><p>暂无订单</p></div>' }
支持 HTML，空数据时自动替换默认提示。

12. 批量删除二次确认
option: { selection: true, tipTitle: '确定删除选中的 {count} 条数据吗？', tipTitleKey: 'count' }
{count} 自动替换成勾选条数，防手滑。

13. 内容省略+悬浮提示
{ label: '备注', prop: 'remark', overHidden: true, showOverflowTooltip: true }
先截断，鼠标悬浮再展开，表宽固定必备。

14. 行拖拽排序
option: { drag: true, dragRow: true }
监听 row-drag-end 事件，把新顺序一次性扔给后端即可。

15. 列默认隐藏/用户动态开关
{ label: '扩展字段', prop: 'ext', hide: true }
默认隐藏，用户可在右上角「列设置」手动打开，首屏更清爽。

把这条贴在工位，写配置再也不用“翻山越岭”。
如果觉得有用，点下收藏，评论区再补充你踩过的“易忘坑”！