AvueAvue
首页
  • 开发指南
  • Skill开发
  • 在线测试工具
  • Form组件
  • Crud组件
  • Default组件
  • Data组件
  • Component组件
产品
工作台
授权
联系
2.x文档
个人支付接口
首页
  • 开发指南
  • Skill开发
  • 在线测试工具
  • Form组件
  • Crud组件
  • Default组件
  • Data组件
  • Component组件
产品
工作台
授权
联系
2.x文档
个人支付接口
  • CRUD API
  • Object对象用法
  • 表格虚拟化
  • 分页
  • 搜索
  • 表头配置
  • 表格行配置项
  • 表格列配置项
  • 数据字典
  • 操作栏配置
  • 增删改查方法
  • 按钮文案和图标
  • 按钮自定义
  • 弹窗表单配置
  • 深层结构数据
  • 卡片模式
  • 统计合计
  • 导入导出
  • 表格树
  • 父子表
  • 行编辑
  • 权限控制
  • 动态行列合并
  • 空状态
  • 等待加载
  • 拖拽排序
  • 其它类型
  • 表格高级用法
  • 大表哥(宇宙最强表格)
  • CRUD模块封装
  • CRUD极简增删改查封装

按钮文案和图标

效果预览可直接操作下方示例

对应按钮的名称加上Text即使按钮的文案,加上Icon即使按钮的图标,如果设置图标为' '则是不使用图标

正在加载示例…
<template>
  <avue-crud :data="data"
             :option="option"></avue-crud>
</template>

<script setup>
import { ref } from 'vue';

const data = ref([
  { name: '张三', sex: '男' },
  { name: '李四', sex: '女' }
]);

const option = ref({
  align: 'center',
  menuAlign: 'center',
  menuWidth: 400,
  viewBtn: true,
  menuTitle: '其它',
  addTitle: '保存标题',
  editTitle: '编辑标题',
  viewTitle: '查看标题',
  searchBtnText: '搜索文案',
  emptyBtnText: '清空文案',
  addBtnText: '新增文案',
  addBtnIcon: 'el-icon-user',
  delBtnText: '删除文案',
  delBtnIcon: ' ',
  editBtnIcon: ' ',
  editBtnText: '编辑文案',
  viewBtnText: '查看文案',
  printBtnText: '打印文案',
  excelBtnText: '导出文案',
  updateBtnText: '修改文案',
  saveBtnText: '保存文案',
  cancelBtnText: '取消文案',
  printBtn: true,
  excelBtn: true,
  column: [
    { label: '姓名', prop: 'name', search: true },
    { label: '性别', prop: 'sex', search: true }
  ]
});
</script>
最后更新:
贡献者: smallwei
Prev
增删改查方法
Next
按钮自定义