# 表单标签宽度(标签文字超长)

An image

onInit() {
      //如果编辑表单标签文字过长显示为省略号请设置 this.boxOptions.labelWidth指定宽度

      //设置查询表单的标签文字宽度
      // this.labelWidth=140;

      //设置编辑表单标签宽度
     this.boxOptions.labelWidth=140;

      //查询表单标签宽度
      this.labelWidth=140;
}
1
2
3
4
5
6
7
8
9
10
11
12

# 表单自定义按钮

An image

onInit() {
  //弹出框添加选择数据与倒计时操作操作

      let countdown = 10;
      this.editFormOptions.forEach((option) => {
        option.forEach((item) => {
          if (item.field == '字段') {
            item.extra = {
              btnValue: '发送短信',
              render: (h, {}) => {
                return (
                  <div>
                    <el-button
                      type="primary"
                      link
                      onClick={() => {
                          this.$message.success('点击了按钮')
                      }}
                    >
                      <i class="el-icon-search">选择</i>
                    </el-button>
                    <el-button
                      type="primary"
                      style="margin-left:0"
                      link
                      onClick={() => {
                        //设置倒计时
                        var timer = setInterval(function () {
                          if (countdown > 0) {
                            item.extra.btnValue=countdown+'(秒)'
                            countdown--
                          } else {
                              //给倒计时按钮设置值
                            item.extra.btnValue='发送短信';
                            countdown=10;
                            clearInterval(timer)
                          }
                        }, 1000)
                      }}
                    >
                      <i class="el-icon-message">{item.extra.btnValue}</i>
                    </el-button>
                  </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
40
41
42
43
44
45
46
47
48
49
50

# 按钮倒计时、表单多个按钮

见上面的按钮配置

# 表单自定义提示

An image

onInit() {
      this.editFormOptions.forEach((option) => {
        option.forEach((item) => {
          if (item.field == '字段') {
            item.extra = {
              render: (h, {}) => {
                return (
                  <div>
                     <el-popover
                      placement="top-start"
                      title="提示"
                      width="200"
                      trigger="hover"
                      content="还没想好"
                    >
                      {{
                        reference: (
                          <i
                            style="color:rgb(6 118 169);font-size:12px;margin-left:5px"
                            onClick={() => {
                               this.$message.success('提示信息')
                            }}
                            class="el-icon-warning-outline"
                          ></i>
                        )
                      }}
                    </el-popover>
                  </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