element-plus 小技巧

six_
704 阅读2分钟

el-form

 <el-form
   :model="form"
   width="500px"
   ref="addNewFormRef"
   :rules="addNewFormRules"
 >
 </el-form>
 
 //移除校验结果并重置字段值
 addNewFormRef.value?.resetFields()
 //移除校验结果
 addNewFormRef.value?.clearValidate()
 //提交表单时判断校验是否通过
 addNewFormRef.value?.validate((valid)=>{
 
 })

el-form + el-dialog

<!-- 新增、编辑弹窗 -->
<el-dialog
  :title="`${addAndEditDialog.mode==='add' ? '新增' : '编辑'}主案别`"
  :visible.sync="addAndEditDialog.visible"
  width="600px"
  :before-close="handleClose"
>
  <el-form
    :model="form"
    width="500px"
    ref="addNewFormRef"
    :rules="addNewFormRules"
  >
    <el-form-item
      label="代码"
      :label-width="formLabelWidth"
      prop="wbbh"
      :error="wbbhError"
    >
      <el-input
        v-model="form.wbbh"
        autocomplete="off"
        width="300px"
        placeholder="请填写代码"
        maxlength="32"
      ></el-input>
    </el-form-item>
    <el-form-item
      label="名称"
      :label-width="formLabelWidth"
      prop="mc"
      width="100px"
      :error="mcError"
    >
      <el-input
        v-model="form.mc"
        autocomplete="off"
        placeholder="请填写名称"
        maxlength="200"
        type="textarea"
        :rows="3"
      ></el-input>
    </el-form-item>
  </el-form>
  <div
    slot="footer"
    class="dialog-footer"
  >
    <el-button
      @click="clickAddNoOk"
    >取 消</el-button>
    <el-button
      type="primary"
      @click="clickAddOk"
      :loading="addAndEditDialog.submitLoading"
    >确 定</el-button>
  </div>
</el-dialog>



const addAndEditDialog = ref<{
  visible: boolean
  mode: 'add' | 'edit'
  submitLoading: boolean
}>({
  visible: false,
  mode: 'add',
  submitLoading: false
})

const addNewFormRules = {
  wbbh:[
    { 
      required: true,
      message: '编码不可为空',
      trigger: 'blur'
    },
    {
      required: true,
      trigger: ['blur','change'],
      validator: (rule: any, value: any, cb: Function) => {
        if(!(updataOldData.value.oldWbbh === value)) {
          getIsCodeRepeatApi({
            wbbh:value
          })
            .then((res) =>{
              if(res.data) {
                cb(new Error('编码重复，请修改！'))
              } else {
                cb()
              }
            })
        }else{
          cb()
        }
      }
    }
  ],
  mc:[
    { 
      required: true,
      message: '名称不可为空！',
      trigger: 'blur'
    },
    {
      required: true,
      trigger: ['blur','change'],
      validator: (rule: any, value: any, cb: Function) => {
        if(!(updataOldData.value.oldMc === value)) {
          getIsMcRepeatApi({
            mc:value
          })
            .then((res) =>{
              if(res.axiosRes.data.data) {
                cb(new Error('名称重复，请修改'))
              } else {
                cb()
              }
            })
        }else{
          cb()
        }
      }
    }
  ],
}

