avue实现简单crud

已于 2023-04-25 15:43:19 修改
阅读量8.7k 收藏 8
点赞数 1
分类专栏： 前端开发 文章标签： avue element-ui vue
于 2019-12-12 16:07:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DevelopmentW/article/details/103510838
版权
Avue.js是基于element-ui的二次封装框架，简化了数据驱动视图的开发流程，尤其适合表格和表单场景。只需一行代码即可完成crud操作，相比element更易用。推荐使用，并提供了官网和GitHub链接。
摘要由CSDN通过智能技术生成

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方式】


                

                
                
        

        

    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  前端小小白~
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
【项目实战】基于Avue的前端框架实现一个简单CRUD

				
			

			

				

					本本本添哥
				

				

					01-11
					
					2817
					
				

			

		

		

			
				
Avue 是一个基于Element UI框架低代码前端框架,它使用 JSON 配置来生成页面,可以减少页面开发工作量,极大提升效率!

			
		

	



                

              
                



	

		

			

				
					
avue-crud的使用

				
			

			

				

					jkhedge的博客
				

				

					07-08
					
					5606
					
				

			

		

		

			
				
avue-crud的使用

			
		

	



                


  
              

                


	

		

			

				
					
avue-crud 是基于 Vue.js 的一个高度封装的表格（CRUD）组件库

					
最新发布

				
			

			

				

					m0_64455070的博客
				

				

					08-23
					
					320
					
				

			

		

		

			
				
avue-crud是基于 Vue.js 的一个高度封装的表格（CRUD）组件库，它提供了一套丰富的功能来帮助开发者快速构建具有增删改查（CRUD）功能的界面。avue-crud隶属于AVUE这个更广泛的 Vue 组件库，它旨在通过简单的配置和少量的代码，让开发者能够轻松地实现复杂的表格数据展示和交互。

			
		

	





	

		

			

				
					
vue.js的简单的CRUD

				
			

			

				

					qq_25175063的博客
				

				

					11-06
					
					3277
					
				

			

		

		

			
				
一、项目用到了vue，上周五写了一个小demo给同事，今天发出来，记录一下，也希望能对其他人了解vue工作有些帮助吧。
二、直接上代码吧
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src=&quot

			
		

	



		

			
		



	

		

			

				
					
使用Spring Boot和Vue.js构建一个简单的CRUD应用

				
			

			

				

					最佳 Java 编程
				

				

					06-10
					
					630
					
				

			

		

		

			
				
“我喜欢编写身份验证和授权代码。” 〜从来没有Java开发人员。 厌倦了一次又一次地建立相同的登录屏幕？ 尝试使用Okta API进行托管身份验证，授权和多因素身份验证。 
 在本教程中，您将使用Vue.js作为客户端并将Spring Boot作为资源服务器来构建完整的CRUD Web应用程序。 您还将使用OAuth 2.0和Okta保护应用程序的安全。 
 CRUD是C reate，R EA...

			
		

	





	

		

			

				
					
Avue-crud常用配置项

					
热门推荐

				
			

			

				

					前端-卡布达的博客
				

				

					12-16
					
					2万+
					
				

			

		

		

			
				
Avue 表单组件crud常用配置

			
		

	





	

		

			

				
					
一劳永逸之Avue-Crud组件

				
			

			

				

					FrontEndEngineer的博客
				

				

					06-01
					
					1133
					
				

			

		

		

			
				
错误场景：根据筛选条件不同，查询到的表格要求展示不同（表格标题列发生改变），此时表格在切换条件查询时会出现展示问题。今天发现了一款表格组件特别好用，传入表头，传入数据即可完成表格的渲染；1. 前端ui框架各种各样，每种框架都有自己的表格组件。表格中数据对象的key需要与表头的prop相对应。5. avue-crud 使用过程中遇到的问题。6. 更多详情参见Avue官方文档。3. Crud组件的简单使用。2. Avue的安装与引用。4. 表头与表格数据格式。

			
		

	





	

		

			

				
					
【vue】avue-crud表单属性配置（表格以及列）

				
			

			

				

					码农研究僧的博客
				

				

					12-27
					
					7388
					
				

			

		

		

			
				
项目实战中需要调某个样式，但作为后端开发者也只能硬着头皮，此贴作为初学前端的第一帖，以下为学习笔记。form属性文档curd属性文档。

			
		

	





	

		

			

				
					
vue crud table

				
			

			

				

					10-11
				

			

		

		

			
				
vue封装 table

			
		

	





	

		

			

				
					
【avue-crud】---- 实现表格的单选

				
			

			

				

					止于至善
				

				

					01-24
					
					1437
					
				

			

		

		

			
				
