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>
posted @   会飞的一棵树  阅读(511)  评论(0编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 闲置电脑爆改个人服务器(超详细) #公网映射 #Vmware虚拟网络编辑器
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
点击右上角即可分享
微信分享提示