表单操作按钮

提交按钮

submit方法为表单提交按钮回调

<template>
  <avue-form :option="option"
             v-model="form"
             @submit="handleSubmit"></avue-form>
</template>
<script>
export default {
  data () {
    return {
      form: {},
      option: {
        column: [{
          label: "用户名",
          prop: "username"
        }]
      }
    }
  },
  methods: {
    handleSubmit (form, done) {
      this.$message.success('3s后关闭');
      setTimeout(() => {
        done()
      }, 3000)
    }
  }
}
</script>

显示代码复制代码复制代码

清空按钮

reset-change方法为表单清空按钮回调

<template>
  <avue-form :option="option"
             v-model="form"
             @reset-change="handleReset"></avue-form>
</template>
<script>
export default {
  data () {
    return {
      form: {},
      option: {
        column: [{
          label: "用户名",
          prop: "username"
        }]
      }
    }
  },
  methods: {
    handleReset () {
      this.$message.success('清空成功回调');
    }
  }
}
</script>

显示代码复制代码复制代码

隐藏按钮

利用submitBtn和emptyBtn属性去隐藏按钮

<template>
  <avue-form :option="option"
             v-model="form"></avue-form>
</template>

<script>
export default {
  data () {
    return {
      form: {},
      option: {
        submitBtn: false,
        emptyBtn: false,
        column: [{
          label: "用户名",
          prop: "username"
        }]
      }
    }
  }
}
</script>

显示代码复制代码复制代码

按钮文案

利用submitText和emptyText属性去隐藏按钮

<template>
  <avue-form :option="option"
             v-model="form"></avue-form>
</template>
<script>
export default {
  data () {
    return {
      form: {},
      option: {
        submitText: '完成',
        emptyText: '取消',
        column: [{
          label: "用户名",
          prop: "username"
        }]
      }
    }
  }
}
</script>

显示代码复制代码复制代码

行内按钮

利用列的span属性和menuSpan属性达到行内表单

<template>
  <avue-form :option="option"> </avue-form>
</template>
<script>
export default {
  data () {
    return {
      option: {
        menuSpan: 6,
        column: [
          {
            label: '姓名',
            prop: 'name',
            span: 6
          },
          {
            label: '年龄',
            prop: 'sex',
            span: 6
          }
        ]
      }
    }
  }
}
</script>

显示代码复制代码复制代码

按钮位置

利用menuPosition属性设置按钮的位置

<template>
  <avue-form :option="option"
             v-model="form"></avue-form>
</template>
<script>
export default {
  data () {
    return {
      form: {},
      option: {
        menuPosition: 'right',
        column: [{
          label: "用户名",
          prop: "username"
        }]
      }
    }
  }
}
</script>

显示代码复制代码复制代码

自定义按钮

利用menu-form卡槽去自定义按钮

<template>
  <avue-form ref="form"
             :option="option"
             v-model="form"
             @submit="handleSubmit">
    <template #menu-form="{size}">
      <el-button type="primary"
                 :size="size"
                 @click="$refs.form.submit()">自定义提交</el-button>
      <el-button :size="size"
                 @click="$refs.form.resetForm()">自定义清空</el-button>
    </template>
  </avue-form>
</template>
<script>
export default {
  data () {
    return {
      form: {},
      option: {
        submitBtn: false,
        emptyBtn: false,
        column: [{
          label: "用户名",
          prop: "username"
        }]
      }
    }
  },
  methods: {
    handleSubmit (form, done) {
      this.$message.success('3s后关闭');
      setTimeout(() => {
        done()
      }, 3000)
    }
  }
}
</script>

显示代码复制代码复制代码

打印按钮

你可以可以调用全局$Print打印方法

配置printBtn打开表单打印功能

<template>
  <avue-form :option="option"
             v-model="form"
             @submit="handleSubmit"></avue-form>
</template>
<script>
export default {
  data () {
    return {
      form: {},
      option: {
        printBtn: true,
        column: [{
          label: "用户名",
          prop: "username"
        }]
      }
    }
  }
}
</script>

显示代码复制代码复制代码

模拟数据按钮

一键生成模拟数据方便测试

<!-- 导入需要的包 （一定要放到index.html中的head标签里） -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Mock.js/1.0.0/mock-min.js"></script>

mock设置true，在列中配置对应的规则即可，当然你可以自己写模拟逻辑，在mock写方法，会返回当前表单的数据,最后return即可，详情参考如下例子

<template>
  <avue-form :option="option"
             v-model="form"></avue-form>
</template>
<script>
var DIC = {
  VAILD: [{
    label: '真',
    value: 'true'
  }, {
    label: '假',
    value: 'false'
  }],
  SEX: [{
    label: '男',
    value: 0
  }, {
    label: '女',
    value: 1
  }]
}
export default {
  data () {
    return {
      form: {
        text: '动态内容1'
      },
      option: {
        mockBtn: true,
        column: [{
          label: "用户名",
          prop: "username",
          mock: {
            type: 'name',
            en: true,
          }
        },
        {
          label: "自定义",
          prop: "text2",
          mock: (form) => {
            return '自定义逻辑' + form.name
          },
          span: 8
        },
        {
          label: "姓名",
          prop: "name",
          mock: {
            type: 'name'
          },
          span: 8
        },
        {
          label: "类型",
          prop: "type",
          type: "select",
          dicData: DIC.VAILD,
          span: 6,
          mock: {
            type: 'dic',
          },
        },
        {
          label: "权限",
          prop: "grade",
          span: 6,
          type: "checkbox",
          dicData: DIC.VAILD,
          mock: {
            type: 'dic',
          },
        },
        {
          label: "开关",
          prop: "switch",
          span: 6,
          type: "switch",
          dicData: DIC.SEX,
          mock: {
            type: 'dic'
          },
          hide: true,
          row: true,
        },
        {
          label: "性别",
          prop: "sex",
          span: 6,
          type: "radio",
          dicData: DIC.SEX,
          mock: {
            type: 'dic'
          }
        },
        {
          label: "数字",
          prop: "number",
          type: 'number',
          span: 6,
          precision: 2,
          mock: {
            type: 'number',
            max: 1,
            min: 2,
            precision: 2
          },
          min: 0,
          max: 3,
          row: true,
        },
        {
          label: "网站",
          span: 12,
          prop: "url",
          prepend: 'http://',
          mock: {
            type: 'url',
            header: false,
          },
          append: 'com',
          row: true,
        },
        {
          label: "日期",
          prop: "date",
          type: "date",
          span: 8,
          format: 'YYYY-MM-DD',
          valueFormat: 'YYYY-MM-DD',
          mock: {
            type: 'datetime',
            format: 'YYYY-MM-DD'
          },
        },
        {
          label: "日期时间",
          prop: "datetime",
          type: "datetime",
          span: 8,
          format: 'YYYY-MM-DD HH:mm:ss',
          valueFormat: 'YYYY-MM-DD HH:mm:ss',
          mock: {
            type: 'datetime',
            format: 'YYYY-MM-DD HH:mm:ss',
            now: true,
          },
        },
        {
          label: "时间",
          prop: "time",
          type: "time",
          span: 8,
          format: 'HH:mm:ss',
          valueFormat: 'HH:mm:ss',
          mock: {
            type: 'datetime',
            format: 'HH:mm:ss'
          },
        },
        {
          label: "地址",
          span: 24,
          prop: "address",
          mock: {
            type: 'county'
          },
        }, {
          label: "建议",
          span: 24,
          prop: "adit",
          mock: {
            type: 'word',
            min: 10,
            max: 30
          },
        }]
      }
    }
  }
}
</script>

显示代码复制代码复制代码