通用方法

刷新组件

通过改变组件的key属性来强制刷新，Vue.js会认为这是一个全新的组件实例，从而触发组件的重新渲染

1
2
3
4
5
6
7
8
<el-image
    src="http://120.46.37.218:9527/api/user/getVerifyCode"
    alt="验证码"
    :key="identifyCode"
    @click="identifyCode++"
/>

const identifyCode = ref(1)

组件使用

表单

表单验证

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
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'

const ruleFormRef = ref<FormInstance>()

interface RuleForm {
  name: string
  region: number
}

const ruleForm = reactive<RuleForm>({
  name: 'Hello',
  region: ''
})

// 自定义验证规则
const confirmRules = (_rule: any, _value: any, callback: any) => {
    if (ruleForm.name!=='zs') {
        // 不通过回调
        callback(new Error('name不能等于zs'))
    } else {
        // 通过回调
        callback()
    }
}

const rules = reactive<FormRules<RuleForm>>({
  name: [
    { required: true, message: '必传', trigger: 'blur' },
    { min: 3, max: 5, message: '取值范围', trigger: 'blur' },
    { validator: confirmRules, trigger: 'blur' },
  ],
})

type的类型：

  • string: Must be of type string. This is the default type.

  • number: Must be of type number.

  • boolean: Must be of type boolean.

  • method: Must be of type function.

  • regexp: Must be an instance of RegExp or a string that does not generate an exception when creating a new RegExp.

  • integer: Must be of type number and an integer.

  • float: Must be of type number and a floating point number.

  • array: Must be an array as determined by Array.isArray.

  • object: Must be of type object and not Array.isArray.

  • enum: Value must exist in the enum.

  • date: Value must be valid as determined by Date

  • url: Must be of type url.

  • hex: Must be of type hex.

  • email: Must be of type email.

  • any: Can be any type.

清空表单

  1. el-form的ref 不能命名为formRef，否则清空无效 ！！！
  2. el-form-item需绑定props，且对应el-form绑定的数据
  3. 使用formAddRef实例时确保组件已加载
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<el-form
    ref="formAddRef"
    :model="formList"
    label-width="auto"
    style="max-width: 600px"
    >
    <el-form-item label="种" prop="anlSpecies">
        <el-input v-model="formList.anlSpecies" />
    </el-form-item>
</el-form>

const formAddRef = ref<InstanceType<typeof ElForm>>()

await nextTick(() => {
    formAddRef.value?.resetFields()
})

问题集

  • 在webstrom中element-plus所有组件被警告为未标记的HTML
  1. 手动删除 node_modules
  2. 再次执行 npm i
  • Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.

Sass版本问题

解决：

“element-plus”: “2.8.0”,

“sass”: “1.77.6”,

删除node_modules包，package-lock.json，再重新安装

  • el-image预览时，预览组件被页面其余原始遮盖

添加属性 :preview-teleported=”true” 把元素插入至 body 元素上

  • el-input 设置clearable后 focus时闪烁问题

element plus input 设置了clearable， focus的时候，输入框宽度会变成长，这是由于右侧的关闭按钮是靠v-if进行显示和隐藏的，其会把宽度撑开。一般情况下没有问题，但当长度刚好在换行临界点的时候，就会出闪烁问题。这是由于focus的时候变宽，导致换行，同时换行之后，又重新变短，变短之后，又重新缩回上一行，从而形成闪烁。

修改默认样式

1
2
3
4
5
6
7
8
9
10
11
12
13
:deep(.el-input__wrapper) {
    position: relative;

    .el-input__inner {
        padding-right: 18px;
    }
    .el-input__suffix {
        position: absolute;
        right: 8px;
        top: 50%;
        transform: translateY(-50%);
    }
}
  • element-plus中组件ElMessageBox丢失样式（按需引入情况下）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 样式丢失
import { Action, ElMessageBox } from 'element-plus'
// 干掉ElMessageBox引入，样式回来....
import { Action } from 'element-plus'

ElMessageBox.alert('This is a message', 'Title', {
    confirmButtonText: 'OK',
    callback: (action: Action) => {
        ElMessage({
            type: 'info',
            message: `action: ${action}`,
        })
    },
})