Vue3-ElementPlus使用

1、安装引入

👉官网地址

javascript 复制代码

https://element-plus.org/zh-CN/

👉 安装ElementPlus

bash 复制代码

yarn add element-plus --save

👉 main.ts中引入ElementPlus

bash 复制代码

// 引入组件
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App)
app.use(createPinia()).use(ElementPlus)
app.mount('#app')

☞ 使用效果：

bash 复制代码

<el-button type="primary">Primary</el-button>

👉`main.ts`配置

你的main.ts完整配置应该如下

javascript 复制代码

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
// 挂载router
import router from "./router/index" // 引入router
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App)
app.use(createPinia()).use(ElementPlus).use(router).mount('#app') //挂载

2、使用中文语言包

plain 复制代码

import zhCn from 'element-plus/es/locale/lang/zh-cn' // 引入中文语言包

app.use(ElementPlus, { locale: zhCn }) // 全局设置语言为中文

3、表单使用

👉 表单重置

表单重置利用formRef获取表单实例，调用resetFields方法即可

plain 复制代码

<template>
  <el-form ref="formRef" :model="numberValidateForm">
    <el-form-item label="age" prop="age" >
      <el-input v-model.number="numberValidateForm.age" type="text" autocomplete="off" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm(formRef)">Submit</el-button>
      <el-button @click="resetForm(formRef)">Reset</el-button>
    </el-form-item>
  </el-form>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue'

const formRef = ref<FormInstance>()
const numberValidateForm = reactive({
  age: '',
})

const resetForm = (formEl) => {
  if (!formEl) return
  formEl.resetFields()
}
</script>

👉清空表单数据

dart 复制代码

<el-form
ref="ruleFormRef"

resetForm(ruleFormRef);

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields();
  //  ruleForm使用ref
  ruleForm.value.teacherCertificateRelevanceList=[{
        certificateName: '', //发证单位
        issueUnit: '', //有效期限
        expireDate: '', //详细描述
        descContent: '', //状态
        enable: 0, //
        imgUrl: '', //证书缩略图
        key:'1',
  }];
}

👉el-dialog关闭窗口清空表单验证

清除

javascript 复制代码

this.$refs[formName].resetFields(); // 重置表单移除校验
this.$refs[formName].clearValidate(); // 仅清除验证

在From标签上加上v-if="showDialog" ，当关闭弹框时showDialog=false

plain 复制代码

再次打开弹框是showDialog置为true，这样每次打开弹框它都会生成一个新的表单

javascript 复制代码

<Form v-if="showDialog" ref="formData" 
   :model="formData" 
     :rules="ruleValidate" label-position="top">
      <FormItem label="姓名：" prop="name">
           <Input type="text" v-model="formData.name"/>
       </FormItem>
</Form>

关闭窗口清空表单验证

javascript 复制代码

<el-form ref="form" :model="form" label-width="80px" :before-close="dialogClose">
        <form label="姓名：" prop="name">
             <Input type="text" v-model="formData.name"/>
         </form>
         
</el-form>
<script>
dialogClose(){
    this.$refs.form.resetFields();
},
</script>

4、表单校验

bash 复制代码

<el-form
    ref="ruleFormRef"
    :model="ruleForm"
    :rules="rules"
    label-width="120px"
    class="demo-ruleForm"
    :size="formSize"
    status-icon
 >
 <el-form-item>
      <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
</el-form-item>
</el-form>
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!', fields)
    }
  })
}

自定义年龄校验

dart 复制代码

:rules="[{required: true, message: '请输入年龄',trigger: 'blur', },
        { validator: validateAge, trigger: 'blur' }]"
// 年龄校验
const validateAge = (rule: any, value: any, callback: any) => {
  if (!value) {
    return callback(new Error('请输入年龄！'))
  }
  setTimeout(() => {
    if (!Number.isInteger(value)) {
      callback(new Error('请输入正确的年龄！'))
    } else {
      callback()
    }
  }, 500)
}

手机号校验

dart 复制代码

{ validator: validatePhone, trigger: 'blur' }


// 手机号校验
const validatePhone = (rule: any, value: any, callback: any) => {
  if (!value) {
    return callback(new Error('手机号不能为空'))
  }
  setTimeout(() => {
    if (!/^1[34578]\d{9}$/.test(value)) {
      callback(new Error('请输入正确的手机号'))
    } else {
        callback()
    }
  }, 500)
}

证件号校验

dart 复制代码

:rules="[{required: true, message: '请输入证件号',trigger: 'blur',},
     { validator: validateIdCard, trigger: 'blur' }
]"

