Avue dynamic表单实现form单选，修改及新增项

AvueDialogFormTableViewOption.js

/*
 * @Description:银行账号
 * @Version: 1.0
 * @Autor: Tj
 * @Date: 2023-03-21 11:02:42
 */
export const BankAccountOption = (vueObj, formData) => {
  return {
    labelWidth: 100, //整体列标签宽度
    submitText: "提交",
    span: 24,
    size: "small", //medium/small/mini
    column: [
      {
        hide: true,
        width: 200,
        label: "账号",
        prop: "AccountNo",
        overHidden: true,
        showWordLimit: true,
        maxlength: 50,
        rules: [
          {
            required: true,
            message: "请输入账号",
            trigger: "blur",
          },
        ],
      },
      {
        hide: true,
        label: "开户行",
        prop: "Bank",
        overHidden: true,
        showWordLimit: true,
        maxlength: 100,
        rules: [
          {
            required: true,
            message: "请输入开户行",
            trigger: "blur",
          },
        ],
      },
    ],
  };
};
/*
 * @Description: 地址
 * @Version: 1.0
 * @Autor: Tj
 * @Date: 2023-03-21 11:02:42
 */
export const AddressOption = (vueObj, formData) => {
  return {
    labelWidth: 100, //整体列标签宽度
    submitText: "提交",
    span: 24,
    size: "small", //medium/small/mini
    column: [
      {
        width: 80,
        label: "收货人",
        prop: "Consianee",
        overHidden: true,
        showWordLimit: true,
        maxlength: 30,
        rules: [
          {
            required: true,
            message: "请输入收货人",
            trigger: "blur",
          },
        ],
      },
      {
        label: "联系人电话",
        prop: "ConsigneeContact",
        type: "input",
        overHidden: true,
        showWordLimit: true,
        maxlength: 100,
        rules: [
          {
            required: true,
            message: "请输入收货联系人",
            trigger: "blur",
          },
        ],
      },
      {
        label: "收货地址",
        prop: "ConsigneeAddress",
        type: "textarea",
        overHidden: true,
        minRows: 2,
        maxRows: 3,
        showWordLimit: true,
        maxlength: 200,
        rules: [
          {
            required: true,
            message: "请输入收货地址",
            trigger: "blur",
          },
        ],
      },
    ],
  };
};
/*
 * @Description:银行账号
 * @Version: 1.0
 * @Autor: Tj
 * @Date: 2023-03-21 11:02:42
 */
export const BankAccountDynamicColumn = (vueObj, formData) => {
  const column = BankAccountOption(vueObj).column;
  column.forEach((ele) => {
    ele.cell = false;
  });
  return column;
};
/*
 * @Description: 地址
 * @Version: 1.0
 * @Autor: Tj
 * @Date: 2023-03-21 11:02:42
 */
export const AddressDynamicColumn = (vueObj, formData) => {
  const column = AddressOption(vueObj).column;
  column.forEach((ele) => {
    ele.cell = false;
  });
  return column;
};
/*
 * @Description:
 * @Version: 1.0
 * @Autor: Tj
 * @Date: 2023-03-21 11:02:42
 */
