有时候新增、修改数据时往往使用弹出窗口+表单的形式展现。

    1. <a-modal
    2.   :title="title"  // 此处将标题设置为动态绑定属性，好处是可以根据不同情况展示"新增/修改xxx"
    3.   width="640"
    4.   :visible="visible"  // 弹窗是否可见，默认是false，只有在点击新增或修改按钮时可见
    5.   :confirmLoading="confirmLoading"  // 是否显示加载动画
    6.   @ok="handleSubmit"  // 确定按钮处理函数
    7.   @cancel="handleCancel"  // 取消按钮处理函数
    8. >
    9.   <a-spin :spinning="confirmLoading">
    10.     <a-form :form="form">
    11.       <a-form-item
    12.         label="字典名称"
    13.         :labelCol="labelCol"  // label宽度
    14.         :wrapperCol="wrapperCol"  // wrapper控件宽度
    15.       >
    16.         // input组件
    17.         <a-input v-decorator="['dictName', {rules: [{required: true, message: '请输入字典名称！'}, {max: 100, message: '最大不能超过100个字符'}]}]" />
    18.       </a-form-item>
    19.       <a-form-item
    20.         label="字典代码"
    21.         :labelCol="labelCol"
    22.         :wrapperCol="wrapperCol"
    23.       >
    24.         // input组件
    25.         <a-input v-decorator="['dictCode', {rules: [{required: true, message: '请输入字典代码！'}, {max: 30, message: '最大不能超过30个字符'}]}]" />
    26.       </a-form-item>
    27.     </a-form>
    28.   </a-spin>
    29. </a-modal>
    31. <script>
    32. export default {
    33.   data () {
    34.     return {
    35.       labelCol: {
    36.         xs: { span: 24 },
    37.         sm: { span: 7 }
    38.       },
    39.       wrapperCol: {
    40.         xs: { span: 24 },
    41.         sm: { span: 13 }
    42.       },
    43.       visible: false, // 弹窗是否可见，默认是false
    44.       confirmLoading: false,
    45.       title: '新建字典', // 弹窗标题
    47.       form: this.$form.createForm(this) // 初始化表单，form不是一个普通对象，而是一个组件实例对象
    48.     }
    49.   },
    50.   methods: {
    51.     add () { // 新增方法
    52.       this.form.resetFields() // 新增记录时，需要把表单清空，否则控件会保留上次打开时的值
    53.       this.title = '新建字典'
    54.       this.visible = true
    55.     },
    56.     edit (record) { // 修改方法
    57.       const { form: { setFieldsValue } } = this  // ES6解构赋值了解一下：http://es6.ruanyifeng.com/#docs/destructuring
    58.       const { dictCode, dictName } = record // 同上
    60.       this.title = '修改字典'
    61.       this.visible = true
    62.       this.$nextTick(() => {
    63.         setFieldsValue({ dictCode, dictName }) // 修改记录时，需要把对应的记录属性值初始化到表单控件，否则表单就是空表单
    64.       })
    65.     },
    66.     handleSubmit () {
    67.       const { form: { validateFields } } = this  // 解构赋值，this是弹窗组件
    68.       this.confirmLoading = true // 显示加载动画
    69.       // 此处调用validateFields对表单控件进行前端校验，校验规则参见表单控件中的v-decorator属性
    70.       validateFields((errors, values) => { // errors是校验框架返回的结果对象，values是提交的表单对象
    71.         if (!errors) { // 校验通过
    72.           console.log('values', values)
    73.           setTimeout(() => {
    74.             this.visible = false
    75.             this.confirmLoading = false // 关闭加载动画
    76.             this.$emit('ok', values)
    77.           }, 1500)
    78.         } else { // 校验不通过
    79.           this.confirmLoading = false // 关闭加载动画
    80.         }
    81.       })
    82.     },
    83.     handleCancel () {
    84.       this.visible = false
    85.     }
    86.   }
    87. }
    88. </script>