在我们使用element进行开发的时候，有时会出现一些奇怪的问题，这些问题有可能是框架本身的缺陷，也有可能是我们使用不当，遂将在开发过程中遇到的问题和值得记录下来的东西，做一个集合，方便以后参考。
el-time-picker组件无法选中时间
:disabled="isDisabled"
v-model="form.time"
range-separator="至" start-placeholder="开始时间"
end-placeholder="结束时间"
placeholder="选择时间范围"
value-format="HH:mm" format="HH:mm">
解决方法：必须设置默认的时间，不然无法进行时间的选择，组件里显示的为空数据
data(){
return {
form:{
time: [new Date(2020, 1, 1, 9, 0), new Date(2020, 12, 31, 18, 0)],
}
}
}
el-time-picker组件位置定位错乱(出现在左上角)
解决方法：给每一个时间选择器添加一个key属性即可。
封装dialog弹框组件
在子组件直接点击关闭时会导致报错(单向数据流问题)。解决方法就是在父组件操作关闭事件，并用第三个变量来控制显示与隐藏。并在visible后加.sync。
// 在父组件操作dialogTableVisible
el-form表单校验不消失问题
ElementUI Form表单验证不通过，明明有值, 验证的错误信息不消失。
解决方法：表单域的item项的prop与组件的绑定值v-model的值要一样，比如 prop="a" 那么v-model的值也要等于"a"
el-date-picker多个选择器时选择时间错乱
注意的点：
- 每个选择器绑定的值最好要分开，不要相互影响。如:time_value1，date_value1......
- 当type为week的时候，用value-format="timestamp"会报错，如果需要使用时间戳格式的话，可以自己使用Date.parse()或moment.js来进行处理。
- 绑定的值该是数组就写数组，该是字符串就写字符串，不要随便赋值。
el-cascader后台返回数据与本地字段不一样
用props属性来配置成和后台数据一样的字段。
data(){
return {
props: { value: "id", label: "title", children: "pid" },
}
}
el-cascader无法回显数据？
1、检查是否赋值成功；
2、赋值成功后检查拿到的数据是否与下拉列表数据id相匹配（可能后端先随便写的）
el-select为多选时数据反显不显示文字
注意：1.v-model绑定的值格式为[12,23,34]这种格式，如果不是需要进行处理。2.检查返回id数组与下拉框列表中的数据是否有匹配，如果不匹配则显示不了文字。
[Vue warn]:
在保证绑定的数据类型与后台数据类型一致的情况下，还出现以上报错，可能有以下原因：
- value-key没有设置；
- value-key不是唯一性；
- value-key绑定的值不是el-option循环中每一项item对象的属性名。
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点击编辑反显时父节点下的子节点全部选中(本应只选中一部分)
解决方案：
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添加单选按钮
{{ scope.row.date }}
data() {
return {
radio: ''
}
},
methods: {
getCurrentRow(row){
//获取选中数据this.templateSelection = row;
},
}
去除单选按钮里的数字，只需添加空格标签 就行了。
{{ }}
el-form的label-width设置为"auto"时报错
解决方法：设置为具体的数值或百分比。( 注：每一个el-form-item可以设置单独的label-wodth。)
组件事件传第二个自定义参数
我们直接绑定一个事件的时候，事件默认有一个参数，但是我们想传第二个参数的时候，需要怎么传，以下就是解决方法：
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获取日，周，月第一天和最后一天
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 只能输入正整数完美解决不闪动
isnumber(val) {
val = val.replace(/[^0-9]/gi, "");
// 此处还可以限制位数以及大小
return val;
},
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;
}
......