export const AvueDialogFormTableOption = (vueObj, formData) => {
  return {
    labelWidth: 100, //整体列标签宽度
    submitText: "提交",
    span: 24,
    size: "small", //medium/small/mini
    emptyBtn: false,
    menuPosition: "right",
    column: [
      {
        label: "银行账号",
        prop: "dynamic",
        type: "dynamic",
        span: 24,
        rules: [
          {
            required: true,
            message: "请选择银行账号",
            trigger: "change",
          },
        ],
        children: {
          size: "mini",
          type: "crud",
          maxHeight: 140,
          tip: false,
          align: "left",
          headerAlign: "left",
          index: false, //索引不显示即可关闭新增删除按钮
          indexWidth: 30,
          showHeader: false,
          border: false,
          cell: false,
          // selection: true,
          // selectionWidth: 30,
          delBtn: false,
          rowAdd: (done) => {
            vueObj.$message.success("新增回调");
            vueObj.addBankAccount(done);
          },
          rowDel: (row, done) => {
            vueObj.$message.success("删除回调" + JSON.stringify(row));
            done();
          },
          selectionChange(selection) {
            console.log(selection[selection.length - 1]);
          },
          column: [
            {
              label: "",
              prop: "accountInfo",
              align: "left",
              overHidden: true,
            },
            {
              label: "",
              prop: "oprator",
              fixed: "right",
              align: "right",
              width: 100,
            },
          ],
        },
      },
      {
        label: "",
        prop: "bankAccountAdd",
      },
      {
        label: "收货地址",
        prop: "address",
        type: "textarea",
        minRows: 2,
        maxRows: 3,
        readonly: true,
        labelTip: "从下面列表中选择",
        labelTipPlacement: "bottom-start",
        rules: [
          {
            required: true,
            message: "请选择收货地址",
            trigger: "change",
          },
        ],
      },
      {
        label: "",
        prop: "dynamic2",
        type: "dynamic",
        span: 24,
        children: {
          size: "mini",
          type: "crud",
          maxHeight: 140,
          tip: false,
          delBtn: false,
          align: "left",
          headerAlign: "left",
          index: false, //索引不显示即可关闭新增删除按钮
          indexWidth: 30,
          showHeader: false,
          border: false,
          // selection: true,
          // selectionWidth: 30,
          // menu:true,
          rowAdd: (done) => {
            vueObj.$message.success("新增回调");
            vueObj.addAddress(done);
          },
          rowDel: (row, done) => {
            vueObj.$message.success("删除回调" + JSON.stringify(row));
            done();
          },
          selectionChange(selection) {
            console.log(selection[selection.length - 1]);
          },

          column: [
            ...AddressDynamicColumn(vueObj),
            {
              label: "",
              prop: "oprator2",
              fixed: "right",
              align: "right",
              width: 100,
            },
          ],
        },
      },
      {
        label: "",
        prop: "addressAdd",
      },
    ],
  };
};

AvueDialogFormTableView.vue

<!--
 * @Description: 
 * @Version: 1.0
 * @Autor: Tj
 * @Date: 2023-03-17 09:40:03
-->
<template>
  <div>
    <div>
      <el-button type="primary" @click="showDialog"> dynamic表单</el-button>
    </div>
    <el-dialog
      title="dynamic表单"
      v-dialogDrag
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :visible.sync="dialogFlag"
      class="avue-dialog myclass my-dialog"
      width="650px"
      top="10px"
    >
      <avue-form
        ref="dialogForm"
        :option="avueDialogFormTableOption"
        v-model="model"
        @submit="handleSubmit"
      >
        <template slot-scope="{ item, value, label }" slot="bankAccountAdd">
          <span>
            <el-button
              @click="addBankAccount2(item, value, label)"
              size="mini"
              type="buton"
              >+ 新增</el-button
            ></span
          >
        </template>
        <template slot-scope="{ item, value, label }" slot="addressAdd">
          <span>
            <el-button @click="addAddress2(item, value, label)" size="mini" type="buton"
              >+ 新增</el-button
            ></span
          >
        </template>
        <template slot-scope="{ row, index }" slot="accountInfo">
          <div>
            <el-radio
              v-model="accountIndex"
              :label="`${row.AccountNo} ${row.Bank}`"
              @input="chooseBankAccount(row, index)"
            ></el-radio>
          </div>
        </template>
        <template slot-scope="{ row, index }" slot="oprator">
          <div>
            <el-button @click="addBankAccount2(row, index)" size="mini" type="text"
              >修改</el-button
            >
          </div>
        </template>
        <template slot-scope="{ row }" slot="oprator2">
          <div>
            <el-button @click="chooseAddress(row)" size="mini" type="text"
              >选择</el-button
            >
            <el-button @click="addAddress2(row)" size="mini" type="text">修改</el-button>
          </div>
        </template>
        <template slot-scope="{ size }" slot="menuForm">
          <el-button :size="size" @click="dialogFlag = false">关闭</el-button>
        </template>
      </avue-form>
      <!-- <div class="avue-dialog__footer">
        <el-button @click="dialogFlag = false" size="small" type="">关 闭</el-button>
      </div> -->
    </el-dialog>
  </div>
