vue+Element-ui
文章平均质量分 65
鸣拙
时间也不会在意你之前到底有过怎样的失败。我失败过,颓废过,也后悔过,生活还得继续,努力的奋斗才是最重要的
展开
-
vue+element的树组件的父子节点不相关联
父子节点不相关联在做一个项目的时候,用到了el-tree组件,且显示了checkbox,点击表格,显示右边树节点选中,且树节点有层级关系,问题:有的子节点是没有设置的,结果还是被选中了,后面查看文档,发现没有设置属性check-strictly(在显示复选框的情况下,是否严格的遵循父子不互相关联的做法,默认为 false)可以看到,有个属性是控制父子节点之间的关联的,默认是相关联,即选中了父节点,子节点就会被选中例:如下面的例子,未设置属性的时候,只要选中了父节点,所有的子节点就被选中<原创 2021-04-01 14:57:50 · 1975 阅读 · 0 评论 -
vue+element 日期选择器的定位问题
切换不同的日期选择器,定位错误日期选择器定位错乱,切换其他的日期,如果是使用v-if来就行切换的话,切换的日期选择器的定位会错乱,变成left:0;top:0<el-date-picker v-if="selectData === 'consecData'" type="daterange" class="datePicker" start-placeholder="起始日期" end-placeholder="结束日期" v-model="modeStartDate1" range-se原创 2020-10-15 18:42:04 · 2084 阅读 · 0 评论 -
vue+Element实现el-tree节点的拖拽
节点拖拽实现树节点拖拽效果,在树中有三层,通过对每一层设置一个专有的属性,通过这个属性来判断点击的是那一层// 第一层设置folderId,第二层设置fileId,第三层设置imgId// 实现代码,el-tree控件中的draggable可以设置节点可拖拽,allow-drop表示即将放入的节点,allow-drag是移动的节点<template> <el-tree :data="data" node-key="id" :expand-on-click-node="fals原创 2020-08-20 19:31:29 · 7067 阅读 · 0 评论 -
vue中使用el-tree的懒加载的时候祛除不必要的三角形,解决HTMLCollection为空
需要将el-tree的懒加载的没有用到的三角形祛除需要祛除的部分,如下图中的第三级的文件,这是最后一层,所以左边的三角形加载按钮没有意义,需要祛除实现思路:如下图,因为三角形按钮是element-ui渲染出来的,无法通过在代码里设置样式,需要使用js操作dom来隐藏三角形。下面的元素是可以获取的元素,上面的是element-ui渲染出来的元素。需要通过已知的元素来查找到三角形的元素如何隐藏。// 根据图标的类名获取到当前的元素const childNodeArr = document.get原创 2020-08-04 19:10:14 · 3377 阅读 · 0 评论 -
vue+Element-ui前端实现分页效果
分页技术分页技术的概念分页就是将所有的数据分段展示给用户,用户看到的可能不是全部的数据,而是其中一部分,用户可以通过点击页码来查找自己需要的内容,也可以通过模糊查询获取符合内容的数据分页的意义分页确实有效,但它一定会加大系统的复杂度,但可否不分页呢?如果数据量少的话当然可以.但是对于企业信息系统来说数据量不会限制在一个小范围内.如果不顾一切的Select * from某个表,再将返回的数据一古脑的扔给客户,即使客户能够忍受成千上万足够让人眼花缭乱的表格式数据,繁忙的网络,紧张的服务器也会提出它们无声原创 2020-07-21 19:34:28 · 1906 阅读 · 1 评论 -
vue+Element-ui实现登录注册表单
登录注册表单验证通过Element-ui的表单实现登录注册的表单验证效果图如下注册登录表单登录的实现,需要通过手机号或者邮箱进行登录,验证手机号或者邮箱符合要求// 登录表单验证的代码// template的代码<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px"原创 2020-07-13 19:48:44 · 7137 阅读 · 3 评论 -
vue+Element-ui的el-table的多级内容渲染
将多层内容渲染到表格里面如渲染下面的数据,将一个对象渲染成一行数据,和平常的table表格的数据渲染不一样,这个不能直接渲染出来,需要加第三方的label来渲染数据tableData: [ { name: 'Huawei P40', properties: [ { description: '颜色', value: '红色' }, { description: '内存',原创 2020-07-08 08:28:34 · 8732 阅读 · 2 评论 -
vue+Element-ui的el-dialog弹出层的应用,及实现el-dialog拖拽效果
Element-ui的el-dialog的应用1.安装element-uinpm i element-ui -S2.全局引用**在main.js引用**import ElementUi from 'element-ui'import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUi);3.在.vue文件应用代码// .vue文件的代码<template> <div> <el-butt原创 2020-07-06 12:46:18 · 7056 阅读 · 2 评论 -
使用element-ui的el-tree组件
element-ui Input 标签后加搜索图标<el-form ref="form" :model="form"> <el-input v-model="form.name" placeholder="请输入名称" suffix-icon="el-icon-search"></el-input></el-form>...原创 2020-05-27 20:21:58 · 1594 阅读 · 0 评论