avue 通过this.$DialogForm.show弹窗 control函数控制表单联动的高级用法及注意事项

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, //初始数据