本文详细介绍了在前端开发中遇到的各种问题及其解决方案，包括ElementUI组件如Select添加自定义选项、图标偶发性乱码的修复、Input输入限制的正则表达式、Layout布局的自适应调整、DatePicker的年份范围选择以及Table表格和Form表单的样式与验证设置。此外，还提及了数据分析库pandas的基础知识。
系列文章目录
文章目录
前言
天地
一、Select 选择器
el-select新增自定义选项el-option
在项目中，你可能会遇到下拉选择框需要选择自定义选项的情况
解决方案
<el-option class="addContact" disabled @click.native="onDrawer">新增联系人</el-option>
二、Icon 图标
图标偶发性乱码问题
使用若依管理系统作为开发框架。开发过程中，图标一直正常。直到打包发布到线上，页面偶发性出现图标乱码问题，再次刷新页面后，又可正常显示。
检查文件dist/css/app.xxx.css，发现所有的图标样式content的文本均异常。如：.el-icon-ice-cream-square:before{content:“”}。所以我们打包后的样式文件是有问题的。百度资料大多数人说是sass-dart问题。
解决方案
（1）sass版本升级到1.39.0
npm install sass@1.39.0 -S
（2）vue.config.js 增加css配置，否则会报错
css: {
loaderOptions: {
sass: {
sassOptions: {
outputStyle: 'expanded'
}
}
}
},
三、Input 输入框
1、el-input输入限制
开发过程中，肯定会遇到输入框限制。
解决方案
1.限制input输入框只能输入大小写字母、数字、下划线的正则表达式：
<el-input type="text" onkeyup="this.value=this.value.replace(/[^\w_]/g,'');">
2.限制input输入框只能输入小写字母、数字、下划线的正则表达式：
<el-input type="text" onkeyup="this.value=this.value.replace(/[^a-z0-9_]/g,'');">
3.限制input输入框只能输入数字和点的正则表达式：
<el-input type="text" onkeyup="value=value.replace(/[^\d.]/g,'')">
4.限制input输入框只能输入中文的正则表达式：
<el-input type="text" onkeyup="this.value=this.value.replace(/[^\u4e00-\u9fa5]/g,'')">
5.限制input输入框只能输入数字的正则表达式：
<el-input type="text" onkeyup="this.value=this.value.replace(/\D/g,'')">
6.限制input输入框只能输入英文的正则表达式：
<el-input type="text" onkeyup="this.value=this.value.replace(/[^a-zA-Z]/g,'')">
7.限制input输入框只能输入中文、数字、英文的正则表达式：
<el-input onkeyup="value=value.replace(/[^\w\u4E00-\u9FA5]/g, '')">
8.限制input输入框只能输入数字和字母的正则表达式：
<el-inputt onKeyUp="value=value.replace(/[\W]/g,'')">
9.限制input输入框除了英文的标点符号以外，其他的都可以中文，英文字母，数字，中文标点的正则表达式：
<el-input type="text" onkeyup="this.value=this.value.replace(/^[^!@#$%^&*()-=+]/g,'')">
10.限制input输入框只能输入数字代码(小数点也不能输入)的正则表达式：
<el-input onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')">
11.限制input输入框只能输入数字,能输小数点.的正则表达式：
<el-input onkeyup="if(isNaN(value))execCommand('undo')" onafterpaste="if(isNaN(value))execCommand('undo')">
<el-input name=txt1 onchange="if(/\D/.test(this.value)){alert('只能输入数字');this.value='';}">
或者
<el-input type=text t_value="" o_value="" onkeypress="if(!this.value.match(/^[\+\-]?\d*?\.?\d*?$/))this.value=this.t_value;else this.t_value=this.value;if(this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/))this.o_value=this.value" onkeyup="if(!this.value.match(/^[\+\-]?\d*?\.?\d*?$/))this.value=this.t_value;else this.t_value=this.value;if(this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/))this.o_value=this.value" onblur="if(!this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?|\.\d*?)?$/))this.value=this.o_value;else{if(this.value.match(/^\.\d+$/))this.value=0+this.value;if(this.value.match(/^\.$/))this.value=0;this.o_value=this.value}">
12限制input输入框只能输入字母和汉字的正则表达式：
<el-input onkeyup="value=value.replace(/[\d]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[\d]/g,''))" maxlength=10 name="Numbers">
13.限制input输入框只能输入英文字母和数字,不能输入中文的正则表达式：
<el-input onkeyup="value=value.replace(/[^\w\.\/]/ig,'')">
14限制input输入框只能输入数字和英文的正则表达式：
<el-input onKeyUp="value=value.replace(/[^\d|chun]/g,'')">
15限制input输入框小数点后只能有最多两位(数字,中文都可输入),不能输入字母和运算符号的正则表达式：
<el-input onKeyPress="if((event.keyCode<48 || event.keyCode>57) && event.keyCode!=46 || /\.\d\d$/.test(value))event.returnValue=false">
16.限制input输入框小数点后只能有最多两位(数字,字母,中文都可输入),可以输入运算符号:的正则表达式：
<el-input onkeyup="this.value=this.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3')">
17，不可输入中文
<el-input onkeyup="this.value=this.value.replace(/[\u4E00-\u9FA5]/g,'')">
18，不可输入空格
<el-input onkeyup="onkeyup="value = value.replace(/\s+/g, '')">
19.限制input输入框只能输入正整数的正则表达式：
<el-input type="text" onkeyup="value=value.replace(^[0-9]*[1-9][0-9]*$,'')">
2、el-input防止浏览器自动填充账号密码
<!-- autocomplete="off"不能单独使用，要和autocomplete="new-password"结合起来使用才有效果 -->
<el-input v-model="input" placeholder="Please input" autocomplete="off" />
<!-- 密码框要设置autocomplete="new-password"-->
<el-input
v-model="input"
type="password"
placeholder="Please input password"
show-password
autocomplete="new-password"
/>
3、el-autocomplete输入后匹配输入建议
<!-- 当select事件中需要传多个值时，可以通过箭头函数的方式保留select事件的回调参数，同时增加其他参数传递 -->
<el-autocomplete
class="inline-input"
v-model="scope.row.value"
:fetch-suggestions="querySearch"
placeholder="请输入内容"
:trigger-on-focus="false"
@select="
($event, index) =>
handleSelect($event, scope.$index, scope.row)
"
></el-autocomplete>
四、Layout 布局
1、el-row高度自适应
el-row和el-col 处理动态多列数据时， 出现了高度不适应且排列混乱
解决方案
1、el-row加上样式属性
.el-row {
display: flex;
flex-wrap: wrap;
}
2、内部元素设置高度100%
.el-card {
min-width: 100%;
height: 100%;
}
2、el-col一行放5个
出了个新需求，UI图上一行有五块内容；如果使用flex布局解决会发现小屏幕时会挤压卡片内容，所以要参照响应式布局，但是el-cal本身有限制，一行被分成24份，不能被5平分；最后发现在
el-col标签中的:span="'24-5'"会被编译成el-col-24-5，这样就可以通过媒体查询实现响应式布局。
解决方案
1、el-col加上样式属性 :span="'24-5'"
<el-row :gutter="20">
<el-col :span="'24-5'">
<info-card :url="require('@/assets/images/1.png')" :num="'524685'" :state="'待发货'" />
</el-col>
<el-col :span="'24-5'">
<info-card :url="require('@/assets/images/2.png')" :num="'￥524685'" :state="'待支付'" />
</el-col>
<el-col :span="'24-5'">
<info-card :url="require('@/assets/images/3.png')" :num="'￥524685'" :state="'待售后'" />
</el-col>
<el-col :span="'24-5'">
<info-card :url="require('@/assets/images/4.png')" :num="'524685'" :state="'违规预警'" />
</el-col>
<el-col :span="'24-5'">
<info-card :url="require('@/assets/images/5.png')" :num="'524685'" :state="'服务'" />
</el-col>
</el-row>
2、利用媒体查询结合响应尺寸大小重定义宽度比例
@media screen and (max-width: 768px) {
.el-col-24-5 {
width: 100%;
}
}
@media screen and (min-width: 768px) and (max-width: 992px) {
.el-col-24-5 {
width: 50%;
}
}
@media screen and (min-width: 992px) and (max-width: 1280px) {
.el-col-24-5 {
width: 33.33%;
}
}
@media screen and (min-width: 1280px) and (max-width: 1920px) {
.el-col-24-5 {
width: 20%;
}
}
@media screen and (min-width: 1920px) {
.el-col-24-5 {
width: 20%;
}
}
五、DatePicker 日期选择器
1、el-date-picker年份范围选择
el-date-picker只有日期范围选择和月份范围选择，没有年份范围选择，只能自己封装一个，利用两个年份选择封装年份范围选择功能
解决方案
<template>
<el-date-picker
v-model="yeartsStart"
:picker-options="startDatePicker"
value-format="yyyy"
type="year"
@change="startTime"
placeholder="开始时间"
>
</el-date-picker>
~
<el-date-picker
v-model="yeartsEnd"
:picker-options="endDatePicker"
value-format="yyyy"
type="year"
@change="startTime"
placeholder="结束时间"
>
</el-date-picker>
</template>
<script>
export default {
data() {
return {
startDatePicker: this.beginDate(),
endDatePicker: this.processDate(),
yeartsStart:'',
yeartsEnd:''
}
},
methods: {
// 选择年份范围选择时开始时间不能大于结束时间，结束时间不能小于开始时间
// 提出开始时间必须小于提出结束时间
beginDate() {
let self = this
return {
disabledDate(time) {
if (self.yeartsEnd !== '') {
let fixedTime = new Date(time)
return fixedTime.getFullYear() > self.yeartsEnd
}
}
}
},
// 提出结束时间必须大于提出开始时间
processDate() {
let self = this
return {
disabledDate(time) {
// let fixedTime = new Date(self.oldTime).getTime()
// return time.getTime() < fixedTime
let fixedTime = new Date(time)
return fixedTime.getFullYear() < self.yeartsStart
}
}
},
}
}
</script>
<style lang="scss">
</style>
六、Table 表格
1、el-table表格内容居中
<el-table
:data="tableData"
:header-cell-style="{ 'text-align': 'center' }" //设置表头样式
:cell-style="{ 'text-align': 'center' }" //设置表格样式
border
style="width: 100%"
>
<el-table-column prop="date" label="日期" width="180"></el-table-column>
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
七、Form 表单
1、el-form非固定表单验证
示例：当表单内容非固定，有一个或多个数组内容的表单验证
<el-form
ref="Form"
:model="Form"
:rules="Rules"
label-width="120px"
label-position="left"
>
<div
v-for="(item, index) in Form.persons"
:key="index"
>
<el-form-item
label="姓名："
:prop="'persons.' + index + '.name'"
:rules="Rules.name"
>
<el-input
v-model.trim="item.name"
placeholder="请输入姓名"
></el-input>
</el-form-item>
<el-form-item
label="年龄："
:prop="'persons.' + index + '.age'"
:rules="Rules.age"
>
<el-input
v-model.trim="item.age"
placeholder="请输入年龄"
></el-input>
</el-form-item>
</div>
</el-form>
Form: {
persons: [
{
name: '',
age: '',
},
],
},
Rules: {
name: [
{ required: true, message: '请输入姓名', trigger: 'blur' },
],
age: [
{ required: true, message: '请输入年龄', trigger: 'blur' },
],
},
一、pandas是什么？
示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。
一、pandas是什么？
示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。
一、pandas是什么？
示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。
一、pandas是什么？
示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。
一、pandas是什么？
示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。
一、pandas是什么？
示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。
一、pandas是什么？
示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。
一、pandas是什么？
示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。
一、pandas是什么？
示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。
一、pandas是什么？
示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。
一、pandas是什么？
示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。
总结
提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。
扫一扫
514
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
