avue实现简单crud

Avue.js是基于element-ui的二次封装框架,简化了数据驱动视图的开发流程,尤其适合表格和表单场景。只需一行代码即可完成crud操作,相比element更易用。推荐使用,并提供了官网和GitHub链接。

avue的使用

最近做的项目中接触到了一个新的框架感觉很好用所以推荐给大家~~

【简介】
Avue.js是基于现有的element-ui库进行的二次封装,简化一些繁琐的操作,核心理念为数据驱动视图,主要的组件库针对table表格和form表单场景,同时衍生出更多企业常用的组件,达到高复用,容易维护和扩展的框架,同时内置了丰富了数据展示组件,让开发变得更加容易。
官网地址:https://avuejs.com/
github地址:https://github.com/nmxiaowei/avue

这个简直太好用了,一套crud只需要一行代码就解决啦
1、【npm安装】

npm i @smallwei/avue -S

在min.js页面引入下方代码

import Avue from '@smallwei/avue';
import '@smallwei/avue/lib/index.css';
Vue.use(Avue);

这里提醒大家一下不要忘记安装 element-ui【官网地址】
【cdn方式】

//在index.html引入avuex的包
avue.min.js为压缩混淆包
avue.js为没有压缩混淆的包
<link rel="stylesheet" href="/lib/index.css
### 实现 Avue-Crud 固定表头功能 为了实现Avue-Crud 组件中固定表头的功能,可以利用 `height` 属性来指定表格的高度。当设置了高度属性之后,Avue-Crud 将自动启用固定表头模式[^1]。 ```html <avue-crud :option="option" height="500"> </avue-crud> ``` 通过上述方式定义了一个具有固定表头的表格组件,其中 `height` 参数决定了整个表格容器的高度。只要指定了这个参数,即使滚动条出现时,表头也会保持静止不动。 另外,在某些情况下可能还需要调整一些样式以确保最佳显示效果: - 如果页面中有多个不同大小的表格,则建议为每个表格单独设定合适的高度; - 对于响应式设计而言,可以根据屏幕尺寸动态计算并应用不同的高度值; 值得注意的是,除了简单的设置 `height` 外部属性外,还可以进一步自定义更多细节,比如冻结列等功能,这些都可以在官方文档找到详细的说明[^2]。 #### 关键代码片段展示 下面是一个完整的 Vue 单文件组件例子,展示了如何创建带有固定表头特性的 Avue-Crud 表格: ```vue <template> <div class="table-container"> <!-- 使用 avue-crud 并传入 option 和 数据源 --> <avue-crud :data="dataList" :option="options" height="400"></avue-crud> </div> </template> <script> export default { data() { return { dataList: [], // 假设这是从服务器获取的数据列表 options: { column: [ { label: '名称', prop: 'name' }, { label: '年龄', prop: 'age' } /* 更多字段 */ ] } }; } }; </script> <style scoped> .table-container { width: 100%; } </style> ``` 此示例中不仅实现了基本的固定表头需求,还提供了一种结构化的方式来管理表格选项和其他配置项。
评论 8
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值