常见校验规则
{ required: true, message: '请填写咨询价格', trigger: 'blur' },
{
  pattern: /^(([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$/,
  message: "只允许输入两位小数以内的数字",
  trigger: "change"
}

{ 
  validator: (_: any, value: any, cb: Function) => {
    if(value > 1000000) {
      cb('不能大于1000000')
    }else if(value < 0) {
      cb('不能小于0')
    } else {
      cb()
    }
  }, 
  trigger: 'blur' 
}

{ 
    pattern: /(^\d{15}$)|(^\d{17}([0-9]|X|x)$)/, 
    message: '请填写正确格式的身份证号', 
    trigger: 'blur' 
},

{ 
    pattern: /^1[0-9]{10}$/, 
    message: '请填写正确格式的手机号', 
    trigger: 'blur' 
}
{
  required: true,
  pattern: /^1[3456789]\d{9}$/,
  message: "手机号格式不正确",
  trigger: "blur",
}
{
  required: false,
  trigger: ['blur'],
  validator: (rule: any, value: string, cb: Function) => {
    if(!value) {
      cb()
    } else {
      const reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
      //  /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
      if(reg.test(value)) {
        cb()
      } else {
        cb(new Error('请输入正确格式的邮箱'))
      }
    }
  }
}
{
  pattern: /^(([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$/,
  message: "只允许输入两位小数以内的数字",
  trigger: "change"
}

ElMessageBox

import {
  ElMessage,
  ElMessageBox,
} from 'element-plus'

let p: Promise<any>
  p = ElMessageBox( {
    title: '提示',
    type: 'warning',
    message: '确定要删除该项吗？',
    showCancelButton: true,
  })

  p.then(() => {
      //点击确定之后执行的逻辑
    delMainCaseCategoryApi(scope.id)
      .then(() => {
        ElMessage.success('删除成功')
        refreshCurrent()
      }).catch(err => {
        ElMessage.error('删除失败:' + err.message)
      })
  })

import { getCurrentInstance } from "vue"
import {
  ElMessage,
  MessageBox,
} from 'element-plus'

const vm = getCurrentInstance()
const h = vm?.proxy.$createElement

let p: Promise<any>
     p = MessageBox( {
       title: '提示',
       type: 'warning',
       message: h?.('div', { style: {position: 'relative' }}, [
               h?.('div', { style: {padding:'27px 0' }}, '确定要删除该项吗？'),
               h?.('div', { style: { fontSize: '12px',position: 'absolute',left: '0',top: '48px' } }, [
                 h?.('div', undefined, `此目录包含6个小类,确认删除将删除`),
                 h?.('div',undefined,[
                   h?.('span', undefined, '其下'),
                   h?.('span',{ style: {color: 'red' }}, '全部小类'),
                   h?.('span', undefined, ',无法恢复'),
                 ]),
               ])
              ]),
       showCancelButton: true,
     })

     p.then(() => {
       delCaseCategoryApi(scope.id)
         .then(() => {
           ElMessage.success('删除成功')
           getCaseCategoryList()
             .then(() =>{
               filterCondition.value.abxlId=''
               reshTable()
             })
         }).catch(err => {
           ElMessage.error('删除失败:' + err.message)
         })
     })

// 三秒后自动关闭弹窗

import {
  ElMessage,
  ElMessageBox,
} from 'element-plus'

//弹窗第一种写法
MessageBox.confirm('11111111', {  //确认对话框
  title: '提示',
  type: 'success',
  showCancelButton: false,
})

//弹窗第二种写法
MessageBox({
  title: '提示',
  type: 'success',
  message:'hhh',
  showCancelButton: false,   //是否显示取消按钮
  showConfirmButton: false,  //是否显示确认按钮
  showClose: false,          //是否显示取消
})

setTimeout(()=>{
  MessageBox.close()
},3000)

//弹窗类型
success:    对号
error:      叉号

el-menu

el-menu @open 触发条件 是必须要有子菜单才可以，也就是打开上级菜单才会触发，不是点击当前菜单触发，记！

el-input Number类型去掉上下箭头

<el-col
:span="18"
class="teacher-page-from">
    <el-input
    v-model="filterFields.startTotalPay"
    placeholder=""
    type="number"></el-input>
    <span>到</span>
    <el-input
    v-model="filterFields.endTotalPay"
    placeholder=""
    type="number"></el-input>
</el-col>



.teacher-page-from{
    ::v-deep input::-webkit-outer-spin-button,
    ::v-deep input::-webkit-inner-spin-button {
       -webkit-appearance: none !important;
     }
    ::v-deep input[type=‘number’] {
       -moz-appearance: textfield !important;
     }
}

el-input Number类型 maxlength 属性失效

<el-input
  oninput="if(value.length>50)value=value.slice(0,50)"
  type="number"
  v-model="filterParam.number"
  placeholder="请输入内容"
  @keyup.native.enter="handleSearch"
  class="search-input"
></el-input>

el-input 只能输入数字,不能输入'+','-','.'

<el-input
  oninput="if(value.length>50)value=value.slice(0,50)"
  v-model="filterParam.number"
  placeholder="请输入内容"
  @input="handleInput"
  @keyup.native.enter="handleSearch"
  class="search-input"
></el-input>


// 只能输入数字,整数
function  handleInput(e: any) {
  let value = e.replace(/[^\d]/g, "") 
  filterParam.value.number = value
}

//咨询机构名称(只能输入中文、数字以及“-”)
function nameLimit(e: any) {
  let value = e.replace(/[^\u4e00-\u9fa5\\^0-9a-zA-Z\\-]/g,"") 
  __formData.value.name = value
}
//咨询机构英文名称(只能输入字母、数字以及“-”)
function enNameLimit(e: any) {
  let value = e.replace(/[^0-9a-zA-Z\\-]/g,"") 
  __formData.value.enName = value
}
avatar
文章
阅读
粉丝