elementUI表格去掉表头element ui el-dialog关闭窗口清空表单验证

林太白

已于 2024-08-29 13:18:11 修改

阅读量6.7k

点赞数 14

分类专栏：前端

于 2022-06-30 13:24:09 首次发布

林太白

本文链接：https://blog.csdn.net/weixin_43615570/article/details/125538645

版权

Element UI 表格表头隐藏属性

关键词由CSDN通过智能技术生成

前端专栏收录该内容

24 篇文章

订阅专栏

❤ vue3 使用ElementPlus

1、使用 ElementPlus Icon 图标

官网地址：
https://element-plus.org/zh-CN/component/icon.html

①安装

yarn add @element-plus/icons-vue

安装成功以后：
在这里插入图片描述

② 注册所有图标

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

main.ts 配置：

// 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 图标

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

④ 动态使用 SVG 图标


普通使用:

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


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

2、Element-ui中的el-image的图片预览功能（preview-src-list）

错误：踩坑

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


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)
}

2、element 表单校验


<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)
    }
  })
}

（1）自定义年龄校验


: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)
}

（2）手机号校验

{ 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)
}

（3）证件号校验


: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)
}

3、身份证号获取年龄


var age = getAge(value);
console.log(age);

const getAge = (idCard) => {
    if(ruleForm.value.idCard!=''){
         var currentDate = new Date();
          var currentYear = currentDate.getFullYear();
          var currentMonth = currentDate.getMonth() + 1;
          var birthYear = parseInt(idCard.substr(6, 4));
          var birthMonth = parseInt(idCard.substr(10, 2));
          var age = currentYear - birthYear;
          // 如果当前月份小于出生月份，则减去一岁
          if (currentMonth < birthMonth) {
            age--;
          }
          return age;
    }
}

邮箱校验


: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)
}

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

一定一定要去掉css上的scope

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;
}

4、清空表单数据


<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',
  }];
}

5、 ❤️elementUI表格去掉表头

❤️ 添加 :show-header="false"

<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>

6、element ui中 el-dialog关闭窗口清空表单验证

❤ element ui中 el-dialog关闭窗口清空表单验证

（1）清除



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

（2）在From标签上加上v-if=“showDialog” ，当关闭弹框时showDialog=false，

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

 <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>

（3）关闭窗口清空表单验证


<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>