Avue使用的小细节

去海边吹晚风2023-12-08 14:08

安装

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值的数据，获取打开的类型，控制是否要打开