使用事项

  • 必须在列表页面使用
  • 模板内必须有 一层<div>才能正常插入代码
  • 同名组件名直接替换掉

image.png
在列表页面生成的参数
image.png
在同目录下生成 cmps 文件夹存放弹窗组件
image.png
生成的表单模板
image.png
生成的弹窗组件源码

  1. <template>
  2.     <div>
  3.         <el-dialog v-bind="$attrs" v-on="$listeners" @open="open" @close="close" :title="formData.id ? '编辑' : '新增'">
  4.             <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="145px" v-loading="load">
  5.                 <el-form-item label="账户名" prop="account">
  6.                     <el-input v-model="formData.account" placeholder="请输入账户名" :maxlength="15" show-word-limit clearable ></el-input>
  7.                 </el-form-item>
  8.                 <el-form-item label="名字" prop="name">
  9.                     <el-input v-model="formData.name" placeholder="请输入名字" :maxlength="11" show-word-limit clearable ></el-input>
  10.                 </el-form-item>
  11.             </el-form>
  12.             <div slot="footer">
  13.                 <el-button @click="close">取消</el-button>
  14.                 <el-button type="primary" @click="handelConfirm">确定</el-button>
  15.             </div>
  16.         </el-dialog>
  17.     </div>
  18. </template>
  19. <script>
  20. export default {
  21.     inheritAttrs: false,
  22.     components: {},
  23.     props: {},
  24.     data() {
  25.         return {
  26.             load: false,
  27.             obdForm: {},
  28.             formData: {
  29.                 account: "",
  30.                 name: "",
  31.             },
  32.             rules: {
  33.                 account: { required: true, message: "请输入账户名", trigger: "blur" },
  34.                 name: { required: true, message: "请输入名字", trigger: "blur" },
  35.             },
  36.         };
  37.     },
  38.     computed: {},
  39.     watch: {},
  40.     created() {},
  41.     mounted() {},
  42.     methods: {
  43.         open() {},
  44.         // 关闭弹窗
  45.         close() {
  46.             this.$refs["elForm"].resetFields();
  47.             this.formData = {};
  48.             this.$emit("update:visible", false);
  49.             this.load = false;
  50.         },
  51.         // 请求详情
  52.         getDetail() {
  53.             if (this.load) return;
  54.             this.load = true;
  55.             this.$request.post({
  56.                 url: "xx",
  57.                 params: {
  58.                     id: this.formData.id
  59.                 },
  60.                 success: (res) => {
  61.                     this.formData = res;
  62.                 },
  63.                 error: () => {},
  64.                 finally: () => {
  65.                     this.load = false;
  66.                 },
  67.             });
  68.         },
  69.         // 确认
  70.         handelConfirm() {
  71.             this.$refs["elForm"].validate((valid) => {
  72.                 if (!valid) return;
  73.                 let form = JSON.parse(JSON.stringify(this.formData))
  74.                 let url = !form.id ? "/admin/adInfo/add" : "/admin/adInfo/update";
  75.                 if (this.load) return;
  76.                 this.load = true;
  77.                 this.$request.post({
  78.                     url: url,
  79.                     params: form,
  80.                     success: (res) => {
  81.                         this.$message.success("操作成功!");
  82.                         this.$emit("success");
  83.                         this.close();
  84.                     },
  85.                     error: () => {},
  86.                     finally: () => {
  87.                         this.load = false;
  88.                     },
  89.                 });
  90.             });
  91.         },
  92.     },
  93. };
  94. </script>
  95. <style lang="scss" scoped>
  97. </style>

最后就能在模板上添加自己想要的业务了