![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue与Element
文章平均质量分 81
江湖儿女快意恩仇
江湖儿女快意恩仇,我是没有感情的小秃头
展开
-
Vue使用Element的消息提示Message,使用customClass自定义样式
Element的Message常被用来实现提示功能,比如操作成功,操作失败的提示有时一些操作对接后台,错误信息会返回一个list:[ ],比如一个导入表格的接口,一些错误信息,后台返回的是这样: [ "第1行数据重复", "第3行编号名称不存在", "第4行数据为空", "第6行格式不正确" ]数据不多还好,但是一旦数据非常多,页面就会变成下面这样这样页面既不美观,也会导致一些属性失效,比如“是否显示关闭按钮”,根本看不到这个按钮了(因为这个按钮会垂直居中在messa原创 2022-04-19 16:35:52 · 9211 阅读 · 1 评论 -
Vue使用Element的表单Form必填项太多,导致代码冗余
Vue项目使用Element表单时,常会遇到表单很长,字段很多,必填项也多,曾经遇到过一张表单50多个字段,几乎全是必填项,本身ruleForm去定义就很长,再加上必填项rules的定义,光表单这点东西就100多行定义了,更别说页面中还有别的代码,整个页面看起来很不美观,也很冗余。下面介绍一种方法,可以减少rules的长度,主要针对:1、字段多表单长;2、只做必填项校验;3、几乎全是必填项原理就是:利用for循环来循环定义的表单ruleForm话不多说,直接上代码 created() {原创 2021-03-11 20:50:55 · 2105 阅读 · 3 评论 -
Vue使用Element的日期选择器DatePicker,以周为单位
在Vue项目中使用Element组件中的日期选择器,当日期单位设置为周时候,我遇到许多小问题:文章目录一、选中一周后,显示的是*2020第42周*,我希望显示为*2020年10月12日至2020年10月18日*这样,或者自定义;二、不可选本周以后的日期,或者本周以前的日期不可选这里面有个小坑,得先看下提示:这个日期控件有个坑,就是选中日期后的时间,双向数据绑定(就是v-model="value"这个)的是起始日期的第二天,不论你把这个起始周设置为星期几都是这样,图一为默认起始周,起始周为周日图原创 2020-10-25 21:16:37 · 12456 阅读 · 6 评论 -
Vue使用Element的表格Table显示树形数据,多选框全选无法选中全部节点
使用Element的组件Table表格,当使用树形数据再配合上多选框,如下:会出现一种问题,点击左上方全选,只能够选中一级树节点,子节点无法被选中,如图所示:想要实现点击全选就选中所有的表格,要另想办法,方法如下:1、首先给table设置一个ref;2、绑定一个@select-all方法;3、定义一个变量,来识别全选框是否被选中,默认为未被选中;checkedKeys: false,4、@select-all绑定的方法如下,Element的Table表格中,select-all表示当原创 2020-09-20 23:46:18 · 4979 阅读 · 7 评论 -
Vue使用Element的级联选择器Cascader,在方法中清空选项
最近使用vue写项目,用到的是ELement的框架,项目中有个地方用到了级联选择器,好多东西直接在官网都找不到。我要实现点击清空以后,去调用一个和点击下拉选项不一样方法,做这个功能的时候,也找到了如何在方法中清空级联选择器的选项。官网上只说明了想要清空级联选择器只需要添加一个clearable原理就是在级联选择器上面绑定一个监听1、首先添加一个 ref="cascaderHandle" 和clearable2、在要清空的函数方法中this.$refs.cascaderHandle.checke原创 2020-08-21 21:31:28 · 7959 阅读 · 9 评论 -
Vue使用Element的级联选择器Cascader,选中后下拉框自动关闭
这个方法是我在这篇文章中学到的=》详细原理讲解急着用可以先看看我这个简略版的,在级联选择器@change方法中,监听变化,首先添加一个ref="cascaderHandle",在@change绑定的方法中监听:this.$refs.cascaderHandle.dropDownVisible = false; <el-cascader :options="optionData" ref="cascaderHandle" clearable :原创 2020-08-20 22:50:10 · 6805 阅读 · 3 评论 -
Vue使用Element的折叠面板Collapse设置默认全部展开
这个适用于需要for循环 <el-collapse-item>负责展开的属性是value<el-collapse :value="opened"> <el-collapse-item v-for="o in List" :key="o.aaa":name="o.aaa"> <div>XXXXXXXXXXXXXXXXXXXXXXXX</div> </el-collapse-item></el-collapse&原创 2020-08-07 08:54:26 · 8353 阅读 · 0 评论 -
Vue使用Element的级联选择器Cascader出现空白面板
最近使用Vue写项目,有用到Element的级联选择器<el-cascader>由于后台给的数据,不是太符合级联选择器数据的规范,比如children为空时,级联选择器会出现空白的面板,又比如给的是text而不是label,如果直接使用,不会显示文字,我也是找了很久,自己试了很久,才找到一种解决办法的。在Element-UI是的级联选择器中,只有children这个子节点,即使children: [],也会出现一个面板,就是图中的这个,为了去除这种空白的面板,需要对数据进行处理。下面这原创 2020-08-20 22:22:22 · 2059 阅读 · 6 评论 -
Vue使用Element的下拉框Select一些样式的修改
1、选中文字后,下来框的宽度和文字宽度一样2、去除下拉框的边框3、更改下拉的图标箭头原创 2020-08-20 21:18:08 · 8703 阅读 · 1 评论