随笔分类 -  ElementUI

DateTimePicker日期时间选择器中，只需要选择器，不需要输入框
摘要：vue的element-ui中有个日期时间选择器，有个需求就是只需要使用选择器，而不需要输入框，也就是说选择时间的触发条件是别的事件，比如点击某个按钮。 实现效果： 组件默认样式：输入框和时间选择器是绑定的，当点击输入框时，才显示时间选择器。 需求：当点击选项：自定义时间 时，显示出时间选择器，此时 阅读全文
posted @ 2020-11-23 17:44 苏小落 阅读(6806) 评论(3) 推荐(0)
el-form设置规则校验，在父子组件中多个表单需同时校验
摘要：如上： 数据源和格式化分别在不同的两个子组件中，同时引用在了父组件中，需要在父组件中点击确定按钮时，校验父组件及两个子组件中的表单是否均满足校验。 使用el-form的:rules="rules"结合this.$refs[formName].validate((valid) => {}来做。 实现代 阅读全文
posted @ 2020-09-26 18:36 苏小落 阅读(6237) 评论(0) 推荐(2)
el-popover气泡弹出框属性及方法
摘要：气泡弹出框： 一般有三种触发形式：hover, click 和 focus，在弹框中可以自定义内容，比较多变。 如上，比如我们通过click点击来控制气泡的显示隐藏，当点击测试div时，气泡显示，再点击页面任意位置或者测试div时，气泡会隐藏，但有时候我们需要不触发它的点击事件而是手动来控制气泡的显 阅读全文
posted @ 2020-09-12 10:23 苏小落 阅读(33911) 评论(2) 推荐(0)
关于form中的rules对变量设置多个校验规则，执行顺序
摘要：实现效果： 如上所示，对活动名称设置了三个校验规则，分别为必填项，长度为3~4个字符，需要为数字/英文字母。 代码如下： 1.html： <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" clas 阅读全文
posted @ 2020-06-15 15:08 苏小落 阅读(4954) 评论(0) 推荐(0)
对el-tree进行一些操作
摘要：有时我们需要使用到el-tree，即树形控件，但大多数时候我们是需要对它进行一些样式及数据的改变的。 操作： 1.在label前添加指定图标： <span class="custom-tree-node" slot-scope="{ node, data }"> <div class="word_s 阅读全文
posted @ 2020-05-21 19:19 苏小落 阅读(5856) 评论(0) 推荐(0)
el-steps步骤条中的图标想要替换成图片
摘要：实现效果： 如上所示，需要改变每个步骤的图标，在process和finish下显示不同颜色。 实现代码： 1.html： <el-steps :active="active"> <el-step title="企业基本信息"> <i class="step01" slot="icon"></i> < 阅读全文
posted @ 2020-02-24 10:59 苏小落 阅读(11289) 评论(4) 推荐(0)
关于级联选择器el-cascader的一些属性
摘要：级联选择器如下： 基本用法： <el-cascader v-model="value" :options="options" @change="handleChange"> </el-cascader> 操作： 1.后端返回的数据格式名称跟前端需要的名称不一致： 使用:props动态改变 :prop 阅读全文
posted @ 2019-12-19 11:49 苏小落 阅读(8719) 评论(0) 推荐(0)
el-table实现表格组件化
摘要：在UI框架中，表格通过:data来给行数据赋值，生成多行数据，一般列是固定的，不能改变。 想要实现动态改变列，可以通过循环。 实现效果： 实现代码： 1.子组件： <template> <div class="contrainer"> <el-table :data="tableData" styl 阅读全文
posted @ 2019-12-17 20:06 苏小落 阅读(929) 评论(0) 推荐(0)
$message与$confirm
摘要：当删除用户时，有时需要弹出一些确定信息，一般有两种形式：消息提示、弹框。 1.message信息框： this.$message({ message: '确定删除该用户？', type: 'warning' }) 2.confirm确认框： this.$confirm('将删除该用户, 是否确定?' 阅读全文
posted @ 2019-09-23 10:56 苏小落 阅读(26832) 评论(0) 推荐(0)
element-ui的el-table中添加递增序号
摘要：效果如上所示， 不论在表格中如何新增删除表格数据，序号总是从1开始递增排序，原理是根据表格分页中当前页数与当前页条数来计算的。 <el-table-column label="序号" prop="" width="180" align="center"> <template slot-scope=" 阅读全文
posted @ 2019-09-23 10:00 苏小落 阅读(6650) 评论(0) 推荐(1)
element-ui中el-input需要改变placeholder的字体颜色
摘要：如下所示，需要改变输入框中默认文字的字体颜色， input::-webkit-input-placeholder { color: #c0c4cc; } input::-moz-input-placeholder { color: #c0c4cc; } input::-ms-input-placeh 阅读全文
posted @ 2019-09-06 17:16 苏小落 阅读(39470) 评论(0) 推荐(2)