</template>
<script>
import {
  AvueDialogFormTableOption,
  BankAccountOption,
  AddressOption,
} from "@/options/AvueDialogFormTableViewOption.js";
export default {
  name: "DialogForm",
  components: {},
  data() {
    return {
      dialogFlag: false,
      previewImageUrl: "",
      test: "test",
      accountIndex: "AccountNo2 Bank2",
      model: {
        dynamic: [
          {
            AccountNo:
              "AccountNo1 AccountNo1 AccountNo1 AccountNo1 AccountNo1 AccountNo1 AccountNo1 ",
            Bank: "Bank1",
          },
          {
            AccountNo: "AccountNo2",
            Bank: "Bank2",
          },
          {
            AccountNo: "AccountNo3",
            Bank: "Bank3",
          },
        ],
        dynamic2: [
          {
            Consianee: "Consianee1",
            ConsigneeContact: "ConsigneeContact1",
            ConsigneeAddress: "ConsigneeAddress1",
          },
          {
            Consianee: "Consianee2",
            ConsigneeContact: "ConsigneeContact2",
            ConsigneeAddress: "ConsigneeAddress2",
          },
          {
            Consianee: "Consianee3",
            ConsigneeContact: "ConsigneeContact3",
            ConsigneeAddress: "ConsigneeAddress3",
          },
        ],
      },
    };
  },
  computed: {
    avueDialogFormTableOption() {
      return AvueDialogFormTableOption(this, this.model); //表单项
    },
  },
  watch: {},
  mounted() {
    // this.accountIndex = 0;
  },
  methods: {
    showDialog() {
      this.dialogFlag = true;
    },
    chooseBankAccount(row, index) {
      console.log(row, index);
      // this.accountIndex = index;
      this.model.bankAccount = `${row.AccountNo} ${row.Bank}`;
    },
    chooseAddress(row) {
      console.log(row);
      this.model.address = `${row.Consianee} ${row.ConsigneeContact} ${row.ConsigneeAddress}`;
    },
    /**
     * 新增银行账号
     * @param {*} done
     */
    addBankAccount2(row = null) {
      this.$DialogForm.show({
        title: "银行账号信息",
        width: "550px",
        top: "10px",
        menuPosition: "right",
        data: row ? row : {}, //初始数据
        option: BankAccountOption(this), //表单项
        form: "form",
        callback: (res) => {
          console.log(res.data);
          this.$message.success("关闭等待框");
          setTimeout(() => {
            if (!row) {
              this.model.dynamic.push(res.data);
            }
            res.done();
            setTimeout(() => {
              this.$message.success("关闭弹窗");
              res.close();
            }, 1000);
          }, 1000);
        },
        beforeClose: (done) => {
          this.$message.info("正在关闭弹窗");
          done();
        },
      });
    },
    addAddress2(row = null) {
      this.$DialogForm.show({
        title: "收货地址信息",
        width: "550px",
        top: "10px",
        menuPosition: "right",
        data: row ? row : {}, //初始数据
        option: AddressOption(this), //表单项
        form: "form",
        callback: (res) => {
          console.log(res.data);
          this.$message.success("关闭等待框");
          setTimeout(() => {
            this.model.dynamic2.push(res.data);
            res.done();
            setTimeout(() => {
              this.$message.success("关闭弹窗");
              res.close();
            }, 1000);
          }, 1000);
        },
        beforeClose: (done) => {
          this.$message.info("正在关闭弹窗");
          done();
        },
      });
    },
    handleSubmit(form, done) {
      this.$message.success("3s后关闭");
      console.log(form);
      setTimeout(() => {
        done();
      }, 3000);
    },
  },
};
</script>
<style lang="scss">
.myclass .el-dialog__body {
  margin-bottom: 0px !important;
}
.my-dialog {
  .el-col-sm-12 {
    width: 100% !important;
  }
}
</style>

效果图