# 1、编辑表单分组显示一

An image

查看代码

 onInited() {
//设置表单分组,通过splice在指定的行位置添加信息
    this.editFormOptions.splice(0, 0, [
        {
        colSize: 12,
        render: (h) => {
        return (
            <div
            style="display:flex;margin-bottom:-4px;line-height:20px;padding-bottom:2px;border-bottom:1px solid #e4e4e4;">
            <div style="height: 14px; background: #1794f8; width: 4px; border-radius: 10px;margin-top: 2px;"></div>
            <div style="padding-left: 6px; font-weight: bold; font-size: 13px;">
                基本信息
            </div>
            </div>
        );
        }
        }
    ]);

    //设置表单分组,通过splice在第2行位置添加信息
  this.editFormOptions.splice(2, 0, [
        {
        colSize: 12,
        render: (h) => {
        return (
            <div
            style="display:flex;margin-bottom:-4px;line-height:20px;padding-bottom:2px;border-bottom:1px solid #e4e4e4;">
            <div style="height: 14px; background: #1794f8; width: 4px; border-radius: 10px;margin-top: 2px;"></div>
            <div style="padding-left: 6px; font-weight: bold; font-size: 13px;">
                地址信息
            </div>
            </div>
        );
        }
       }
  ]);
}

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





# 2、编辑表单分组显示二

An image

查看代码
onInited() {
    //循环表单配置
    this.editFormOptions.forEach(x => {
      x.forEach(ops => {
          //按字段分组显示,同一个数组的字段会显示在一起
          //字段在【表.vue】中editFormFields属性里面
          if (["ProductName", "ProductCode", "Price", "Remark"].indexOf(ops.field) != -1) {
            //设置分组显示的名称
            ops.group = '基础信息'
          } else if (["Creator", "CreateDate", "Modifier", "ModifyDate"].indexOf(ops.field) != -1) {
            //设置分组显示的名
            ops.group = '系统信息'
          }
      })
    })
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17





# 3、编辑表单图片大小及位置

An image

查看代码
onInit() {
     //自定义图片显示位置
      //代码生成器配置:
      //1、将图片字段编辑行放在第一行,
      //2、第二、三行的编辑字段数量应该比第一行字段少一个,如:第一行设置了5个编辑字段,第二、三行的字段编辑字段只应配置4个
      const option = this.getFormOption('图片字段')
      if (option) {
        //通过css控制图片显示位置
        option.itemStyle = 'position: absolute;right: 20px;'
        //控制上传图片大小
        option.imgOption = {
          icon: 'el-icon-camera-solid',
          iconSize: 60,//图标大小
          height: 160, //图片高度
          width: 160 //图片宽度
        }
        //指定弹出框宽度
        this.boxOptions.width = 650
      }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21





# 4、编辑表单输入框宽度

An image

查看代码
onInit() {
      //指定弹出框宽度,不指定可能设置出来的宽度不准
      this.boxOptions.width = 800;

       //获取字段并设置宽度
      const 字段Option = this.getFormOption('字段')
      if (option) {
        //通过css控制图片显示位置
        字段Option.itemStyle = 'width:100px';//设置标签的具体宽度,这里也可以写其他样式
      }

        //获取字段并设置宽度
      const 字段Option2 = this.getFormOption('字段2')
      if (字段Option2) {
        //通过css控制图片显示位置
        字段Option2.itemStyle = 'width:150px';//设置标签的具体宽度,这里也可以写其他样式
      }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19