![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
使用UI库时遇上的那些事~
lt要努力
这个作者很懒,什么都没留下…
展开
-
el-tree实现单选
实现之后的单选效果图:下面贴代码:结构:<el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input><el-tree class="filter-tree" :data="treeObj.optionList" :props="defaultProps" node-key="value" :check-strictly="true" default-expand原创 2021-12-23 09:32:50 · 4542 阅读 · 1 评论 -
el-input 设置数字框
使用el-input的type属性设置为number,结构为<el-input type="number" :controls="false" size="mini" min="0" max="30" v-model.number="addRuleForm.number"></el-input>但是设置成那个了,还有一个数量的控制键,有点小丑然后就通过了css去掉这个控制键.add-rule-dialog{ input::-webkit-ou原创 2020-12-19 16:10:39 · 2259 阅读 · 3 评论 -
使用el-select时选中值改变但没有渲染变化
在el-select上绑定change方法,使用this.$forceUpdate()强制更新一下select<el-select v-model="value" @change="changeSelect" placeholder="请选择"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.val原创 2020-12-10 10:17:48 · 3545 阅读 · 0 评论 -
el-table动态合并表格,合并的表格行数是个变量--span-method
根据自己设定的规则,合并动态行数线上例子(可动态点击):https://codepen.io/luoting249/pen/QWKKZPp下面是代码片段(可把代码粘贴到element在线运行上,可看到效果):<script src="//unpkg.com/vue/dist/vue.js"></script><script src="//unpkg.com/element-ui@2.14.1/lib/index.js"></script><d原创 2020-12-10 10:06:31 · 283 阅读 · 1 评论 -
el-time-select数据改变了视图没更新
<el-form-item :label="$t('notificationPush.pushTime')" prop="pushTime" :rules="{required:true, validator:validator_pushTime, trigger: 'change'}"> <span class="date-label">{{$t('label.everyDay')}}</span> <el-time-select原创 2020-09-30 15:41:35 · 1927 阅读 · 3 评论 -
在elementUI中有时想触发el-form中的某一个校验,该怎么做?
在form表单中 用ref绑定 <el-form :model="form" ref="form" class="mt20" label-width="140px"> <el-form-item label="标题:" prop="title" :rules="{required:true,message:'请输入标题',trigger:'change...原创 2020-04-24 11:31:51 · 8659 阅读 · 0 评论 -
elemntUI中el-radio如何在已选中的情况下,再次点击取消选中,实现反选
在element-ui中,其实可以通过checkbox实现反选的功能,把max设置为1 就好了<el-checkbox-group v-model="checkList" :max="1"> <el-checkbox label="1"></el-checkbox> <el-checkbox label="2"></el-ch...原创 2020-03-13 16:15:07 · 3046 阅读 · 0 评论 -
如何在el-table中如何使用计算属性computed
应用场景:在elementUI中,使用table表格显示数据时,如果碰上要用switch结构转化数据时,应该怎么办?一开始,我想在computed里写switch结构return出我想要的值,结果发现数据展示不出来。然后之后想到,可以在methods中用方法的形式 return出我们想要的数据之后改成这样了然后就好了。。。...原创 2020-03-10 11:59:33 · 8582 阅读 · 5 评论 -
使用elementUI中的el-checkbox遇上Cannot read property ‘length‘ of undefined错误应该怎么办?
在使用el-checkbox时遇上这样的错误:TypeError: Cannot read property ‘length’ of undefinedat VueComponent.isLimitDisabled (element-ui.common.js?ccbf:6452)at Watcher.get (vue.esm.js?efeb:4482)at Watcher.evaluate...原创 2020-03-02 17:32:25 · 17930 阅读 · 20 评论 -
vue项目中elementUI的日期时间选择器的默认修改以及能选择当天的未来时间24点
在elementUI的el-date-picker中默认为选中的0点到第二个选中的0点相应代码: <el-date-picker size="mini" v-model="rangeTime" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-fo...原创 2020-02-26 16:19:46 · 9119 阅读 · 1 评论 -
vue项目中 elementUI 中表格多选框默认选中,但没有效果问题
按官网上的 table表格中的多选一开始我的代码是这样的:this.enabelLists.forEach(row => { this.$refs.selectTable.toggleRowSelection(row, true)})其中 this.enabelLists 是我要勾选的数组selectTable 要绑定在你要出现这个勾选数组的表格中,你的表格必须包含勾选数...原创 2020-01-17 17:21:28 · 5372 阅读 · 3 评论 -
处理 elementUI 中表格多选框禁用问题
在 el-table-column type 类型为 selection 组件中,添加 :selectable='方法名'<el-table :data="tableData" v-loading="loading" max-height="570" stripe :header-cell-style="headerStyle" @selection-change="handleSele...原创 2020-01-16 13:37:59 · 7588 阅读 · 2 评论 -
elementUI中的 Radio Events的change事件的触发
在使用elementUI中的el-radio-group时发现官方文档没有栗子,只有参数解释,于是自己试了一下<el-radio-group v-model="radio1" :change="change"> <el-radio-button label="新增用户"></el-radio-button> <el-radio-button ...原创 2020-01-03 11:30:14 · 16317 阅读 · 1 评论