一劳永逸之Avue-Crud组件

原创

已于 2023-09-11 14:05:48 修改 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

于 2023-06-01 16:37:50 首次发布

本文介绍了Avue的Crud组件在前端开发中的应用，包括安装、基本使用，以及如何设置表头和数据格式。在使用过程中，针对表格标题列动态变化导致的展示问题，提出了通过调用refreshTable()进行刷新的解决方案。此外，还提到如何调整表格列的宽度，并鼓励读者查阅Avue的官方文档以获取更多详细信息。

1. 前端ui框架各种各样，每种框架都有自己的表格组件。

今天发现了一款表格组件特别好用，传入表头，传入数据即可完成表格的渲染；页面非常简洁。

2. Avue的安装与引用

//安装
npm i @smallwei/avue -S
yarn add @smallwei/avue -S

//main.js中引用，需要先安装ElementUI的依赖
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import Avue from '@smallwei/avue';
import '@smallwei/avue/lib/index.css';
Vue.use(ElementUI)
Vue.use(Avue);

3. Crud组件的简单使用

//文件一(父组件)
<active-header  :sendFormDataHead="head"  :sendFormDataBody="body"></active-header>


//文件二(子组件)
<avue-crud ref="tableRef"  class="avueTable"
       :option="option"
       :data="data"
       :span-method="spanMethod"
    >
</avue-crud>

  option = {
    excelBtn: false, //导出excel按钮
    addBtn: false, //添加按钮
    refreshBtn: false, //刷新按钮
    menu: false, //是否显示操作菜单栏
    columnBtn: false, //表格右侧操作列显隐的按钮
    arrow: false, //分组折叠
    card: false,