elementUI
elementUI使用
zuo-yiran
这个作者很懒,什么都没留下…
展开
-
修改elementUI carousel组件源码实现轮播图卡片化宽度自适应及样式调整
项目中要实现下图效果三说明:效果二和效果三是说明不同宽度达到的组件的效果纯css实现宽度自定义并居中通过elementUI API中发现没有暴露出轮播图卡片化的自定义的宽度,通过查看样式得知是固定的50%的宽度,那么要实现修改宽度可以进行样式覆盖,代码如下:.el-carousel__container { .el-carousel__item--card { width: 850px !important; background: #fff; } .el-carousel__ite原创 2023-05-29 14:12:37 · 3078 阅读 · 0 评论 -
vue使用vuedraggable实现tag标签动态添加数据且可拖拽功能
安装插件vuedraggable实现可拖拽功能原创 2023-03-10 09:57:36 · 2493 阅读 · 1 评论 -
vue el-select搜索功能--区分输入内容后得到的是否是下拉框选择数据
区分elementui使用select组件,进行输入后得到的值是输入的值还是通过下拉框选取的值原创 2022-11-22 18:02:44 · 2177 阅读 · 0 评论 -
elementUI中NavMenu点击二级导航el-submenu无效
项目中需要用到elementUI的NavMenu 导航菜单,需求是除了要进行下拉选中的操作外需要点击二级菜单时要触发绑定的点击事件,但是直接加@click是没有效果的,这时候可以直接用修饰符实现:@click.native使用js的原生点击事件即可...原创 2021-12-02 09:41:18 · 2988 阅读 · 0 评论 -
解决elementUI el-form resetFields()方法重置表单无效
问题:表单操作中resetFields()方法在编辑后再次新增失效。在开发过程中新增和编辑功能往往使用一个el-form,在新增完成时,执行 resetFields()方法(即:this.$refs[formName].resetFields();),这样再次打开页面时,不会保留原来的数据,但是先给form赋值执行编辑操作,完成时执行resetFields()方法,再次打开进行新增时,会发现数据依然存在,感觉像是resetFields()方法没有起作用。原因:el-form提供的resetField原创 2021-10-24 23:55:54 · 6557 阅读 · 3 评论 -
elementUI el-form动态控制表单验证
要实现如下操作:根据选择的验证方式的值动态控制表单中的校验方式,即默认对手机号进行校验,选择验证方式为手机号,则对手机号进行必填校验且验证手机号的格式是否正确;选择验证方式为邮箱,则对邮箱进行必填校验且邮箱格式是否正确重点:动态控制rules关键代码::rules="this.isCheckPhone?rules.mobile : [{required: false}]"完整代码代码如下html:<el-form :model="ruleForm" :rules="rules" r原创 2021-07-28 17:17:55 · 2789 阅读 · 0 评论 -
element-ui中的el-tab-pane实现显示隐藏的方法
直接用v-show是不起作用的,经过查找是说v-show起作用的本质是display:none,而因为td的display: table-cell;权限高于display:none,所以v-show失效,那么要实现显示隐藏的控制可以进行使用如下的方式:方式一:最简单有效的用v-if取代v-show实现。方式二:在el-tabs标签上添加ref,通过js进行控制,具体实现如下:例子:<el-tabs v-model="activeName" @tab-click="handleClick"原创 2021-02-18 10:29:58 · 27757 阅读 · 5 评论 -
element UI el-select 绑定值为对象时设置默认值
适用场景描述:在项目中实现编辑功能时,如页面存在下拉框且下拉框的数据在点击相应的select时进行调用( 在编辑时可能需要修改部分数据,而且存在部分下拉数据并不是必选项,如果直接获取所有的下拉数据,可能会造成浪费 ),需要在下拉框内显示已有的值作为默认值,如图所示(以官网给的数据为例):绑定值为字符串:如果只是需要数据的单个值,例如:value时,直接把值绑定给value就可以。代码:页面代码:<el-select v-model="value" placeholder="请选择" @cha原创 2021-01-12 15:14:44 · 10100 阅读 · 2 评论 -
element el-checkbox控制全选按钮选中各种状态
要实现如下控制全选按钮的状态:需要两个变量进行控制:el-checkbox内的indeterminate和v-model所绑定的值。例:<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="checkAllChange"> {{userListArr.length}}/{{userList.length}} <span v-show="userListArr.length==0"&原创 2020-12-09 19:33:41 · 3046 阅读 · 0 评论