// 证件校验
const validateIdCard = (rule: any, value: any, callback: any) => {
  if (!value) {
    return callback(new Error('请输入证件号！'))
  }
  setTimeout(() => {
    if (!/^[1-9]\d{5}(19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[\d|X|x]$/.test(value)) {
      callback(new Error('请输入正确的证件号'))
    } else {
      callback()
    }
  }, 500)
}

邮箱校验

dart 复制代码

:rules="[{required: true, message: '请输入证件号',trigger: 'blur',},
     { validator: validateEmail, trigger: 'blur' }
  ]"

// 邮箱校验
const validateEmail  = (rule: any, value: any, callback: any) => {
  var reg = new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$"); //正则表达式
  if (!value) {
    return callback(new Error('请输入邮箱！'))
  }
  setTimeout(() => {
    if ( !reg.test(value)) {
      callback(new Error('请输入正确的邮箱'))
    } else {
      callback()
    }
  }, 500)
}

5、使用 ElementPlus Icon 图标

官网地址：

plain 复制代码

https://element-plus.org/zh-CN/component/icon.html

安装

plain 复制代码

yarn add @element-plus/icons-vue

安装成功以后：

plain 复制代码

"element-plus": "^2.10.3",

注册所有图标

从 element-plus/icons-vue 中导入所有图标并进行全局注册

main.ts 配置：

javascript 复制代码

// main.ts

// 如果您正在使用CDN引入，请删除下面一行。
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

直接使用 SVG 图标

javascript 复制代码

 <div>
    <el-icon :size="size" :color="color">
      <Edit />
    </el-icon>
    <!-- 或者独立使用它，不从父级获取属性 -->
    <Edit />
  </div>

动态使用 SVG 图标

javascript 复制代码

普通使用:

<el-icon><Menu/> </el-icon>

动态使用:
<el-icon>
     <component class="icons" :is="val.iconclass"></component>
</el-icon>

6、el-image的图片预览功能（preview-src-list）

错误：踩坑

url和srcList[0]不同导致预览为空
官网示例 url和srcList[0]不同也可以正常显示预览第一张图片，但是项目中实际测试如果url和srcList[0]不同则导致预览的为空，向右切换时才正常显示第一张图片
使用按钮展示图片预览

javascript 复制代码

// 1
<el-table-column label="员工照片" align="center">
   <template slot-scope="scope">
     <el-image
       style="width: 100px; height: 100px"
       :src="scope.row.staffIcon" 
       :preview-src-list="srcList"
       @click="vbs(scope.row.staffIcon)"
     >
     </el-image>
   </template>
</el-table-column>


2
<el-table-column label="员工照片" align="center">
   <template slot-scope="scope">
     <el-image
       style="width: 100px; height: 100px"
       :src="scope.row.staffIcon" 
       :preview-src-list="[scope.row.staffIcon]"
       @click="vbs(scope.row.staffIcon)"
     >
     </el-image>
   </template>
</el-table-column>
vbs(val) {
      this.srcList = []
      this.srcList.push(val)
}

7、表格使用

🍎表格去掉表头

添加 :show-header="false"

plain 复制代码

<el-table :data="tableData" style="width: 100%" :show-header="false">
      <el-table-column prop="date" label="日期"></el-table-column>
      <el-table-column  prop="name" label="姓名"></el-table-column>
      <el-table-column label="操作">
          <template slot-scope="scope">
              <el-button type="text" size="small">移除</el-button>
          </template>
    </el-table-column>
  </el-table>
</el-table>

8、加载

🍎加载效果`<font style="color:rgb(48, 49, 51);background-color:rgb(245, 247, 250);">v-loading</font>`

javascript 复制代码

 v-loading="loading"
    :element-loading-svg="svg"
    class="custom-loading-svg"
    element-loading-svg-view-box="-10, -10, 50, 50"

表单使用

javascript 复制代码

<el-table
    v-loading="loading"
    :element-loading-svg="svg"
    class="custom-loading-svg"
    element-loading-svg-view-box="-10, -10, 50, 50"
    :data="tableData"
    style="width: 100%"
  >
    <el-table-column prop="date" label="Date" width="180" />
  </el-table>


<script lang="ts" setup>
import { ref } from 'vue'

const loading = ref(true);
const svg = `
        <path class="path" d="
          M 30 15
          L 28 17
          M 25.61 25.61
          A 15 15, 0, 0, 1, 15 30
          A 15 15, 0, 1, 1, 27.99 7.5
          L 15 15
        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
`;

</script>

问题以及处理

🍎解决input自动填充账号密码时的背景色

一定一定要去掉css上的scope

dart 复制代码

input:-webkit-autofill {
box-shadow:0 0 0 1000px white inset !important;
}
input:-internal-autofill-previewed,
input:-internal-autofill-selected {
transition: background-color 500s ease-in-out 0s !important;
background-color:#fff !important;
}


.el-input__inner:-webkit-autofill,
.el-input__inner:-webkit-autofill:hover,
.el-input__inner:-webkit-autofill:focus {
  background-color: #fff !important;
}

Vue3-ElementPlus使用