elementUI2.X 代码片

2021/3/2 vueelementUI学习提升

# El-tooltip 文字提示

# 问号图标提示

通过插槽的方式实现

代码:

        <el-tab-pane name="ordinary">
          <span slot="label"><i class="el-icon-bicycle"></i>普通
            <el-tooltip placement="top">
              <div slot="content">
                <span>注意</span><br>
                <div >
                  1、单个工单最多支持选择50个集群<br>
                  2、如果存在未完成的上线会导致扩容失败
                </div>
              </div>
              <i class="el-icon-question" />
            </el-tooltip>
          </span>
          </el-tab-pane>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

效果图:

image-20220316175815147

# form表单

# 表单验证

validator部分可自定义验证规则。可把validator段直接定义一个变量,引用变量代码更清晰。

        percent: [
          { type: 'number', required: true, message: '请输入百分比,扩容需要大于100,缩容需要小于100', trigger: 'blur' },
          {
            validator (rule, value, callback) {
              if (value != 100) {
                callback();
              } else {
                callback(new Error("请输入不等于100的数字"));
              }
            },
          },
          { type: 'number', min: 50, max: 200, message: '百分比范围:50-200', trigger: 'blur' },
        ],
1
2
3
4
5
6
7
8
9
10
11
12
13

# 参考

Last Updated: 2023/4/14
只爱西经
林一