vue+element
vue的相关问题
群狼之虎
You’ll never realize how strong you are until you have no other choice but to be strong<br>你永远都不会知道自己到底有多坚强,直到有一天你除了坚强别无选择。
展开
-
前端(Vue)实现自行分页的两种方法(记录一下)
【代码】前端(Vue)实现自行分页的两种方法(记录一下)原创 2024-08-01 17:00:44 · 376 阅读 · 0 评论 -
element-ui 中修改loading加载样式
加载功能,默认是全屏加载效果。原创 2024-05-06 16:11:33 · 1286 阅读 · 2 评论 -
vue 使用 html2canvas 截屏并下载图片至本地(重点兼容ie浏览器)
html2canvas要做IE浏览器兼容原创 2024-05-06 11:19:38 · 603 阅读 · 4 评论 -
vue+Echarts 仪表盘进度条颜色和样式修改
*原创 2024-01-05 15:39:23 · 2342 阅读 · 0 评论 -
vue + element 项目表格多选根据状态来禁用
这个是直接写在里面了不用再额外调用方法了。判断后台给返回的状态码。原创 2023-12-19 16:05:16 · 559 阅读 · 0 评论 -
vue 在for循环中设置ref并获取$refs
1.设置:【:ref=“‘XXX’ + (index+i)”】或者【:ref=“‘XXX’ + id”】2.获取:let ref = eval(‘this.$refs.XXX’ + index)[0]1.设置:【:ref=“‘XXX’ + index”】XXX -->自定义ref的名字。index+i -->两个for循环的索引;id -->item的唯一标识;原创 2023-12-15 16:35:45 · 3218 阅读 · 0 评论 -
elementui el-pagination分页组件查询的时候当前页不更新
2.做了一个判断以后就是在点查询按钮的时候让pageNum默认为就好了。1.在加的查询条件中,一般查询按钮是调的列表接口的方法。原创 2023-12-15 15:05:01 · 998 阅读 · 0 评论 -
Element ui table展开行中,某些行需要展开,某些行不需要展开
【代码】Element ui table展开行中,某些行需要展开,某些行不需要展开。原创 2023-07-18 19:20:39 · 1294 阅读 · 2 评论 -
Vue的倒计时效果实现(element-ui)
就是简单的倒计时这个是基于elementUI做的。原创 2023-04-21 11:17:32 · 2351 阅读 · 0 评论 -
vue 中 给img图片添加动态路径 路径正确但是图片不显示问题
【代码】vue 中 给img图片添加动态路径 路径正确但是图片不显示问题。原创 2022-12-16 19:26:44 · 5303 阅读 · 2 评论 -
vue 悬浮可拖拽组件--可在屏幕上进行拖拽
【代码】vue 悬浮可拖拽组件--可在屏幕上进行拖拽。原创 2022-12-16 19:21:25 · 1843 阅读 · 0 评论 -
vue img标签图片加载时 闪烁
加载时 在图片正常显示之前还是会显示加载出错的默认图片。因为此时的img_url为空 所以就在父元素 加上。初次加载闪烁 然后在父元素添加了v-cloak。原创 2022-12-16 19:15:57 · 1897 阅读 · 0 评论 -
Vue写一个简单的倒计时按钮功能
<button class="button" @click="countDown"> {{content}}</button>data () { return { content: '发送验证码', totalTime: 10, canClick: true //添加canClick }} ... countDown () { if (!this.canClick) return //改动的是这两行代码 this.canClick =原创 2021-10-13 10:53:37 · 455 阅读 · 0 评论 -
vue + element 项目,表格多选状态如何禁选
**对elementUI中table表格的多选框进行 可勾选 和 不可勾选 的处理给 type 属性为 selection 的加一个事件:selectable='selected’**<el-table-column type="selection" width="55" :selectable="selected"> </el-table-column>methods中:判断后台给返回的状态码selected(row, index) { if (row.W..原创 2021-05-12 11:21:02 · 381 阅读 · 0 评论 -
h5的table表格边框线问题解决方案
1.你的表格是这样:2.也可能是这样的:3.然后你给td一个个进行设置border可能就有了下面的效果:4.上面是不是都挺丑的,可能尝试很多次改了很多次代码就是很丑,没事,下面是一种代码简便样式好看的效果:5.完整代码:<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">.t原创 2021-04-01 11:21:28 · 1721 阅读 · 0 评论 -
在前端查看PDF
1.在后台返回文件流的东东,前端这边要查看这里的PDF,前端就可以这样来写:在html中的代码:<iframe :src="hrefPDF" width="100%" height="600px"></iframe>首先要引入:import axios from 'axios'import { baseURL } from '@/common' //这个是封装请求的前缀统一地址const service = axios.create({ baseURL: baseUR.原创 2021-03-31 20:10:13 · 317 阅读 · 0 评论 -
vue中watch的使用
在vue中,使用watch来响应数据的变化。watch的用法大致有三种。下面代码是watch的一种简单的用法:<input type="text" v-model="cityName"/>new Vue({ el: '#root', data: { cityName: 'shanghai' }, watch: { cityName(newName, oldName) { // ... } }})直接写一个监听处理函数,当每次监听到原创 2021-03-22 19:22:39 · 115 阅读 · 0 评论 -
vue 为了防止按钮连续点击造成重复提交
<template> <button @click="submit()" :disabled="isDisable">点击</button></template><script> export default { name: 'TestButton', data: function () { return { isDisable: false } }, metho原创 2020-12-03 11:02:47 · 863 阅读 · 0 评论 -
element-UI 弹出组件的遮罩层在弹出层dialog模态框的上面 解决方法
关于element 里 Dialog 对话框 组件 遇到的问题element-UI 弹出组件的遮罩层在弹出层dialog模态框的上面造成的原因: 因为dialog的组件外层div设置了 position:absolute; 属性所以导致遮罩层会在最上面。解决方法: 1. 在属性内加上这段代码 :append-to-body=“true” ; 2 ,:modal-append-to-body=“false” 也可以...原创 2020-12-03 10:54:23 · 1935 阅读 · 0 评论 -
vue 表单阻止默认提交、回车操作
1.这个是在项目中遇到的问题:当在from中有一个输入框的时候就会有自动回车事件解决的办法:就是在这个from中添加两个input其中一个隐藏就好了,但这个方法就带来代码多余的问题。2.在vue中有这样的方法:@submit.native.prevent 阻止默认提交,添加在form标签上@keyup.native.enter 回车操作,添加在input标签上...原创 2020-11-26 11:27:31 · 2369 阅读 · 0 评论 -
vue屏蔽点击事件
思路如果不能点击就 return false://调用,table的方法,展开/折叠 行clickTable(row, column, cell, event){ if (column.label == '操作') { return false // 判断为"操作"栏的就不用展开table } else { this.$refs.refTable.toggleRowExpansion(row) }},就是这个操作,在点击整行是要展开的,但这样点原创 2020-11-20 11:14:36 · 3915 阅读 · 0 评论 -
element ui 表格设置单选按钮
1.单选按钮<el-table-column label="" width="50"> <template scope="scope"> <el-radio :label="scope.$index" v-model="radio" @change.native="getCurrentRow(scope.row)"></el-radio> <原创 2020-11-04 11:05:03 · 3261 阅读 · 0 评论 -
vue与elementUI实现基于vue-router的路由面包屑导航条功能
vue与elementUI实现基于vue-router的路由面包屑导航条功能1.需求描述:vue项目,在项目结构上通过与elementUI实现基于vue-router的路由面包屑导航条功能,这个功能的核心是vue-router,所以在前期路由文件的父子级代码一定要清晰,下面写一个demo,大家可以在此基础上根据实际情况自行拓展。要实现如下的效果:2.解决方案:第一步:是路由文件的配置(以下是测试数据),我这边的路由文件格式及相关代码如下:routes: [ { path原创 2020-10-21 20:42:02 · 1277 阅读 · 0 评论 -
vue-cli2.x + element-ui + typescript构建的初步项目
最近公司的项目使用了typescript 用的不是特别熟练 特此准备重头开始 搭建一个纯前端 管理系统页面 后续会将jsx 也集成进来1 、使用vue-cli 搭建vue init webpack vue-admin-masternpm run dev一个简单vue项目搭建成功2、引入typescriptts-loader typescript 必须安装npm install ts-loader typescript tslint tslint-loader tslint-config-s原创 2020-08-25 10:52:48 · 456 阅读 · 0 评论 -
(神奇的 ::v-deep):vue+elementUI中elementUI的默认样式修改的问题
<style scoped>.right-tabbox-newnotice /deep/.el-tabs__nav-wrap::after { position: static !important; }或者.right-tabbox-newnotice >>>.el-tabs__nav-wrap::after { position: static !important; }</style>/deep/.el-tabs_原创 2020-07-01 21:37:41 · 1269 阅读 · 0 评论 -
vue2中隐藏elementUI的某一个tab栏
需求: 是根据不同的表格数据显示不同的tab选项卡,让其他的不显示<template> <el-tabs v-model="activeName" @tab-click="handleClick" ref="tabs"> <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane> <el-tab-pane label="配置管理" name="second">配置管理&原创 2020-06-22 19:29:35 · 1467 阅读 · 4 评论 -
vue+elementUI中表格高亮或字体颜色改变
重点的代码::row-style="setRowStyle"这个属性就是在table标签绑定的:row-style="setRowStyle"setRowStyle(row) { if (row.row.isPart == true) { return 'color:blue;' } },具体代码:hmtl<el-table width="100%" :data="gridData" border fi原创 2020-05-09 11:24:41 · 3357 阅读 · 3 评论 -
前端对于断网的处理方法(js和vue)
在很多场景下,只有机器已经联网以后,web应用才能启动。如果没有联网,就会提示错误。、但是机器有时候要重启。 如果机器重启后,立刻启动web应用的话,可能,机器上的网络服务还没有准备好。方法一:navigator.onLine (HTML5属性)if (navigator.onLine) { //正常工作console.log('正常联网')} else { //执行离线状态时的任...原创 2020-04-01 09:21:58 · 6671 阅读 · 0 评论 -
Element-ui 中table 默认选中 toggleRowSelection
这个问题在我的项目中也遇到过,我之前的博文有提到,但现在还是单独写一下的比较好,废话不多先上效果图:说明:输入以后点击回车键就请求接口,然后查出相对应的这条数据并且前面勾上,代码: this.$refs.multipleTable1.toggleRowSelection(this.workorderData.find(d => d.workSheetCode === this.wor...原创 2020-03-30 16:07:44 · 677 阅读 · 0 评论 -
element ui 实现table序号递减和递增
1.element ui 实现table序号递减:listData.length-scope.$index - (pageNum-1)*pageSizelistData:是table表格的数据集合pageNum:当前页pageSize:当前显示数据条数2.element ui 实现table序号递增:(page - 1) * pageSize + scope.$index + 1 /...原创 2019-12-18 14:09:28 · 470 阅读 · 0 评论 -
在vue中实现单页面打印之cdn引入打印
虽然网上挺多的但我还喜欢自己的,先来看看原生javascript实现的打印上代码:1.要打印的东西2.预览打印 <!doctype html><html><head><meta charset="UTF-8"><title>Print.js 演示</title><style> html,...原创 2019-11-05 16:26:44 · 437 阅读 · 0 评论 -
【vue】vue使用Element组件时v-for循环里的表单项验证方法
需求是:在点击加号动态添加的,要在点击提交按钮的时候做校验,没值不能提交。HTML代码: <span @click="addRow" style="border-radius:4px;cursor:pointer;color:#fff;font-size:12px;display:inline-block;margin-top:8px;background:#409EFF;paddin...原创 2019-07-03 15:28:53 · 2890 阅读 · 0 评论 -
VUE+ElementUI实现table 行上下移动的效果
1.先看一下效果:在table中这样写就好了:<el-table-column align="center" label="移动操作" min-width="80"> <template slot-scope="scope"> <...原创 2019-11-01 14:18:07 · 1878 阅读 · 0 评论 -
vue+element中在table行中根据条件加上传按钮
先看效果图:这个效果就是这样,但难点是在表格的每条数据是循环出来的,那这样下载按钮就是重复的出现在表格中了。问题:当点击上传的时候那每个按钮旁边的上传名字都是一样的,而且这样点击预览的时候就是同一个文件了。这个问题也是困扰我好长时间最后解决了。我的代码判断比较多有时间了再整理,先在这边记录一下关键的地方代码:<input :id="'twoupload'+scope.$index...原创 2019-10-24 18:00:29 · 1592 阅读 · 0 评论 -
vue+elementUI组件table实现前端分页功能
这也是在做项目中遇到的现在把它记录一下:上代码:data="headeDataList.slice((pageNumHE-1)*pageSizeHE,pageNumHE*pageSizeHE)"//这个就是每页计算的要展示几条数据然后就是table数据的长度,在vue中你可以定义一个值在变量中然后取值,也可以这样写::total="headeDataList.length"最后就是分页...原创 2019-07-10 13:43:19 · 1244 阅读 · 0 评论 -
element table的行高设置和分页的设置的问题的总结
1.Q(问题):elementUI自带的table设置行高A(解决方法):修改el-table元素中row-style属性里的height :row-style="{height:'0'}" :cell-style="{padding:'0'}"<el-table :data="tableData" style="width: 100%" :row-style...原创 2019-07-31 15:21:06 · 2700 阅读 · 0 评论 -
实现element-ui中table点击一行展开
先上效果:三要素1、row-click 点击行2、ref 自行了解vue3、toggleRowExpansiontoggleRowExpansion() // 参数1是单击行的row,参数2是true 或者false<template> <el-table :data="tableData5" @row-click="clickTable" r...原创 2019-08-07 10:47:25 · 576 阅读 · 0 评论 -
vue-cli 全局组件的引入和 App.vue局部组件的引入方法区别
4,vue-cli 组件知识:4.1 全局注册组件先在main.js里这样写。 然后在App.vue里面 的template模板里 直接使用 <users></users>加载使用即可4.2局部组件引入方法 就是在App.vue里引入。...原创 2019-08-09 14:38:00 · 1238 阅读 · 0 评论 -
vue+elementui实现表头根据后台数据动态生成字段
有时需求涉及表头动态加载 ,肯定是涉及渲染了代码如: cols: [ { label: "节点编号", prop: "node", type: "normal" }, { label: "名称", prop: "name", type: "normal" }, { label: "类型", prop...原创 2019-08-07 16:30:17 · 2179 阅读 · 0 评论 -
vue+element做的穿梭框
先上效果图和需求:需求:效果图就是在这些了:HTML:<!DOCTYPE html><html><head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Tra...原创 2019-09-05 16:52:49 · 655 阅读 · 2 评论