vue+element
关注
分享
扫一扫
vue的相关问题
温柔小生
You’ll never realize how strong you are until you have no other choice but to be strong<br>你永远都不会知道自己到底有多坚强，直到有一天你除了坚强别无选择。
展开
-
8.Vue------如何重新加载子组件key属性----vue知识积累
通过改变key属性的值，Vue会销毁旧组件并创建新组件，从而实现组件的重新加载。这种方法适用于需要完全重新渲染子组件，包括其内部状态和生命周期钩子的场景，特别是当子组件的数据或状态发生较大变化时。原创 2024-12-12 17:05:00 · 371 阅读 · 0 评论 -
7.Vue------$refs与$el详解 ------vue知识积累
refs 与 $elref (给元素或者子组件注册引用信息) 就像你要给元素设置样式，就需要先给元素设定一个 class 一样，同理，你想获取哪个元素的 DOM，就给这个元素先设定一个 ref，其实这里和 JS 中的 document.各种方法获取 DOM 差不多，不过 ref 是访问 VUE 虚拟出来的DOM，这样可以有效的减少性能消耗。原创 2024-12-12 16:18:39 · 665 阅读 · 0 评论 -
4.Vue-------this.$set()的使用和详细过程-------vue知识积累
可以解决Vue响应式系统的另一个限制，即无法检测到通过索引直接删除数组元素的变化。也是一个实例方法，用于从响应式对象中删除属性，并确保该操作也是响应式的。同理，执行删除操作时，对象或数组不更新时，可以使用this.$delete。方法，可以显式地告诉Vue，某个属性已经被删除，从而触发视图的更新。原创 2024-12-04 14:09:53 · 428 阅读 · 0 评论 -
vue------ :style 的几种使用方式------vue知识积累
在日常开发中:style的使用也是比较常见的：亲测有效。原创 2024-09-20 11:35:39 · 4100 阅读 · 1 评论 -
Vue+elementUI------实现自行分页的两种方法------vue项目积累
【代码】前端（Vue）实现自行分页的两种方法（记录一下）原创 2024-08-01 17:00:44 · 1111 阅读 · 0 评论 -
Vue+element-ui----- 修改loading加载样式---项目积累
加载功能，默认是全屏加载效果。原创 2024-05-06 16:11:33 · 2412 阅读 · 2 评论 -
vue插件 ------用html2canvas 截屏并下载图片至本地（重点兼容ie浏览器）-----项目积累
html2canvas要做IE浏览器兼容原创 2024-05-06 11:19:38 · 872 阅读 · 4 评论 -
vue+Echarts------ 仪表盘进度条颜色和样式修改----项目积累
*原创 2024-01-05 15:39:23 · 3147 阅读 · 0 评论 -
vue + elementui------ 项目表格多选根据状态来禁用---项目积累
这个是直接写在里面了不用再额外调用方法了。判断后台给返回的状态码。原创 2023-12-19 16:05:16 · 687 阅读 · 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 · 3703 阅读 · 0 评论 -
Vue+elementui------ el-pagination分页组件查询的时候当前页不更新----项目积累
2.做了一个判断以后就是在点查询按钮的时候让pageNum默认为就好了。1.在加的查询条件中，一般查询按钮是调的列表接口的方法。原创 2023-12-15 15:05:01 · 1201 阅读 · 0 评论 -
Element ui table展开行中，某些行需要展开，某些行不需要展开
【代码】Element ui table展开行中，某些行需要展开，某些行不需要展开。原创 2023-07-18 19:20:39 · 1394 阅读 · 2 评论 -
Vue的倒计时效果实现（element-ui）
就是简单的倒计时这个是基于elementUI做的。原创 2023-04-21 11:17:32 · 2844 阅读 · 0 评论 -
vue 中 给img图片添加动态路径 路径正确但是图片不显示问题
【代码】vue 中 给img图片添加动态路径 路径正确但是图片不显示问题。原创 2022-12-16 19:26:44 · 5600 阅读 · 2 评论 -
vue 悬浮可拖拽组件--可在屏幕上进行拖拽
【代码】vue 悬浮可拖拽组件--可在屏幕上进行拖拽。原创 2022-12-16 19:21:25 · 2157 阅读 · 0 评论 -
vue img标签图片加载时 闪烁
加载时 在图片正常显示之前还是会显示加载出错的默认图片。因为此时的img_url为空 所以就在父元素 加上。初次加载闪烁 然后在父元素添加了v-cloak。原创 2022-12-16 19:15:57 · 2152 阅读 · 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 · 479 阅读 · 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 · 412 阅读 · 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 · 1811 阅读 · 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 · 349 阅读 · 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 · 139 阅读 · 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 · 888 阅读 · 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 · 1996 阅读 · 0 评论 -
vue 表单阻止默认提交、回车操作
1.这个是在项目中遇到的问题:当在from中有一个输入框的时候就会有自动回车事件解决的办法：就是在这个from中添加两个input其中一个隐藏就好了，但这个方法就带来代码多余的问题。2.在vue中有这样的方法：@submit.native.prevent 阻止默认提交，添加在form标签上@keyup.native.enter 回车操作，添加在input标签上...原创 2020-11-26 11:27:31 · 2480 阅读 · 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 · 3988 阅读 · 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 · 3339 阅读 · 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 · 1324 阅读 · 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 · 496 阅读 · 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 · 1311 阅读 · 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 · 1521 阅读 · 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 · 3435 阅读 · 3 评论 -
前端对于断网的处理方法（js和vue）
在很多场景下，只有机器已经联网以后，web应用才能启动。如果没有联网，就会提示错误。、但是机器有时候要重启。 如果机器重启后，立刻启动web应用的话，可能，机器上的网络服务还没有准备好。方法一：navigator.onLine （HTML5属性）if (navigator.onLine) { //正常工作console.log('正常联网')} else { //执行离线状态时的任...原创 2020-04-01 09:21:58 · 7072 阅读 · 0 评论 -
Element-ui 中table 默认选中 toggleRowSelection
这个问题在我的项目中也遇到过，我之前的博文有提到，但现在还是单独写一下的比较好，废话不多先上效果图：说明：输入以后点击回车键就请求接口，然后查出相对应的这条数据并且前面勾上，代码： this.$refs.multipleTable1.toggleRowSelection(this.workorderData.find(d => d.workSheetCode === this.wor...原创 2020-03-30 16:07:44 · 749 阅读 · 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 · 492 阅读 · 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 · 491 阅读 · 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 · 2935 阅读 · 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 · 1955 阅读 · 0 评论 -
vue+element中在table行中根据条件加上传按钮
先看效果图：这个效果就是这样，但难点是在表格的每条数据是循环出来的，那这样下载按钮就是重复的出现在表格中了。问题：当点击上传的时候那每个按钮旁边的上传名字都是一样的，而且这样点击预览的时候就是同一个文件了。这个问题也是困扰我好长时间最后解决了。我的代码判断比较多有时间了再整理，先在这边记录一下关键的地方代码：<input :id="'twoupload'+scope.$index...原创 2019-10-24 18:00:29 · 1643 阅读 · 0 评论 -
vue+elementUI组件table实现前端分页功能
这也是在做项目中遇到的现在把它记录一下：上代码:data="headeDataList.slice((pageNumHE-1)*pageSizeHE,pageNumHE*pageSizeHE)"//这个就是每页计算的要展示几条数据然后就是table数据的长度，在vue中你可以定义一个值在变量中然后取值，也可以这样写：:total="headeDataList.length"最后就是分页...原创 2019-07-10 13:43:19 · 1273 阅读 · 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 · 2758 阅读 · 0 评论