Avue

表单布局

... 2022-8-27 About 6 min

# 表单布局

Tips

  • size
  • span
  • gutter
  • offset
  • labelWidth
  • labelPosition

以上属性配置到option下作用于全部列，优先列中配置属性生效，更多用法可以参考Element-Layout 布局 (opens new window)和Element-Form 表单 (opens new window)

# 栏大小

设置size属性调节栏的大小，默认为small


<el-row style="margin-bottom:20px">
   <el-radio-group v-model="sizeValue">
    <el-radio label="small">默认</el-radio>
    <el-radio label="medium">medium</el-radio>
    <el-radio label="small">small</el-radio>
    <el-radio label="mini">mini</el-radio>
  </el-radio-group>
</el-row>
<avue-form :option="option"></avue-form>
<script>
export default {
    data() {
      return {
        sizeValue:'small'
      }
    },
    computed: {
       option(){
         return{
          size:this.sizeValue,
          column: [{
            label: '姓名',
            prop: 'name'
          },
          {
            label: '性别',
            prop: 'sex'
          },
          {
            label: '年龄',
            prop: 'number',
            type: 'number'
          }]
         }
       }
    }
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
Expand Copy

# 栏距列数

设置span属性调节栏列数,默认为12

<avue-form :option="option"></avue-form>
<script>
export default {
  computed:{
    option(){
      return {
        column: [
          {
            label: '姓名',
            prop: 'name',
            span:24
          },
          {
            label: '性别',
            prop: 'sex',
            span:8
          },
          {
            label: '年龄',
            prop: 'number',
            type: 'number',
            span:8
          }
        ]
       }
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Expand Copy

# 栏距间隔

设置gutter属性调节栏列数,默认为0

<avue-form :option="option"></avue-form>
<script>
export default {
  computed:{
    option(){
      return {
        gutter:100,
        column: [
          {
            label: '姓名',
            prop: 'name',
          },
          {
            label: '性别',
            prop: 'sex',
          }
        ]
       }
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
Expand Copy

# 分栏偏移

设置offset属性调节栏列数,默认为12

<avue-form :option="option"></avue-form>
<script>
export default {
  computed:{
    option(){
      return {
        column: [
          {
            label: '姓名',
            prop: 'name',
            span:8
          },
          {
            label: '性别',
            prop: 'sex',
            offset:8,
            span:8
          },
          {
            label: '年龄',
            prop: 'number',
            type: 'number',
            offset:8,
            span:8
          }
        ]
       }
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
Expand Copy

# 栏成行

设置row属性栅格后面的内容是否从新的一行开始展示

<avue-form :option="option"></avue-form>
<script>
export default {
  computed:{
    option(){
      return {
        column: [
          {
            label: '姓名',
            prop: 'name',
            span:8
          },
          {
            label: '性别',
            prop: 'sex',
            span:8,
            row:true
          },
          {
            label: '年龄',
            prop: 'number',
            type: 'number',
            span:8
          }
        ]
       }
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Expand Copy

# 栏排序

设order属性可排序与column中顺序不同

<avue-form :option="option"></avue-form>

<script>
export default {
    data() {
      return {
        option:{
          column:[
             {
              label:'姓名',
              prop:'name'
            }, {
              label:'性别',
              prop:'sex',
              order:1
            }
          ]
        },
      };
    },
    methods: {
    }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
Expand Copy

# 栏隐藏

设置display属性隐藏栏目

<avue-form :option="option"></avue-form>
<script>
export default {
  computed:{
    option(){
      return {
        column: [
          {
            label: '姓名',
            prop: 'name',
            display:false
          }
        ]
       }
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
Expand Copy

# 标题宽度

labelWidth为标题的宽度，默认为110

<avue-form :option="option"></avue-form>

<script>
export default {
    data() {
      return {
        option:{
          column:[
             {
              labelWidth:200,
              label:'我是一个超级长的标题',
              prop:'name'

            }, {
              label:'性别',
              prop:'sex'
            }
          ]
        },
      }
    }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
Expand Copy

# 标题位置

labelPosition为标题的位置，默认为left

<avue-form :option="option"></avue-form>

<script>
export default {
    data() {
      return {
        option:{
          labelPosition:'top',
          column:[
             {
              label:'姓名',
              prop:'name'
            }, {
              label:'性别',
              prop:'sex'
            }
          ]
        },
      }
    }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
Expand Copy

# 标题辅助语

labelTip为标题提示的内容,labelTipPlacement为标题提示语的方向，默认为bottom

<avue-form :option="option" ></avue-form>
<script>
export default {
  data(){
    return {
       option:{
          column: [{
            label: '内容1',
            prop: 'text1',
            labelTip:'我是一个标题提示语'
            
          },{
            label: '内容2',
            prop: 'text2',
            labelTip:'我是一个标题提示语',
            labelTipPlacement:'right'
          }]
       }
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
Expand Copy

# 内容辅助语

tip为提示的内容,tipPlacement为提示语的方向，默认为bottom

<avue-form :option="option" ></avue-form>
<script>
export default {
  data(){
    return {
       option:{
          column: [{
            label: '内容1',
            prop: 'text1',
            tip:'我是一个默认提示语',
          },{
            label: '内容2',
            prop: 'text2',
            tip:'我是一个左边提示语',
            tipPlacement:'left',
          }]
       }
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
Expand Copy

# 详情编辑



detail控制是否为详情页

  <el-button @click="handle" style="margin-left: 20px">{{title}}</el-button>
  <br /><br />
  <avue-form  :option="option" v-model="obj" @submit="submit"></avue-form>
<script>
export default {
    computed: {
      title() {
        return this.option.detail ? '编 辑' : '保 存'
      }
    },
    data() {
      return {
        type: 0,
        obj: {},
        option: {
          detail:true,
          labelWidth:110,
          group: [
            {
              label: '用户信息',
              prop: 'jbxx',
              icon: 'el-icon-edit-outline',
              column: [
                {
                  label: '姓名',
                  prop: 'name',
                  rules: [
                    {
                      required: true,
                      message: '请输入姓名',
                      trigger: 'blur'
                    }
                  ]
                },
                {
                  label: '性别',
                  prop: 'sex',
                }
              ]
            }, {
              label: '退款申请',
              prop: 'tksq',
              icon: 'el-icon-view',
              column: [
                {
                  label: '省份',
                  span:24,
                  prop: 'province',
                  type: 'select',
                  props: {
                    label: 'name',
                    value: 'code'
                  },
                  dicUrl: `https://cli.avuejs.com/api/area/getProvince`,
                  rules: [
                    {
                      required: true,
                      message: '请选择省份',
                      trigger: 'blur'
                    }
                  ]
                },
                {
                  label: '多选',
                  prop: 'checkbox',
                  type: 'checkbox',
                  all:true,
                  props: {
                    label: 'name',
                    value: 'code'
                  },
                  span: 24,
                  dicUrl: 'https://cli.avuejs.com/api/area/getProvince'
                }
              ]
            }
            , {
              label: '用户信息',
              prop: 'yhxx',
              icon: 'el-icon-edit-outline',
              column: [
                {
                  label: '测试长度',
                  prop: 'len',
                  value:3,
                  maxlength: 5,
                }, {
                  label: '测试自定义',
                  prop: 'lens',
                  value:3,
                  formslot: true
                }
              ]
            }
          ]
        }
      }
    },
    mounted() {
      setTimeout(() => {
        this.obj = {
          name: 'small',
          province: '110000',
          checkbox: ['110000']
        }
      }, 100)
    },
    methods: {
      handle() {
       this.option.detail=!this.option.detail
      },
      submit() {
        this.$message.success(JSON.stringify(this.obj))
      }
    }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
Expand Copy 


<el-button @click="detail=!detail">{{title}}</el-button>
<br /><br />
<avue-form :option="option" v-model="obj" @submit="submit">
  <template slot="datetime" slot-scope="scope" >
    <span v-if="detail">
      这是我要选择的日期{{datetime[0]}}年{{datetime[1]}}月{{datetime[2]}}日
    </span>
    <el-input v-else v-model="obj.datetime"></el-input>
  </template>
</avue-form>
<script>
export default {
  computed: {
      datetime() {
        return this.obj.datetime.split('-')
      },
      option() {
        return {
          detail: this.detail,
          column: [{
            label: '选择日期',
            span: 12,
            prop: 'datetime',
            type: 'datetime',
            format: "yyyy-MM-dd",
            valueFormat: "yyyy-MM-dd"
          },{
            label: '',
            labelWidth: 10,
            prop: 'divider',
            display: !this.detail,
            component: 'elDivider',//ele分割线
            span: 24,
            params: {
              html: '这是一大堆的文字介绍，很长 很长 很长成这是一大堆的文字介绍，很长 很长 很长成这是一大堆的文字介绍，很长 很长 很长成',
              contentPosition: "left",
            }
          }]
        }
      },
      title() {
        return this.detail ? '编辑' : '保存'
      },
    },
    data() {
      return {
        detail: true,
        obj: {
          datetime: '2020-05-01'
        }
      }
    },
    methods: {
      submit() {
        this.$message.success(JSON.stringify(this.obj))
      }
    }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
Expand Copy

# 分组展示

将表单已分组的形式展示

用法普通的form组件分组用法一样，在group中配置结构体即可

<avue-form :option="option" v-model="form" @submit="handleSubmit" @tab-click="handleTabClick">
  <template slot="group1Header" slot-scope="{column}">
    <svg aria-hidden="true" style="width:30px;height:30px;">
      <use xlink:href="#icon-duanxinguanli"></use>
    </svg>
     {{column.label}}
  </template>
   <template slot="text3" slot-scope="{}">
    <el-input placeholder="自定义" v-model="form.text3"></el-input>
  </template>
</avue-form>
<script>
export default {
  data(){
    return {
       form:{
          text:'文本',
          text1:'文本1',
          text2:'文本2',
          text3:'文本3',
       },
       option:{
          column:[{
                label: '内容',
                prop: 'text',
          }],
          group:[
            {
              icon:'el-icon-info',
              label: '分组1',
              collapse:false,
              prop: 'group1',
              column: [{
                label: '内容1',
                prop: 'text1',
              }]
            },{
              icon:'el-icon-info',
              label: '分组2',
              arrow:false,
              prop: 'group2',
              column: [{
                label: '选项卡2',
                prop: 'text2',
              }, {
                label: '选项卡3',
                prop: 'text3',
              }]
            }
          ]
       }
    }
  },
  methods:{
    handleSubmit(form){
       this.$message.success(JSON.stringify(this.form))
    },
    handleTabClick(event){
      this.$message.success(event);
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
Expand Copy

# 选项卡展示

将表单已选项卡的形式展示



配置tabs为true即可开启选项卡

<el-button @click="tabs=!tabs">转化</el-button><br /><br />
<avue-form @tab-click="handleTabClick" :option="option" v-model="form" @submit="handleSubmit">
  <template slot="group1Header">
    <h4>自定义表头</h4>
  </template>
</avue-form>
<script>
export default {
  data(){
    return {
       tabs:true,
       form:{
          text:'文本',
          text1:'文本1',
          text2:'文本2',
          text3:'文本3',
       },
    }
  },
  computed:{
    option(){
      return {
          tabs:this.tabs,
          tabsActive:2,
          column: [{
            label: '内容1',
            prop: 'text1',
          }],
          group:[
            {
              icon:'el-icon-info',
              label: '分组1',
              prop: 'group1',
              column: [{
                label: '内容1',
                prop: 'text1',
              }]
            },{
              icon:'el-icon-info',
              label: '分组2',
              prop: 'group2',
              column: [{
                label: '选项卡2',
                prop: 'text2',
              }, {
                label: '选项卡3',
                prop: 'text3',
              }]
            }
          ]
       }
    }
  },
  methods:{
    handleSubmit(form){
       this.$message.success(JSON.stringify(this.form))
        setTimeout(() => {
         done()
       },2000)
    },
    handleTabClick(tabs,event){
      this.$message.success('序号为:'+tabs.index)
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
Expand Copy
Last update: August 14, 2024 15:38
Contributors: smallwei

表单验证

您正在浏览基于 Vue 2.x 的 Avue 文档; 点击这里 查看 Vue 3.x 的升级版本