avue 通过this.$DialogForm.show弹窗 control函数控制表单联动的高级用法及注意事项,此方法可用于实现数据初始化控制,表单项显隐或输入框启用禁用等
代码构成
AvueDialogFormCTRView.vue
AvueDialogFormCTRViewOption.js
项目结构图
弹框效果图
代码
AvueDialogFormCTRView.vue
<!--
* @Description:
* @Version: 1.0
* @Autor: Tj
* @Date: 2023-03-17 09:40:03
-->
<template>
<div>
<div>
<el-button type="primary" @click="showDialog">
弹窗表单(字段联动,初始化约束)</el-button
>
</div>
</div>
</template>
<script>
import { AvueDialogFormCTROption } from "@/options/AvueDialogFormCTRViewOption.js";
export default {
name: "DialogForm",
components: {},
data() {
return {
model: {
text1: "字段1数据",
text2: "字段2数据",
text3: "字段3数据",
control1: "3",
},
dicData: [
{ label: "开放1个字段", value: "1" },
{ label: "开放2个字段", value: "2" },
{ label: "开放3个字段", value: "3" },
],
};
},
methods: {
showDialog() {
this.$DialogForm.show({
title: "弹窗表单(字段联动,初始化约束)",
width: "550px",
menuPosition: "right",
data: this.model, //初始数据
option: AvueDialogFormCTROption(this, this.model), //表单项
form: "form",
callback: (res) => {
console.log(res.data);
this.$message.success("关闭等待框");
setTimeout(() => {
res.done();
setTimeout(() => {
this.$message.success("关闭弹窗");
res.close();
}, 1000);
}, 1000);
},
beforeOpen: (done) => {
this.$message.info("正在打开弹窗");
done();
},
beforeClose: (done) => {
this.$message.info("正在关闭弹窗");
done();
},
});
},
},
};
</script>
<style scoped type="scss">
.margin-top {
margin-top: 20px;
}
</style>
AvueDialogFormCTRViewOption.js
export const AvueDialogFormCTROption = (obj, formData) => {
return {
labelWidth: 100, //整体列标签宽度
submitText: "提交修改",
span: 24,
size: "small", //medium/small/mini
column: [
{
row: true,
order: 100,
label: "控制项",
prop: "control1",
type: "select",
props: { label: "label", value: "value" },
dicData: obj.dicData,
control: (val, from) => {
if (val == 1) {
from.text2 = "";
from.text3 = "";
return {
text1: {
disabled: false,
},
text2: {
disabled: true,
},
text3: {
disabled: true,
},
};
} else if (val == 2) {
from.text3 = "";
return {
text1: {
disabled: false,
},
text2: {
disabled: false,
},
text3: {
disabled: true,
},
};
} else if (val == 3) {
return {
text1: {
disabled: false,
},
text2: {
disabled: false,
},
text3: {
disabled: false,
},
};
}
},
rules: [{ required: true, message: "请选择控制项", trigger: "blur" }],
},
{
row: true,
order: 50,
label: "字段1",
prop: "text1",
width: 120,
type: "input",
disabled: false,
value: "",
},
{
row: true,
order: 50,
label: "字段2",
prop: "text2",
width: 120,
type: "input",
disabled: formData.control1 == 2 ? true : false,
value: "",
},
{
// row: true,
order: 50,
label: "字段3",
prop: "text3",
type: "textarea",
maxlength: 200,
showWordLimit: true,
minRows: 2,
maxRows: 2,
disabled:
formData.control1 == 1 || formData.control1 == 2 ? true : false,
value: "",
},
{
// row: true,
order: 50,
label: "字段4",
prop: "text4",
type: "input",
maxlength: 200,
showWordLimit: true,
// minRows: 2,
// maxRows: 2,
disabled: false,
value: "",
},
],
};
};
注意事项
- option column 中被control控制的属性必须声明,如代码中每个字段的disabled属性,否则被控制字段将会不准确
- 通过对from对象属性的修改,改变表单项的值,如代码中from.text2 = “”;即把该字段置空
- 通过 data属性给表单赋初始值,如代码中data: this.model, //初始数据