avue-crudref="crud"方案一选择构建一个单选属性，然后使用该属性的插槽，来使用 input 事件实现单选，好处是样式符合单选，实现方法直接保存当前选中的值，不用做其他处理，缺点是修改地方比较多；方案二优点是只有配置一个 selection 属性，然后处理 selection-change 事件的逻辑就好；缺点就是需要熟悉文档，查找对应的方法进行处理，样式上也不能看出是单选；

			
		

	





	

		

			

				
					
springboot+mybaitsplus+vue简单的CURD

				
			

			

				

					weixin_45049852的博客
				

				

					05-13
					
					997
					
				

			

		

		

			
				
springboot+mybaitsplus+vue简单的CURD
环境：
jdk1.8   、maven3.3.6+、MySQL5.7
开发工具：ieda
后端创建

创建springboot项目，填写项目名称。

添加依赖，这里不添加也可以，后面在pom文件添加也行。



next——>finish

下载依赖完成以后得到这样一个目录，启动项目看看是否成功。

如果依赖下载不成功，设置自己阿里云的maven




已经配置的可以忽略此步骤
阿里云配置如下

<mirror>
		&

			
		

	





	

		

			

				
					
vue项目组件库Avue表格组件avue-crud

				
			

			

				

					暴走的山交君的博客
				

				

					11-09
					
					1万+
					
				

			

		

		

			
				
vue项目一直在用的pc端后台管理系统的组件库是ElementUI，但是在最近的项目中使用了avue-crud这个组件，他是Avue这个库里面的表格组件。这是官网。 表格使用体验，相比于饿了么，堪称神器，他是基于elementUI封装的更好用的组件库。如果你写的是后台管理这一类项目，体验会很棒，我说的是有大量表格的时候，因为它把一个完整的增删改查全部封装了，棒呆。 进入官网会提示点赞，就会获取一套基于Avue的后台管理项目模板，这一类模板也挺多的开源，比如vue-admin-element，这是它的gith

			
		

	





	

		

			

				
					
avue-crud属性配置项参数

				
			

			

				

					xiaowei66的博客
				

				

					05-08
					
					1731
					
				

			

		

		

			
				
group: [label: '基本信息',column: [label: "主体类型",span: 8,},label: "主体名称",span: 8,},label: '申请信息',span: 8,column: [label: "申请类型",span: 8,},

			
		

	





	

		

			

				
					
使用easyui前端框架构建一个crud应用（看完这篇就够了）

				
			

			

				

					沐雨橙风ιε的博客
				

				

					11-09
					
					2134
					
				

			

		

		

			
				
easyui是博主最喜欢的前端框架，因为它提供了多种主题和圆润好看的各种组件。这篇文章将会详细地介绍easyui前端框架的使用，通过创建一个crud应用来帮助大家快速掌握easyui的使用。

			
		

	





	

		

			

				
					
【vue】avue-crud配置大全-持续更新

				
			

			

				

					王佑辉的博客
				

				

					07-31
					
					9383
					
				

			

		

		

			
				
1.表格属性
width: “100%”,//表格宽度
calcHeight: “auto”,//表格高度差（主要用于减去其他部分让表格高度自适应）
height: “auto”,//表格高度
maxHeight: “auto”,//表格最大高度
border: true,//是否显示表格边框
expand: false,//是否展开折叠行
index: false,//是否显示表格序号（根据分页会自动计算，比如每页10行，到了第二页就会从11开始记数）
indexLabel: “#”,//序号的标题
st

			
		

	





	

		

			

				
					
avue-crud实现下载文件

				
			

			

				

					07-06
				

			

		

		

			
				
`avue-crud`是一个基于Vue.js的轻量级表格组件库，它提供了一个简单易用的界面来操作CRUD（创建、读取、更新、删除）数据，但它本身并不直接支持下载文件功能。然而，你可以通过一些额外的步骤集成到`avue-crud`中：

1. **添加下载按钮**：首先，在展示文件列表的地方，添加一个用于下载的按钮。通常这个按钮会有一个事件监听器，如点击事件。

```html
<template>
  <button @click="downloadFile(file)">下载</button>
</template>

<script>
export default {
  methods: {
    downloadFile(file) {
      const link = document.createElement('a');
      link.href = file.url;
      link.download = file.name;
      link.click();
    },
  },
};
</script>
```

2. **管理文件数据结构**：在数据模型中，为文件定义一个结构，包含URL和名称属性。比如：

```javascript
data() {
  return {
    files: [
      { url: 'your-file-url', name: 'file-name.pdf' },
      // ...
    ],
  };
}
```

3. **处理文件源**：你需要确保`url`指向实际的文件地址，并且该文件能被访问。这可能是从服务器端返回的文件路径，或者是静态资源的URL。

4. **错误处理**：记得添加适当的错误处理，如果链接点击失败，用户应该能看到反馈。

如果你需要更复杂的文件管理，例如文件上传，那么你可能还需要使用其他工具，如axios等前端库配合后端API进行操作。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 8

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值