在我们使用element进行开发的时候，有时会出现一些奇怪的问题，这些问题有可能是框架本身的缺陷，也有可能是我们使用不当，遂将在开发过程中遇到的问题和值得记录下来的东西，做一个集合，方便以后参考。
el-time-picker组件无法选中时间
<el-time-picker is-range
style="width:500px" <!--必须设置宽度，不然会导致刷新或初始化的时候撑不开这个组件-->
:disabled="isDisabled"
v-model="form.time"
range-separator="至" start-placeholder="开始时间"
end-placeholder="结束时间"
placeholder="选择时间范围"
value-format="HH:mm" format="HH:mm">
</el-time-picker>
解决方法：必须设置默认的时间，不然无法进行时间的选择，组件里显示的为空数据
data(){
return {
form:{
time: [new Date(2020, 1, 1, 9, 0), new Date(2020, 12, 31, 18, 0)],
}
}
}
el-time-picker组件位置定位错乱(出现在左上角)
image.png
解决方法：给每一个时间选择器添加一个key属性即可。
封装dialog弹框组件
在子组件直接点击关闭时会导致报错(单向数据流问题)。解决方法就是在父组件操作关闭事件，并用第三个变量来控制显示与隐藏。并在visible后加.sync。
<template>
<div class="dialog">
<el-dialog
:title="title"
:visible.sync="visible"
@close="$emit('update:show', false)"
:show="show">
<slot></slot>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
visible: this.show
};
},
props: {
show: {
type: Boolean,
default: false
},
title: {
type: String,
default: ''
}
},
watch: {
show() {
this.visible = this.show; // 用另外一个变量给visible赋值
}
}
}
</script>
<style>
</style>
<dialog-pop title="导出学习报告设置" :show.sync="dialogTableVisible">
</dialog-pop>
// 在父组件操作dialogTableVisible
el-form表单校验不消失问题
ElementUI Form表单验证不通过，明明有值, 验证的错误信息不消失。
解决方法：表单域的item项的prop与组件的绑定值v-model的值要一样，比如 prop="a" 那么v-model的值也要等于"a"
<el-form-item label="详情" prop="detail">
<el-input v-model="form.detail"></el-input>
</el-form-item>
el-date-picker多个选择器时选择时间错乱
<el-time-picker v-if="ech1==1" key="startHour1" is-range v-model="time_value1" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围" value-format="timestamp">
</el-time-picker>
<el-date-picker v-if=" ech1==2" key="startDate1" v-model="date_value1" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="timestamp">
</el-date-picker>
<el-date-picker v-if="ech1==3" key="startWeek1" v-model="time1[0]" type="week" format="yyyy 第 WW 周" placeholder="选择周">
</el-date-picker>
<el-date-picker style="margin-left:5px" key="endWeek1" v-if="ech1==3" v-model="time1[1]" type="week" format="yyyy 第 WW 周" placeholder="选择周">
</el-date-picker>
<el-date-picker v-if="ech1==4" key="startMonth1" v-model="month_value1" type="monthrange" range-separator="至" start-placeholder="开始月份" end-placeholder="结束月份" value-format="timestamp">
</el-date-picker>
<el-date-picker v-if="ech1==5" key="startYear1" v-model="year_value1[0]" type="year" value-format="timestamp" placeholder="选择年">
</el-date-picker>
<el-date-picker style="margin-left:5px;" key="endYear1" v-if="ech1==5" v-model="year_value1[1]" type="year" value-format="timestamp" placeholder="结束年">
</el-date-picker>
注意的点：
- 每个选择器绑定的值最好要分开，不要相互影响。如:time_value1，date_value1......
- 当type为week的时候，用value-format="timestamp"会报错，如果需要使用时间戳格式的话，可以自己使用Date.parse()或moment.js来进行处理。
- 绑定的值该是数组就写数组，该是字符串就写字符串，不要随便赋值。
el-cascader后台返回数据与本地字段不一样
用props属性来配置成和后台数据一样的字段。
<el-cascader
v-model="catalogueOptions"
:options="cateOptions"
:props="props"
value="id"
label="title"
@change="handleCatalogueChange"
></el-cascader>
data(){
return {
props: { value: "id", label: "title", children: "pid" },
}
}
el-cascader无法回显数据？
1、检查是否赋值成功；
2、赋值成功后检查拿到的数据是否与下拉列表数据id相匹配（可能后端先随便写的）
el-select为多选时数据反显不显示文字
<el-select
v-model="form.assistant"
multiple
placeholder="请选择"
value-key="id"
@change="handleAssistantChange"
>
<el-option
v-for="item in form.assistOptions"
:key="item.id"
:label="item.realname"
:value="item.id">
</el-option>
</el-select>
image.png
注意：1.v-model绑定的值格式为[12,23,34]这种格式，如果不是需要进行处理。2.检查返回id数组与下拉框列表中的数据是否有匹配，如果不匹配则显示不了文字。
[Vue warn]: <transition-group> children must be keyed: <ElTag>报错
image.png
在保证绑定的数据类型与后台数据类型一致的情况下，还出现以上报错，可能有以下原因：
- value-key没有设置；
- value-key不是唯一性；
- value-key绑定的值不是el-option循环中每一项item对象的属性名。
el-tree树形控件获取包括半选状态的节点
勾选时默认获取到的节点是不包括半选状态的，所以我们前端传过去之后往往返回的也不包括半选状态的，所以反显的时候不正确。处理方法如下：
image.png
<el-tree ref="tree"
:data="treeData"
show-checkbox
node-key="id"
:default-checked-keys="addRo.authorization"
:props="defaultProps">
</el-tree>
//确定添加
handleAddAuthorization(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
// 通过node获取选中的树节点，包括半选状态的
let authorization = this.$refs['tree'].getCheckedNodes(false, true).map(i => i.id)
｝
｝
｝
el-tree点击编辑反显时父节点下的子节点全部选中(本应只选中一部分)
解决方案：
<el-tree
ref="tree"
:check-strictly="checkStrictly"
:data="routesData"
show-checkbox
node-key="path"
class="permission-tree"
/>
data() {
checkStrictly: false,
routesData: []
}
1.设置check-strictly
checkStrictly是一个变量,默认值是false
2.拿到接口数据后：
handleGetTreeData() {
this.$http(params).then(res => {
this.checkStrictly = true //重点：给数节点赋值之前 先设置为true
this.$nextTick(() => {
const routes = res.data
this.$refs.tree.setCheckedNodes(routes) //给树节点赋值
this.checkStrictly = false //重点： 赋值完成后 设置为false
})
})
}
el-table添加单选按钮
image.png
<template>
<el-table
ref="multipleTable"
:data="tableData"
tooltip-effect="dark"
style="width: 100%">
<el-table-column label="选择" width="65">
<template scope="scope">
<el-radio :label="scope.$index" v-model="radio" @change.native="getCurrentRow(scope.row)"></el-radio>
</template>
</el-table-column>
<el-table-column label="日期" width="120">
<template slot-scope="scope">{{ scope.row.date }}</template>
</el-table-column>
<el-table-column prop="name" label="姓名" width="120"></el-table-column>
<el-table-column prop="address" label="地址" show-overflow-tooltip></el-table-column>
</el-table>
</template>
data() {
return {
radio: ''
}
},
methods: {
getCurrentRow(row){
//获取选中数据this.templateSelection = row;
},
}
去除单选按钮里的数字，只需添加空格标签 就行了。
<el-radio
:label="scope.$index"
v-model="radio"
@change.native="getCurrentRow(scope.row)"
>
{{ }}
</el-radio>
el-form的label-width设置为"auto"时报错
image.png
解决方法：设置为具体的数值或百分比。( 注：每一个el-form-item可以设置单独的label-wodth。)
组件事件传第二个自定义参数
我们直接绑定一个事件的时候，事件默认有一个参数，但是我们想传第二个参数的时候，需要怎么传，以下就是解决方法：
<el-time-picker
is-range
v-model="time_value1"
key="hour"
range-separator="至"
start-placeholder="开始时间"
end-placeholder="结束时间"
placeholder="选择时间范围"
value-format="timestamp"
@change="((val)=>{handleTimeSelect(val,'hour')})"
>
</el-time-picker>
el-form常用的表单正则验证【用户名、密码、身份证号、邮箱号，手机号，车牌号、ip地址等】
https://blog.csdn.net/weixin_43970743/article/details/88532307
el-radio-group 接口数据赋值后点击没反应
如果 v-model 是二级字段，而js中又设置了默认选择项，则点击无反应。
解决办法：
v-model绑定的值改成一级对象。
el-input框接口数据赋值后无法编辑内容问题
请求接口数据赋值后，页面上input框正常显示，值也是对的，但是不可编辑。
解决办法：
使用vue的全局api方法，this.$set(data, property, value)
Vue解决echart在element的tab切换时显示不正确或宽度自适应问题：
原因：在页面进行加载时，隐藏的图表找不到对应的div大小，所以默认给了一个大小。所以要做的就是在页面加载时，就对图表进行初始化
解决方法：利用v-if属性,当切换至对应的tab时，设置其v-if的值为true即可，同时设置默认显示的tab
el-date-picker获取日，周，月第一天和最后一天
<el-date-picker v-if="inputForm.type==1" class="fl" v-model="date" type="date" placeholder="选择日期" value-format="timestamp" @change="handleDateChange">
</el-date-picker>
<el-date-picker v-if="inputForm.type==2" v-model="week" type="week" format="yyyy 第 WW 周" placeholder="选择周" value-format="yyyy-MM-dd" :picker-options="{firstDayOfWeek:1}" @change="handleWeekChange">
</el-date-picker>
<el-date-picker v-if="inputForm.type==3" v-model="month" type="month" placeholder="选择月" value-format="timestamp" @change="handleMonthChange">
</el-date-picker>
handleDateChange(e) { // 获取本日最早一小时和最后一小时时间戳
let start = e/1000
let end = start + 24*60*60-1
console.log("start", start);
console.log("end",end);
},
handleWeekChange(e) { // 获取本周最早一天和最后一天时间戳
// 周选择器获取的默认是当前轴第二天的时间
let start = moment(e).unix()-24*60*60
let end = moment(e).unix()+24*60*60*6-1 // 23:59:59
console.log("start", start);
console.log("end", end);
},
handleMonthChange(value) { // 获取本月最早一天和最后一天时间戳
let date = new Date(value);
let month = (date.getMonth() + 1).toString().padStart(2, '0'); // 在前面补0
let year = date.getFullYear();
let startTime = year + '' + month + '01';
let day = new Date(year, month, 0); // 第三个参数日为0可以获得本月最后一天
let endTime = year + '' + month + '' + day.getDate();
console.log(moment(startTime).unix(), 'startTime');
console.log(moment(endTime).unix(), 'endTime ');
}
el-input 只能输入正整数完美解决不闪动
<el-input
:value="text"
@input="e => (text = isnumber(e))"
style="width: 66px"
:disabled="isEdit"
></el-input>
isnumber(val) {
val = val.replace(/[^0-9]/gi, "");
// 此处还可以限制位数以及大小
return val;
},
el-table序号自定义
image.png
image.png
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
type="index"
:index="indexMethod">
</el-table-column>
</el-table>
methods: {
indexMethod(index) {
return index * 2;
}
}
解决表格编辑弹窗改变其中一项，表格数据实时变动问题
在每次弹出对话框的时候深拷贝一次当前行数据的副本
this.form = JSON.parse(JSON.stringify(row))
el-form只校验表单其中一个字段
在一些用户注册场景中，提交整个表单前有时候我们会做一些单独字段的校验，例如发送手机验证码，发送时我们只需要校验手机号码这个字段，可以这样做：
this.$refs['form'].validateField('mobile', valid => {
if (valid) {
// 发送验证码
}
})
如果需要多个参数，将参数改为数组形式即可。
el-table表头与内容错位
全局设置
.el-table--scrollable-y .el-table__body-wrapper {
overflow-y: overlay !important;
}
......
