弹窗表单配置

2024-02-14 03:31| 来源: 网络整理| 查看: 265

# 弹窗表单配置

TIP

表格中的弹出的表单是内置组件avue-form组件,配置属性可以参考FORM组件文档

# 默认值

配置value为字段默认值

export default { data () { return { data: [], option: { column: [ { label: '姓名', prop: 'name', value: 'small' } ] } } } } 显示代码复制代码复制代码# 打开表单前

TIP

你可以在打开前和关闭前做一些逻辑操作，例如打开根据id请求数据，关闭根据id保存数据等

打开表单前会执行beforeOpen方法，相关返回的方法值可以判断表单当前打开的类型是新增还是编辑

export default { data () { return { form: {}, data: [{ name: '张三', sex: '男' }], option: { column: [ { label: '姓名', prop: 'name' }, { label: '性别', prop: 'sex' } ] }, }; }, methods: { beforeOpen (done, type) { this.$alert(`我是${type}`, { confirmButtonText: '确定', callback: action => { if (['view', 'edit'].includes(type)) { // 查看和编辑逻辑 } else { //新增逻辑 this.form.name = '初始化赋值' } done(); } }); } } }; 显示代码复制代码复制代码# 关闭表单前

关闭表单前会执行beforeClose方法，执行返回的done方法后才会彻底关闭表单

export default { data () { return { form: {}, data: [{ name: '张三', sex: '男' }], option: { column: [ { label: '姓名', prop: 'name' }, { label: '性别', prop: 'sex' } ] }, }; }, methods: { beforeClose (done, type) { this.$confirm('确认关闭？') .then(_ => { done(); }) .catch(_ => { }); } } }; 显示代码复制代码复制代码# 不关弹窗连续添加

TIP

源码中涉及自定义卡槽和按钮的操作方法可以下面介绍

自定义按钮按钮方法继续添加 export default { data () { return { form: {}, flag: false, type: '', data: [], option: { align: 'center', menuAlign: 'center', viewBtn: true, column: [ { label: '姓名', prop: 'name' }, { label: '性别', prop: 'sex' } ] }, }; }, methods: { handleNext (row, index) { this.flag = true; this.$refs.crud.rowSave() }, rowSave (form, done, loading) { this.data.push(this.deepClone(this.form)) this.$message.success(JSON.stringify(this.form)) if (this.flag) { this.flag = false; loading() this.form.name = ""; this.form.sex = ""; return } done() }, beforeClose (done) { this.flag = false; done() }, beforeOpen (done, type) { this.type = type; done() } } }; 显示代码复制代码复制代码# 表单按钮位置

配置dialogMenuPosition属性值即可，默认为right

居左居中居右 export default { watch: { direction (value) { this.option.dialogMenuPosition = value; } }, data () { return { direction: 'right', list: [{ id: 1, name: '张三', sex: 12 }, { id: 2, name: '李四', sex: 12 }], option: { dialogMenuPosition: 'right', column: [{ label: 'id', prop: 'id' }, { label: '姓名', prop: 'name' }, { label: '年龄', prop: 'sex' }] } } } } 显示代码复制代码复制代码# 打开表单方式

配置dialogType为弹窗的方式,dialogDirection为弹窗的位置

从左往右开从右往左开从上往下开从下往上开 export default { watch: { direction (value) { this.option.dialogDirection = value; } }, data () { return { direction: 'rtl', list: [{ name: '张三', sex: 12 }, { name: '李四', sex: 12 }], option: { dialogDirection: 'rtl', dialogType: 'drawer', column: [{ label: '姓名', prop: 'name' }, { label: '年龄', prop: 'sex' }] } } } } 显示代码复制代码复制代码# 防重提交

为了防止数据重复提交，加入了防重提交机制，rowSave方法和rowUpdate方法返回done用于关闭表单方法和loading用于关闭禁止的表单不关闭表单

export default { data () { return { data: [ { name: '张三', sex: '男' }, { name: '李四', sex: '女' } ], option: { column: [ { label: '姓名', prop: 'name' }, { label: '性别', prop: 'sex' } ] }, }; }, methods: { handleRowSave (row, done, loading) { this.$message.success('1秒后关闭禁止表单') setTimeout(() => { loading() this.$message.success('3秒后关闭表单') }, 1000) setTimeout(() => { done() }, 3000) }, handleRowUpdate (row, index, done, loading) { this.$message.success('1秒后关闭禁止表单') setTimeout(() => { loading() this.$message.success('3秒后关闭表单') }, 1000) setTimeout(() => { done() }, 3000) } } } 显示代码复制代码复制代码# 标题字段宽度

labelWidth为标题的宽度，默认为90，可以配置到option下作用于全部,也可以单独配置每一项

export default { data () { return { data: [ { name: '张三', sex: '男' }, { name: '李四', sex: '女' } ], option: { labelWidth: 150, column: [ { labelWidth: 30, label: '姓名', prop: 'name' }, { label: '性别', prop: 'sex' } ] }, } } } 显示代码复制代码复制代码# 验证

TIP

具体参考async-validatoropen in new window

配置验证字段的rules的数据对象

export default { data () { return { data: [ { name: '张三', sex: '男' }, { name: '李四', sex: '女' } ], option: { column: [ { label: '姓名', prop: 'name', rules: [{ required: true, message: "请输入姓名", trigger: "blur" }] }, { label: '性别', prop: 'sex', rules: [{ required: true, message: "请输入性别", trigger: "blur" }] } ] }, } } } 显示代码复制代码复制代码# 自定义验证

TIP

自定义校验 callback 必须被调用。更多高级用法可参考 async-validatoropen in new window。

export default { data () { var validatePass = (rule, value, callback) => { if (value === '') { callback(new Error('请输入密码')); } else { callback(); } }; var validatePass2 = (rule, value, callback) => { if (value === '') { callback(new Error('请再次输入密码')); } else if (value !== this.obj.password) { callback(new Error('两次输入密码不一致!')); } else { callback(); } }; return { obj: {}, data: [], option: { column: [{ label: '密码', prop: 'password', rules: [{ required: true, validator: validatePass, trigger: 'blur' }] }, { label: '确认密码', prop: 'oldpassword', rules: [{ required: true, validator: validatePass2, trigger: 'blur' }] }] } }; }, methods: { error (err) { this.$message.success('请查看控制台'); console.log(err) } } } 显示代码复制代码复制代码# 组件对象

打开表单的时候可以获取相关字段的ref对象

export default { data () { return { data: [{ text: '测试数据' }], option: { labelWidth: 120, column: [{ label: '测试框', prop: 'text', }] } }; }, methods: { beforeOpen (done) { done() setTimeout(() => { this.$message.success('查看控制台'); console.log('text的ref对象') console.log(this.$refs.crud.getPropRef('text')) }, 0) } } } 显示代码复制代码复制代码# 字段不同状态

disabled、display、detail等字段在新增和编辑不同状态下，字段的不同状态展示

export default { data () { return { data: [ { name: '张三', sex: '男', grade: 0 }, { name: '李四', sex: '女', grade: 1 } ], option: { column: [ { label: '姓名', prop: 'name', editDisabled: true }, { label: '性别', prop: 'sex', editDisplay: false }, { label: '权限', prop: 'grade', editDetail: true, addDisabled: true }, { label: '测试', prop: 'test', addDisplay: false } ] }, }; } } 显示代码复制代码复制代码# 深结构绑定

bing绑定深层次的结构对象，prop也是需要填写

改变deep.deep.deep.value值改变test值 {{form}} export default { data () { return { form: {}, data: [{ deep: { deep: { deep: { value: '我是深结构' } } } }], option: { labelWidth: 120, column: [ { label: '深结构', prop: 'test', bind: 'deep.deep.deep.value' }, { label: '', prop: 'bind', span: 24, hide: true } ] } } } } 显示代码复制代码复制代码# 字段排序

配置order的序号可以实现表单和表格字段不同的顺序

export default { data () { return { data: [ { name: '张三', sex: '男' }, { name: '李四', sex: '女' } ], option: { column: [ { label: '姓名', prop: 'name' }, { label: '性别', prop: 'sex', order: 1 } ] }, }; }, methods: { } } 显示代码复制代码复制代码# 表单窗口拖拽

dialogDrag设置为true即可拖动表单

export default { data () { return { data: [ { name: '张三', sex: true }, { name: '李四', sex: false } ], option: { dialogDrag: true, column: [ { label: '姓名', prop: 'name', }, { label: '性别', prop: 'sex' } ] } } } } 显示代码复制代码复制代码# 改变结构配置 export default { data () { return { form: {}, defaults: {}, data: [{ text1: 0 }], option: { column: [{ label: '内容1', prop: 'text1', type: 'radio', dicData: [{ label: '显示', value: 0 }, { label: '隐藏', value: 1, }] }, { label: '内容2', prop: 'text2', display: true }, { label: '内容3', prop: 'text3' }] } } }, watch: { 'form.text1' (val) { if (val == 0) { this.defaults.text2.display = true this.defaults.text3.label = '内容3' } else { this.defaults.text2.display = false this.defaults.text3.label = '有没有发现我变了' } } } } 显示代码复制代码复制代码# 与其它字段交互 export default { data () { return { data: [{ text1: 0 }], form: {}, option: { column: [{ label: '内容1', prop: 'text1', type: 'radio', dicData: [{ label: '显示', value: 0 }, { label: '隐藏', value: 1, }], control: (val, form) => { if (val === 0) { return { text2: { display: true }, text3: { label: '内容3' } } } else { return { text2: { display: false }, text3: { label: '有没有发现我变了' } } } }, }, { label: '内容2', prop: 'text2', display: true }, { label: '内容3', prop: 'text3' }] } } } } 显示代码复制代码复制代码# 表单分组

TIP

表单分组详细用法 let baseUrl = 'https://cli.avuejs.com/api/area' export default { data () { return { obj: { name: '11' }, data: [{ name: '张三', sex: 15, province: '110000', city: '110100', area: '110101', checkbox: ['110000'] }], option: { column: [{ label: '姓名', prop: 'name', display: false }, { label: '年龄', prop: 'sex', display: false }], group: [ { label: '用户信息', prop: 'jbxx', icon: 'el-icon-edit-outline', column: [ { label: '姓名', prop: 'name' }, { label: '年龄', prop: 'sex' } ] }, { label: '退款申请', prop: 'tksq', icon: 'el-icon-view', column: [ { label: '省份', prop: 'province', type: 'select', props: { label: 'name', value: 'code' }, cascader: ['city'], dicUrl: `${baseUrl}/getProvince`, rules: [ { required: true, message: '请选择省份', trigger: 'blur' } ] }, { label: '城市', prop: 'city', type: 'select', cascader: ['area'], props: { label: 'name', value: 'code' }, cascaderIndex: 0, dicUrl: `${baseUrl}/getCity/{{key}}`, rules: [ { required: true, message: '请选择城市', trigger: 'blur' } ] }, { label: '地区', prop: 'area', type: 'select', props: { label: 'name', value: 'code' }, cascaderIndex: 0, dicUrl: `${baseUrl}/getArea/{{key}}`, rules: [ { required: true, message: '请选择地区', trigger: 'blur' } ] } ] } , { label: '用户信息', prop: 'yhxxs', icon: 'el-icon-edit-outline', column: [ { label: '测试长度', prop: 'len', maxlength: 5, }, { labelWidth: 120, label: '测试自定义', prop: 'names' } ] } ] } } } } 显示代码复制代码复制代码# 数据过滤

filterDic设置为true返回的对象不会包含$前缀的字典翻译, filterNull设置为true返回的对象不会包含空数据的字段

过滤数据字典过滤空数据不过滤 {{form}} export default { data () { return { data: [{ cascader: [0, 1], tree: 0 }], reload: Math.random(), form: {}, option: { column: [{ label: '姓名', span: 24, prop: 'name', }, { label: '级别', prop: 'cascader', type: 'cascader', dicData: [{ label: '一级', value: 0, children: [ { label: '一级1', value: 1, }, { label: '一级2', value: 2, } ] }], }, { label: '树型', prop: 'tree', type: 'tree', dicData: [{ label: '一级', value: 0, children: [ { label: '一级1', value: 1, }, { label: '一级2', value: 2, } ] }] }] } } }, methods: { refresh () { this.reload = Math.random() }, filter () { this.option.filterDic = false this.option.filterNull = false this.refresh() }, filterDic () { this.option.filterDic = true this.refresh() }, filterNull () { this.option.filterNull = true this.refresh() } } } 显示代码复制代码复制代码# 自定义表单

在卡槽中指定列的prop加上-form作为卡槽的名称开启自定义

新增修改查看 {{user.name?user.name:'暂时没有内容'}} export default { data () { return { user: {}, data: [ { name: '张三', sex: '男' }, { name: '李四', sex: '女' } ], option: { column: [ { label: '姓名', prop: 'name', rules: [{ required: true, message: "请输入姓名", trigger: "blur" }] }, { label: '性别', prop: 'sex' } ] }, }; }, } 显示代码复制代码复制代码# 自定义表单错误提示

在卡槽中指定列的prop加上-error作为卡槽的名称开启自定义

自定义提示{{error}} export default { data () { return { user: {}, data: [ { sex: '男' }, { sex: '女' } ], option: { column: [ { label: '姓名', prop: 'name', rules: [{ required: true, message: "请输入姓名", trigger: "blur" }] }, { label: '性别', prop: 'sex' } ] }, }; }, } 显示代码复制代码复制代码# 自定义表单标题

在卡槽中指定列的prop加上-label作为卡槽的名称开启自定义

姓名;; export default { data () { return { data: [ { name: '张三', sex: '男' }, { name: '李四', sex: '女' } ], option: { column: [ { label: '姓名', prop: 'name', rules: [{ required: true, message: "请输入姓名", trigger: "blur" }] }, { label: '性别', prop: 'sex' } ] }, }; }, } 显示代码复制代码复制代码

【本文地址】

弹窗表单配置

弹窗表单配置

今日新闻

推荐新闻