摘要：手动控制校验状态，elementUI文档里面是没有的 <template> <div id="app"> <!-- status-icon 用于显示input框里的校验状态，需要写在 el-form里 --> <el-form ref="form" :model="form" label-width
阅读全文
posted @ 2021-09-27 04:19
随笔分类 - element ui学习
摘要：elementui动态添加校验规则，场景： 如果活动名称为空，则所有字段非必填 如果活动名称不为空，则具体活动名称提示必填 <template> <div id="app"> <el-form ref="form" :model="form" :rules="rules" label-width="
阅读全文
posted @ 2021-09-21 19:50
摘要：1.table上加上 @row-click="handleClickTableRow" 2.单选框的checkbox那列加上 @selection-change="handleSelectionChange" 3.table加上ref 4.实现1，2的方法 methods: { handleClic
阅读全文
posted @ 2020-04-01 21:30
摘要：<style> .upgrade-popup >>> .el-table__row current-row .el-table td { padding: 6px 0 !important; } </style>
阅读全文
posted @ 2020-04-01 21:01
摘要：elementUI树形控件实现隔行变色？别想了，elementUI没有这个属性。 只能通过原生js写了。 找到 el-tree-node__content 这个类进行dom操作 定义一个方法在updated里调用，一定要在updated里，其他生命周期是不行的。 // 隔行变色 changeColo
阅读全文
posted @ 2020-03-30 14:38
摘要：<el-scrollbar wrap-class="list" wrap-style="color: red;" view-style="font-weight: bold;" view-class="view-box" :native="false"> <!--这里放其他内容，表格等--> </e
阅读全文
posted @ 2020-03-17 14:43
摘要：在elementui里，table是怎么加上单选框的呢？ 啥都不用想了，复制粘贴下面代码就可以了。 <template> <div id="temglic"> <el-table :data="tableData" border style="width: 100%"> <!-- 单选按钮，占这么宽
阅读全文
posted @ 2020-03-16 02:13
摘要：elementUI官方文档里的表格数据都是写死的，不是循环来的，现在精简一下。 1.定义tableData 2.定义tableCol，里面需要包含prop,label,width. 如果没有width属性，那么会占用剩下的宽度 3.控制操作列的显示隐藏。操作列，只能写死在el-column里 完整例
阅读全文
posted @ 2019-10-23 03:28
摘要：el-row代表行,里面嵌套el-col， el-row里面有gutter属性，属性为数字，则gutter前面加冒号,gutter属性代表el-col的间隔 el-col里面有span属性，span为x，则分成24/x列 el-col里必须有div，不然span分割无效 例子： 效果：
阅读全文
posted @ 2019-10-23 01:01
摘要：1.elementUI的input框，需要用v-model绑定一个变量，这个变量相当于原生input框的value 2.placeholder属性和原生的一样 3.禁用el-input，绑定一个disabled属性即可 4.可清空的input，添加clearable即可 效果： 5.密码框，在el-
阅读全文
posted @ 2019-10-07 23:19
摘要：在el-checkbox-group标签里绑定max属性，不能是直接写数字，必须在data里定义max的值 例子：
阅读全文
posted @ 2019-10-06 01:19
摘要：1.按钮样式 使用el-checkbox-group标签即可 2.带边框的多选框 在每个el-checkbox添加属性border即可 3.定义多选框的大小 在el-checkbox-group定义属性size，属性值可以选，medium，small，mini 4.text-color 被选中时按钮
阅读全文
posted @ 2019-10-05 23:02
摘要：elementUI种的多选框和单选框差不多，（1）el-checkbox-group里绑定一个数组（2）el-checkbox-group绑定一个方法获取值（3）for循环选项，绑定key，label（4）el-checkbox里还可以绑定disabled和checked例子：
阅读全文
posted @ 2019-10-05 21:52
摘要：elementUI 单选框按钮样式，用el-radio-group标签嵌套着el-radio-button，就是单选框的按钮样式 可以通过size属性，指定单选框按钮的大小，size属性可选的值有medium,small,mini el-radio-button的其他用法和el-radio一样 例子
阅读全文
posted @ 2019-10-05 08:16
摘要：禁用el-radio，用disabled即可， 如果是循环的选项，那么需要绑定disabled属性 例子： <template> <div> <el-radio-group v-model="radio" @change="getValue()"> <!-- 禁用el-radio，用disabled
阅读全文
posted @ 2019-10-05 00:08
摘要：elementUI 单选框获取值有三种方法: 方法一： 如果，单选框选项不是循环得来的，并且不使用el-radio标签的 （1）给每个el-radio标签添加v-model属性，v-model的属性值是label绑定的值，label绑定的值，可以是数字，也可以是选项的内容。 （2）给每个e--rad
阅读全文
posted @ 2019-10-04 23:41
摘要：elementUI内置过渡动画（折叠），使用<el-collapse-transition>标签包裹要折叠的元素即可 例子：
阅读全文
posted @ 2019-10-01 12:14
摘要：elementUI内置缩放过渡，包括 el-zoom-in-center , 中心缩放 el-zoom-in-top, 往上缩放 el-zoom-in-bottom，往下缩放 在需要缩放的元素外层添加transition标签，name属性添加上面几个值即可 例子：
阅读全文
posted @ 2019-09-28 11:37
摘要：elementUi 元素淡入的方式有两种： 1.el-fade-in-linear 2.el-fade-in 使用方法： 在要使用该淡入效果的标签外层嵌套<transition>标签，并添加name属性，属性值为el-fade-in-linear 或 el-fade-in 例子：
阅读全文
posted @ 2019-09-28 04:00
