一劳永逸之Avue-Crud组件

华而有识

已于 2023-09-11 14:05:48 修改

阅读量1.4k

点赞数

文章标签： vue.js

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

本文链接：https://blog.csdn.net/FrontEndEngineer/article/details/130990369

版权

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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按钮

最低0.47元/天解锁文章