本文主要介绍在使用ElementUI组件库的时候,常遇见的问题及使用到的方法,汇总记录便于查找。

1、表单

阻止表单的默认提交

<!-- @submit.native.prevent -->
<el-form @submit.native.prevent></el-form>

输入框enter提交请求

<!-- @keyup.enter.native -->
<el-input @keyup.enter.native="query()"></el-input>

表单重置

<el-form  @ref="demoForm"></el-form>

<script>
// 重置
this.$refs.demoForm.resetFields();
// 清空校验
this.$refs.demoForm.clearValidate();
</script>

2、表格

表格长字段省略显示

<!-- :show-overflow-tooltip="true" -->
<el-table-column prop="name" label="名称" :show-overflow-tooltip="true"></el-table-column>

序号翻页递增

<!-- :index -->
<el-table-column type="index" label="序号" :index="(index)=>{return (page - 1) * size + index + 1}"></el-table-column>

3、组件

dialog弹窗关闭按钮失效

<el-dialog :visible.sync="showDialog" @close="showDialog = false"></el-dialog>

dialog弹窗保留滚动条

<el-dialog :lock-scroll="false"></el-dialog>
this.$confirm("确定移除该任务类型吗?", "", { lockScroll: false }).then(()=>{})

select 打开弹窗触发事件

使用visible-change事件,当参数是true表示打开,当参数是false表示关闭

<el-select @visible-change="openUser($event)"></el-select>

ElementUI组件库常见方法及问题汇总(持续更新)的更多相关文章

  1. 《WCF技术剖析》博文系列汇总[持续更新中]

    原文:<WCF技术剖析>博文系列汇总[持续更新中] 近半年以来,一直忙于我的第一本WCF专著<WCF技术剖析(卷1)>的写作,一直无暇管理自己的Blog.在<WCF技术剖 ...

  2. 中国.NET:各地微软技术俱乐部汇总(持续更新中...)

    中国.NET:各地微软技术俱乐部汇总(持续更新中...)   本文是转载文,源地址: https://www.cnblogs.com/panchun/p/JLBList.html by ​史记微软. ...

  3. redis日常使用汇总--持续更新

    redis日常使用汇总--持续更新 工作中有较多用到redis的场景,尤其是触及性能优化的方面,传统的缓存策略在处理持久化和多服务间数据共享的问题总是不尽人意,此时引入redis,但redis是单线程 ...

  4. 跟我学SpringCloud | 终篇:文章汇总(持续更新)

    SpringCloud系列教程 | 终篇:文章汇总(持续更新) 我为什么这些文章?一是巩固自己的知识,二是希望有更加开放和与人分享的心态,三是接受各位大神的批评指教,有任何问题可以联系我: inwsy ...

  5. 在vue2.0中引用element-ui组件库

    element-ui是由饿了么团队开发的一套基于 Vue 2.0 的桌面端组件库. 官网:http://element.eleme.io/ 安装 npm i element-ui -S 引用完整的el ...

  6. Antd组件库使用方法

    零.介绍: Ant design,是阿里巴巴的蚂蚁金服公司设计的一套适应用于web端和移动端网页的Ui组件库,组件好看,非常适合React框架使用. 官网:https://ant.design/ind ...

  7. .NET6中一些常用组件的配置及使用记录,持续更新中。。。

    NET6App 介绍 .NET 6的CoreApp框架,用来学习.NET6的一些变动和新特性,使用EFCore,等一系列组件的运用,每个用单独的文档篇章记录,持续更新文档哦. 如果对您有帮助,点击右上 ...

  8. 优步UBER司机全国各地最新奖励政策汇总(持续更新...)

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://didi-uber.com/archiv ...

  9. 痞子衡嵌入式:史上最强i.MX RT学习资源汇总(持续更新中...)

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是i.MX RT学习资源. 类别 资源 简介 官方汇总 i.MXRT产品主页 恩智浦官方i.MXRT产品主页,最权威的资料都在这里,参考手 ...

随机推荐

  1. UltraFast设计法实践(1) -- 初始设计检查

    目录 1. report_failfast 1.1 命令使用 1.2 优化 1.3.总结 2.report_timing_summary 3. report_methodology 4. 总结 5.遗 ...

  2. MUI 滚动插件使用

    在Vue中 使用MUI滚动插件 官方文档地址:http://dev.dcloud.net.cn/mui/ui/#scroll 示例:初始化scroll控件: mui('.mui-scroll-wrap ...

  3. springboot(十一)-为什么要用springboot

    前言 学习了一段时间springboot,一般都可以在项目中使用springboot开发了.因为springboot的东西并不多,或者说,springboot根本就没有新东西. 好了,现在问一句,我们 ...

  4. Spark & Python

    技术文章 https://www.cnblogs.com/yangzhang-home/p/6056133.html 基于Python Spark的推荐系统 https://blog.csdn.net ...

  5. 通过shell处理多行数据

    ### 源文件 cat > tmpb <<'EOF' dbname:db_a,start_time::: query_end_time:::,query_total_time:,da ...

  6. es中的date类型

    JSON中没有date类型,es中的date可以由下面3种方式表示: ①格式化的date字符串,例如"2018-01-01"或者"2018-01-01 12:00:00& ...

  7. SpringCloud---服务容错保护---Spring Cloud Hystrix

    1.概述 1.1 在分布式架构中,存在着许多的服务单元,若一个单元出现故障,很容易因依赖关系引发故障的蔓延,最终导致整个系统的瘫痪: 为了解决这样的问题,产生了断路器等服务保护机制: 1.2 分布式架 ...

  8. Redis+Lua实现限流

    相比Redis事务来说,Lua脚本有以下优点减少网络开销: 不使用 Lua 的代码需要向 Redis 发送多次请求, 而脚本只需一次即可, 减少网络传输;原子操作: Redis 将整个脚本作为一个原子 ...

  9. Python与C相互调用、编译

    因为最近学习Boost::python的缘故,想尝试下不同语言之间的相互编译. 参考资料:http://blog.csdn.net/joliny/article/details/2457197. 很吃 ...

  10. spring、springmvc和mybatis整合(xml方式)

    今天搭建一个基于xml的ssm整合demo.话不多说,直接上代码. 我的开发环境如下: web服务器:tomcat8 开发工具:STS JDK版本:1.8 项目构建工具:maven 1.pom.xml ...