element-ui
曾曾子
求成长求进步
展开
-
element-ui组件嵌套太狠,导致input输入无效
由于弹出框嵌套了两层,导致input输入框毫无反应;后来发现是组件套用太深,vue检测不到视图更新,在失效输入框的input事件中加 this.$forceUpdate()强制刷新;<el-form-item label="测试数据:" required> <el-input v-model="test" type="number" ...原创 2020-04-28 09:31:20 · 4063 阅读 · 4 评论 -
elementUI 实现手动上传图片前判限制图片格式,大小,尺寸宽高,限制一次只能上传一个图
vue代码 <el-form-item label="图片" required> <el-upload class="avatar-uploader define-uploader" accept=".jpg, .jpeg, .png" :show-file-list="false" action :http-...原创 2020-02-19 19:25:10 · 4228 阅读 · 0 评论 -
vue+element-ui select组件传对象
应用场景:在使用选择组件 select 的时候:如果想要绑定的值,是一个对象,这样就可以获取整个对象,然后获取所需要的值进行赋值。可以如下操作:value直接绑定 对象item,但是需要注意的是:在select 上要加上属性:value-key,他对应的值,是:key="" ,所绑定的,不然就会有问题。注意:在编辑的时候,如果select 需要展示值的话,必须给 addForm.city...原创 2019-04-25 15:28:10 · 3823 阅读 · 0 评论 -
Vue element-ui父组件控制子组件的表单校验
方法一:父组件代码:<template><div> <child-form ref="childRules" :addForm="addForm" > </child-form> <el-button @click="saveForm()" size='medium'>保 存</el-button>...原创 2019-11-06 15:10:52 · 11165 阅读 · 8 评论 -
element-ui 开发小计
1.elementUI table组件获取表格当前行的索引可以参考如下图使用方法:其中column,KaTeX parse error: Expected '}', got 'EOF' at end of input: …{{row}},索引值为:{{index}}2.去除输入空格<el-input v-model.trim="userName" />...原创 2019-07-29 14:05:20 · 619 阅读 · 0 评论 -
elementUI 动态加载table列
需求:根据需要选择动态展示table列表;用for循环来控制列表展示,使用checkbox 来控制哪些数据显示<template> <div> <el-button type="primary" @click="showData()">展示</el-button> <div id="table-content"&...原创 2019-05-28 10:44:24 · 24660 阅读 · 4 评论 -
element-ui +Vue 解决 table 里包含表单验证
应用场景:在实际使用中经常会遇到需要在Form表单中使用table表格进行表单提交,同时又需要对table的字段进行校验,效果如图所示:这个校验中,最关键的问题在于如何给el-form-item 动态绑定prop。:prop="'tableData.' + scope.$index + '.字段名'"方法一:<template> <div class="app-con...翻译 2019-04-30 11:04:06 · 9647 阅读 · 4 评论 -
element-ui Form表单校验小结
1.要验证输入只能为数字时2.整体校验时,可以写方法校验;3.根据条件判断表单里的 某一项 是否必填;方法一:动态响应的改变required的值;在rules里面可以不用加 requied方法二:直接改变当前对应项的 rules ;写对应需要的两套校验条件&lt;el-form class="dialog-body" :rules="rulesList" :model="t...原创 2019-02-19 16:53:40 · 4964 阅读 · 0 评论 -
element-ui cascader级联选择器 同时返回value和label
1.给cascader组件赋值一个别名2 通过 currentLabels 来获取cascader组件中的label原创 2019-01-22 09:02:22 · 9667 阅读 · 8 评论