栏距离

可以设置每个栏之间的距离,让表单显的紧凑

普通用法

栏间距 - 图1

设置gutter属性调节栏之间的距离

  1. <avue-form :option="option" v-model="form" @submit="handleSubmit"></avue-form>
  2. <script>
  3. export default {
  4. data(){
  5. return {
  6. form:{},
  7. option: {
  8. card: false,
  9. labelWidth: 110,
  10. gutter:100,
  11. column: [
  12. {
  13. label: '姓名',
  14. prop: 'name',
  15. valueDefault: 'smallwei'
  16. },
  17. {
  18. label: '默认值',
  19. prop: 'default',
  20. valueDefault: '22'
  21. },
  22. {
  23. label: '数字',
  24. prop: 'number',
  25. type: 'number',
  26. rules: [
  27. {
  28. required: true,
  29. message: '请输入数字',
  30. trigger: 'blur'
  31. }
  32. ]
  33. }
  34. ]
  35. }
  36. }
  37. },
  38. methods:{
  39. handleSubmit(form){
  40. this.$message.success(JSON.stringify(this.form))
  41. }
  42. }
  43. }
  44. </script>