element-ui表单重置函数 resetFields 无效解决
由element-ui文档中能看到重置表单使用的是如下函数
this.$refs[formName].resetFields();
但是有时使用它却可能会失效
解决:
form-item中要加上prop属性,它的值要与input的model对应
<el-form-item prop="roleDesc" label="描述">
<el-input v-model="addForm.roleDesc"></el-input>
</el-form-item>
所以prop属性不仅是在校验表单时要使用,在重置表单时也要加上
注:重置的方法只适用于prop中有属性的对象
data(){
return {
tag:{
tagName:'',
tagDesc:''
},
tagTwo:''
}
}
// 表单中若是重置tag是可以的,因为它有属性且对应prop
// 使用函数为tagTwo赋值tag类型的对象
// 重置tagTwo不能,它本身没有属性,赋值的对象上才有属性
element-ui Table自动滚动实现
<template>
<el-table ref="table1" :header-row-class-name="'lc_table'" :data="pageData.sbxx.data" height="290" style="width: 100%">
</template>
<script>
export default {
mounted() {
this.tableScrooll(this.$refs.table1);
},
methods: {
// 入参是需要滚动table的Dom节点
tableScrooll(table) {
var tableScroollTimer;
const divData = table.bodyWrapper;
// 拿到元素后,对元素进行定时增加距离顶部距离,实现滚动效果(此配置为每100毫秒移动1像素)
tableScroollTimer = setInterval(() = >{
// 元素自增距离顶部1像素
divData.scrollTop += 1;
// 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
// 但是输出的话可以发现scrollTop是有小数的。现在很多浏览器中scrollTop是浮点数,可以+1/-1或者取整后用不等式去判断
if (divData.scrollHeight - divData.scrollTop - 1 < divData.clientHeight) {
// 重置table距离顶部距离
divData.scrollTop = 0;
}
},
100);
divData.addEventListener("mouseover",
function() {
clearInterval(tableScroollTimer);
});
divData.addEventListener("mouseleave",
function() {
tableScroollTimer = setInterval(() = >{
// 元素自增距离顶部1像素
divData.scrollTop += 1;
// 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
if (divData.scrollHeight - divData.scrollTop - 1 < divData.clientHeight) {
// 重置table距离顶部距离
divData.scrollTop = 0;
}
},
100);
});
},
}
}
</script>