Avue使用的小细节

安装

1、备注:以下是介绍vue2版本的使用方法,vue3版本的后期更新

2、官网地址:v2.avuejs.com/docs/instal...

3、安装

js 复制代码
npm i @smallwei/avue@latest-v2 -S
yarn add @smallwei/avue@latest-v2 -S

//需要先安装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);

4、具体配置可以看官网

注意的小细节

1、使用它的"编辑"功能,且在编辑弹窗中"自定义表单"时,需给表格加上 v-model 变量

例如:(以下的代码我使用的是类的写法,不用在意前面的前缀)

2、在编辑弹窗中,不同组件之间的交互

js 复制代码
control:(val, form) => {} // val:自己这个组件当前的值,form:整个表单的字段跟值
//(注意要修改的话,只能拿这个form的来改,才是响应式的,不能拿外面自己定义的prizeForm这个字段来改)

注意:一些不需要展示的字段不用在option中配置,可以在初始时在表单字段prizeForm中定义、或者用$set()来加这个属性,两种方式都是为了实现响应式

方式一:

方式二:

3、打开表单之前:

before-open:传函数,可以修改表单prizeForm值的数据,获取打开的类型,控制是否要打开

相关推荐
林太白1 分钟前
2025 AI浪潮下的编程之路:我的天工项目与终身学习
前端·后端·trae
再花7 分钟前
VitePress+Github Pages实现静态文档站
前端
Lsx_9 分钟前
案例+图解带你一文读懂Svg、Canvas、Css、Js动画🔥🔥(4k+字)
前端·javascript·canvas
十一.36619 分钟前
127-130 定时器的简介,切换图片练习,修改div移动练习,延时调用
前端·javascript·html
Jolyne_20 分钟前
React下拉框接口请求hook封装
前端
狗头大军之江苏分军20 分钟前
2025,我的"Vibe Coding"时刻:当 AI 成为我的编程搭档
前端
同学8079621 分钟前
🔥🔥Vue数字翻滚动画组件:让数据展示更具视觉冲击力
前端·vue.js
一颗烂土豆21 分钟前
🚴‍♂️ Vue3 + Three.js 实战:如何写一个“不晕车”的沉浸式骑行播放器 🎥
vue.js·游戏·three.js
HashTang29 分钟前
【AI 编程实战】第 5 篇:Pinia 状态管理 - 从混乱代码到优雅架构
前端·vue.js·ai编程
青莲84329 分钟前
Kotlin Flow 深度探索与实践指南——上部:基础与核心篇
android·前端