![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
element ui
m0_49471668
这个作者很懒,什么都没留下…
展开
-
cssBootstrap栅格布局的四种大小xs,sm,md,lg,xl
前端为了页面在不同大小的设备上也能够正常显示,通常会使用栅格布局的方式来实现。col-*-*visible-*-*hidden_*_* 中间可为xs,xsm,md,lg等表示大小的单词的缩写右边为1-12之内、用于元素所占列数columns的数值xs extra small超小sm smallmd meddlelg largexl extra large超大col-*对应所有设备 col-sm-平板--屏幕宽度等于或者大于576pxcol-md-桌面显示屏--屏幕宽度大于或者等于768pxcol-lg-大桌原创 2022-06-26 22:41:57 · 21914 阅读 · 0 评论 -
vue 表格嵌套表单验证,填写了其中一个后另一个提示为必填项,俩个不填为非必填,
<el-col :span="6"> <el-form-item label="证书名称:" prop="fileName" :rules="RecordOperation.upload[i].classHour?[{required: true, message: '请输入证书名称', trigger: 'blur'}]:[{required:false}]"> <el-input .原创 2022-05-31 17:08:50 · 1245 阅读 · 0 评论 -
element plus图标全局引入
main.jsimport * as ElIconModules from '@element-plus/icons-vue'const app =createApp(App)// 统一注册el-icon图标for(let iconName in ElIconModules){ app.component(iconName,ElIconModules[iconName])}组件中使用 <el-table-column label="操作" width="150原创 2022-04-22 00:08:19 · 783 阅读 · 0 评论 -
ElementUI select下拉框实现可输入文字的效果
加上filterableallow-createdefault-first-option三个参数即可原理:使用allow-create属性即可通过在输入框中输入文字来创建新的条目 注意此时filterable必须为真 本例还使用了default-first-option属性,在该属性打开的情况下,按下回车就可以选中当前选项列表中的第一个选项,无需使用鼠标或键盘方向键进行定位效果:...原创 2021-08-25 10:00:57 · 4014 阅读 · 1 评论 -
el-dialog可拖拽
1.在utils中新增dialog.jsimport Vue from 'vue'// v-dialogDrag: 弹窗拖拽Vue.directive('dialogDrag', { bind(el, binding, vnode, oldVnode) { const dialogHeaderEl = el.querySelector('.el-dialog__header') const dragDom = el.querySelector('.el-dialog')原创 2022-03-10 16:36:43 · 523 阅读 · 0 评论 -
vue使用history模式下 部署 tomcat 时刷新页面就会出现404,找不到资源的问题
vue使用history模式下 部署 tomcat 时刷新页面就会出现404,找不到资源的问题.可以简单理解History模式跟Hash的区别就是URL不带#号,History需要后台配置支持参考:解决Vue 项目部署到非根目录方法及刷新页面时找不到资源问题_小破孩的博客-CSDN博客_vue部署到非根目录...原创 2022-03-04 10:41:54 · 1090 阅读 · 0 评论 -
多页面配置
1.vue.config.js配置 pages:{ index:{ entry:"./src/main.js", template:"./public/index.html", filename:"index.html", title:"AMControl" }, AMControl:{ entry:"./src/pages/AMControl/main.js", template:.原创 2022-03-03 19:04:25 · 405 阅读 · 0 评论 -
vue多页面配置
vue 多页面跳转配置与实现(看了就会,一步一步作)_小小码农呀的博客-CSDN博客_vue多页面跳转原创 2022-03-02 19:25:16 · 838 阅读 · 1 评论 -
vue element 使用confirm时
1.import {MessageBox} from 'element-ui2.//按需导入了MesssageBox组件,通过原型挂载的形式,// 把MessageBox.confirm这个函数挂载到vue的原型对象上,名字叫做$confirmVue.prototype.$confirm = MessageBox.confirm原创 2022-02-17 18:07:48 · 785 阅读 · 0 评论 -
打印出来是promise,就可以使用async和await进行优化
打印出来是promise,就可以使用async和await进行优化修改后:打印出来的为confirm点击取消报错加上catch不再报错原创 2022-02-17 18:04:50 · 861 阅读 · 0 评论 -
javaScript原型与原型链
prototype:此属性只有构造函数才有,它指向的是当前构造函数的原型对象。 __proto__:此属性是任何对象在创建时都会有的一个属性,它指向了产生当前对象的构造函数的原型对象,由于并非标准规定属性,不要随便去更改这个属性的值,以免破坏原型链,但是可以借助这个属性来学习,所谓的原型链就是由__proto__连接而成的链。 constructor:此属性只有原型对象才有,它默认指回prototype属性所在的构造函数。 原型的几个要点:1、所有的引用类型(数组、对象、函..原创 2022-02-17 17:01:06 · 105 阅读 · 0 评论 -
vue-router 切换tab标签关闭时缓存问题方案
问题:使用keepalive后关闭tab标签后再打开,打开的是缓存的页面,参考上一篇关于tab的笔记要求:切换时打开的是缓存的页面,关闭后重新打开的是新的请求的页面解决方法使用keep-alive的include属性根组件<keep-alive :include="catch_components"> <router-view ></router-view> </keep-alive>原创 2022-02-14 15:06:42 · 2222 阅读 · 4 评论 -
input 监听输入框
<el-input class="name" v-model="instrument" style="width: auto;" placeholder="仪器查询" v-on:input="InputSearch($event)" ></el-input&g...原创 2022-01-20 14:17:21 · 700 阅读 · 0 评论 -
在VUE style中使用data中的变量的方法详解 输入框长度根据data(methods)中的值动态变化
<el-input class="name" v-bind:style="{ width: inputwidth - 35 + 'px' }" v-model="addressdame" placeholder="终端名称" v-on:input="InputSearch($event)" .原创 2022-01-06 11:21:30 · 1075 阅读 · 0 评论 -
前端实现vue element ui 勾选的表格数据导出
安装依赖npm install --save xlsx file-savernpm install -D script-loader在src文件夹中新建文件夹(命名为excel)新建文件夹后,在utils文件夹内新建两个js文件,分别命名为Blob.js、export2Excel.js,在相关文件内的method方法中,写入如下代码ExportExcel.vue子组件<template> <el-button type="primary" :l原创 2022-01-05 14:20:29 · 2147 阅读 · 1 评论 -
批量操作vue element
多个参数就传到后端了原创 2021-12-16 14:45:24 · 998 阅读 · 0 评论 -
修改el-input 中placeholder的颜色
input::-webkit-input-placeholder { color: #0e0e0f !important; } input::-moz-input-placeholder { color: #0b0c0c !important; } input::-ms-input-placeholder { color: #111111 !important; }原创 2021-12-15 14:15:22 · 1755 阅读 · 0 评论 -
菜单的下拉列表
.el-menu--collapse .el-menu .el-submenu, .el-menu--popup{ min-width: 110px!important; text-align: center;}原创 2021-12-14 11:45:28 · 607 阅读 · 0 评论 -
修改elementui图标为固定图片
.el-icon-s-home{background:url('../../assets/images/ditu.png')centercenterno-repeat;background-size:30px;}.el-icon-s-home:before{content:"替";font-size:16px;visibility:hidden;}原创 2021-12-14 10:46:09 · 451 阅读 · 0 评论 -
element UI table表格实现拖拽改变行高和列宽
<template> <div class="container"> <el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="id" border default-expand-all v-if="tableSh.原创 2021-12-09 09:52:24 · 1811 阅读 · 0 评论 -
el-table 直接在el-table标签上设置表格内容居中
header-cell-style设置头部居中;cell-style设置单元格内容居中<el-table ref="table1" :data="tableData1" :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}" style="width: 100%"></el-table>...原创 2021-12-07 12:15:10 · 873 阅读 · 0 评论 -
element ui 表头和表格都是动态
tableData为后端数据 <el-table :data="tableData" height="800px"> <el-table-column v-for="(item, index) in tableData[0]" :key="index" :prop="index" :width="index.原创 2021-10-13 14:49:43 · 164 阅读 · 0 评论 -
导致elementUI组件中的导航栏组件不整齐的原因
红色箭头部分是不是不整齐,看着是不是有点不顺眼,原因如下.el-menu中多出了一个右边框在style中去掉就好了成功解决原创 2021-10-15 11:28:49 · 406 阅读 · 0 评论 -
element ui table表格对某一行进行操作
实现方法:通过设置row-class-name添加样式将某些行进行单独设置。注意分页问题1.某行变色 <el-table :data="tableData" height="800px" :row-class-name="tableRowClassName"> <el-table-column v-for="(item, index) in tableData[0]"原创 2021-10-15 13:52:51 · 1619 阅读 · 0 评论 -
element ui下拉框中的内容和下拉框的id同时传到后台
一般下拉框只传一个参数到后台。我们的需求是需要用户名和其id同时传到后台。<el-row class="top-block padding-20px" :gutter="40"> <el-col :xs="24" :sm="12" :lg="6"> <el-row type="flex" class="row-bg" justify=""> <el-col :xs="6" :sm="6" :lg="6" cla原创 2021-10-21 10:51:19 · 1796 阅读 · 0 评论 -
elementui表格序号自动加上
不论在表格中如何新增删除表格数据,序号总是从1开始递增排序,原理是根据表格分页中当前页数与当前页条数来计算的<el-table-column prop="ownerUserid" label="序号" sortable> <template slot-scope="scope"> <span v-text="getIndex(scope.$index)"> </span> </temp原创 2021-10-24 10:49:53 · 2695 阅读 · 0 评论 -
动态菜单实现
<template> <div> <el-menu @select="selectMenu" :default-active="currentIndexLight" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" background-color="#545c64" .原创 2021-10-27 10:26:49 · 288 阅读 · 0 评论 -
2021-11-03
:cell-class-name="getCellClass" ::cell-style="getCellClass"都可以控制某个单元格原创 2021-11-03 00:12:32 · 56 阅读 · 0 评论 -
修改element ui中form表单的 label 颜色样式
刚开始使用.el-form-item__label,但是使得所有的form下的labal都变色了。.el-form-item__label{ color:#f56c6c; font-weight:bold; font-size:20px }我只是想让下图的label变色但下面也改变了颜色:查询资料后,加上class="item",就能表示其唯一性,只在一个页面起作用 <el-form-item label="收款人姓名:" :label...原创 2021-11-05 18:20:12 · 4259 阅读 · 0 评论 -
vue element ui某个表格实现复制
<el-table-column prop="hntaddress" label="收款地址" show-overflow-tooltip width="200px" > <template scope="scope"> <el-tooltip class="item" effect.原创 2021-11-09 09:12:11 · 788 阅读 · 0 评论 -
vue+element-UI实现右键菜单
<div> <el-tree ref="tree" :data="data" @node-contextmenu="rightClick" check-on-click-node node-key="id" :default-expanded-keys="[2, 3]" :default-checked-keys="[5]" :props="defaultProps" @n.原创 2021-11-09 09:19:20 · 1180 阅读 · 0 评论 -
element中input的change事件
element中input的change事件是移除焦点才触发:<el-input placeholder="同事姓名或账号" suffix-icon="el-icon-search" v-model="keyword" @change="handlerPageNo" style="width: 180px;"></el-input>想要变成输入就出发:解决:使用@input我这里需要判断密码的强度,所以一输入的时候就得触发,所以使用@原创 2021-11-09 11:50:18 · 3976 阅读 · 0 评论 -
elementUI中弹出框中使用echarts
在dialog中使用open方法<el-dialog :title="diaTitle" :visible.sync="dialogVisible" @open="open()" ></el-dialog> 在定时函数setTimeout中执行方法open() { this.$nextTick(() => { this.drawLine() })}..原创 2021-11-10 17:28:55 · 1218 阅读 · 0 评论 -
element的icon改变颜色
<i class="el-icon-success" v-if="!scope.row.cat_deleted" style="color:lightgreen;"></i><i class="el-icon-success" :style="{color:iconColor}" @click="onColorChange" />data: { iconColor: 'red',}methods: { onColorChange() { .原创 2021-11-13 16:03:55 · 9264 阅读 · 0 评论 -
ElementUI el-tree 树形控件给节点添加图标
<el-tree ref="tree" :data="data" check-on-click-node node-key="id" :default-expanded-keys="[2, 3]" :default-checked-keys="[5]" :props="defaultProps" @node-click="handleNodeClick" @check-change="han.原创 2021-11-15 10:34:14 · 1187 阅读 · 0 评论 -
vue element 日期范围选择器限制只能选今天之前的时间,或者只能选今天之后的时间
日期范围选择器限制只能选今天之前的时间,或者只能选今天之后的时间::picker-options="pickerOptions"今天以及今天之后的日期data() { return { pickerOptions: { disabledDate(time) { return time.getTime() < Date.now() - 8.64e7; //如果没有后面的-8.64e7就是不可以选择今天的 } }, }原创 2021-11-18 10:49:42 · 5277 阅读 · 0 评论 -
Vue中实现input输入框字数限制
<el-col :xs="18" :sm="18" :lg="18"> <el-input v-model="Form.description" placeholder="请输入内容" type="textarea" maxlength="100" @input="descInput" >&l...原创 2021-11-18 11:20:03 · 2577 阅读 · 0 评论 -
使用el-select ,传入数据,它显示数字的问题,不显示汉字,el-select下拉中文选择
使用el-select ,传入数据,它显示数字的问题,不显示汉字,el-select下拉中文选择_wg6oos88的博客-CSDN博客原创 2021-11-21 20:20:35 · 1560 阅读 · 0 评论 -
el-tree刷新数据之后保持之前的打开状态
简而言之就是利用:default-expanded-keys=“expandedList” 这个默认展开的属性然后用expandedList 数组记录你的展开情况在数据刷新之后,el-tree 会自动根据这个属性值的数组展开选项话不多说,上代码:<template> <el-tree ref="navigationTree" :default-expanded-keys="expandedList" :data="treeData"原创 2021-11-22 16:19:54 · 1873 阅读 · 2 评论 -
vue Element ui增加loading效果
1.在需要加loading 的标签加v-loading="loading",该项目为折线图<div id="gate-shore1" class="gate-shore-wrap" v-loading="loading"></div>2.在组件内引入Element-UI的Loadingimport { Loading}from 'element-ui'3.在组件data里面增加属性及属性值loading: true4.在方法里面写代码,关于组件的开原创 2021-11-23 10:39:45 · 3283 阅读 · 0 评论