vue+element获取el-table某行的下标,根据下标操作数组对象方式


Posted in Javascript onAugust 07, 2020

1.在vue中对数组中的某个对象进行操作时(替换、删除),都需要用到该对象在数组中的下标。

前端代码:

scope.$index :获取当前行的下标

scope.row:获取当前行的对象

vue+element获取el-table某行的下标,根据下标操作数组对象方式

效果图:

vue+element获取el-table某行的下标,根据下标操作数组对象方式

思路:通过点击事件将该对象在数组中的下标传递到方法中,然后对数组进行操作

vue+element获取el-table某行的下标,根据下标操作数组对象方式

即可根据下标删除数组中对应的对象。

补充知识:vue-element-upload 文件上传打开选择文件弹框前进行提示或操作

在项目中使用文件上传功能时,需求是不能直接弹出弹框,要先二次确认或进行提示。引申开来,即可在打开选择文件弹框之前,做一系列操作。

实现思路在基于element-upload组件的基础上,再加一个按钮,触发按钮后进行选择文件前的操作,操作完成后触发upload的选择文件。

具体效果:点击‘导入‘时,提示必选项。

vue+element获取el-table某行的下标,根据下标操作数组对象方式

具体实现:

1、新写一个‘导入'按钮,以定位的形式遮挡上传组件。这里是将element-upload进行了二次封装。

组件使用:

<div class="importBox">
   <el-button type="primary" icon="el-icon-upload2" class="box_btn" @click="onImport">导入</el-button>
   <ImportExcel ref="importFile" class="box_upload"@getImportFile='getImportFile'/>
</div>

组件定义:

<template>
 <el-upload
  class="upload-demo"
  ref="fileRefs"
  :action="action"
  :show-file-list="false"
  :accept="acctype"
  :limit="limit"
  :http-request="uploadFileRes"
  :before-upload="beforeAvatarUpload"
  >
  <el-button :loading="uploadLoading" type="primary" >导入</el-button>
 </el-upload>
</template>

2、点击‘导入'触发事件。

// 按钮-导入
  onImport() {
   // 可以先进行适合自己需求的操作,完成后再执行

this.$refs['importFile'].$refs['fileRefs'].$refs['upload-inner'].handleClick()触发选择文件
   this.$refs.searchForm.validate((valid) => {
    if (valid) {
     this.$refs['importFile'].$refs['fileRefs'].$refs['upload-inner'].handleClick()
    }
   })
  },

3、解析:

this.$refs['importFile'].$refs['fileRefs'].$refs['upload-inner'].handleClick()

通过ref逐层触发组件内按钮的handleClick事件,注意区分['importFile']、['fileRefs'],其中['upload-inner'] 是 ImportExcel 组件内部按钮的ref

可以将不同的ref在控制台打印出来,看具体内容。

总结:示例只是对选择文件前的表单进行校验,根据自己需求可以实现不同的文件选择前的处理。希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
TinyMCE 新增本地图片上传功能
Nov 05 Javascript
给jqGrid数据行添加修改和删除操作链接(之一)
Nov 04 Javascript
javascript实现2048游戏示例
May 04 Javascript
jquery实现的鼠标下拉滚动置顶效果
Jul 24 Javascript
解决jquery版本冲突的有效方法
Sep 02 Javascript
ECHO.js 纯javascript轻量级延迟加载的实例代码
May 24 Javascript
JavaScript计算值然后把值嵌入到html中的实现方法
Oct 29 Javascript
jquery实现点击页面回到顶部
Nov 23 Javascript
使用JavaScript保存文本文件到本地的两种方法
Jan 22 Javascript
原来JS还可以这样拆箱转换详解
Feb 01 Javascript
vuex实现购物车功能
Jun 28 Javascript
浅谈JavaScript作用域
Dec 06 Javascript
vue.js click点击事件获取当前元素对象的操作
Aug 07 #Javascript
Vue跨域请求问题解决方案过程解析
Aug 07 #Javascript
JQuery通过键盘控制键盘按下与松开触发事件
Aug 07 #jQuery
vue递归获取父元素的元素实例
Aug 07 #Javascript
在vue中使用Base64转码的案例
Aug 07 #Javascript
JavaScript代码模拟鼠标自动点击事件示例
Aug 07 #Javascript
使用JavaScript和MQTT开发物联网应用示例解析
Aug 07 #Javascript
You might like
PHP中json_encode、json_decode与serialize、unserialize的性能测试分析
2010/06/09 PHP
PHP优于Node.js的五大理由分享
2012/09/15 PHP
克隆一个新项目的快捷方式
2013/04/10 PHP
Thinkphp实现自动验证和自动完成
2015/12/19 PHP
Laravel学习教程之路由模块
2017/08/18 PHP
(function($){...})(jQuery)的意思
2010/07/22 Javascript
jquery关于图形报表的运用实现代码
2011/01/06 Javascript
JS实现下拉框的动态添加(附效果)
2013/04/03 Javascript
js 定时器setTimeout无法调用局部变量的解决办法
2013/11/28 Javascript
ExtJS中设置下拉列表框不可编辑的方法
2014/05/07 Javascript
百度地图自定义控件分享
2015/03/04 Javascript
浅谈利用JavaScript进行的DDoS攻击原理与防御
2015/06/04 Javascript
jQuery 如何给Carousel插件添加新的功能
2016/04/18 Javascript
如何使用Vuex+Vue.js构建单页应用
2016/10/27 Javascript
浅谈react.js 之 批量添加与删除功能
2017/04/17 Javascript
JS组件系列之MVVM组件构建自己的Vue组件
2017/04/28 Javascript
React Router v4 入坑指南(小结)
2018/04/08 Javascript
仿vue-cli搭建属于自己的脚手架的方法步骤
2019/04/17 Javascript
[48:00]完美世界DOTA2联赛循环赛 Forest vs Inki BO2第二场 11.04
2020/11/04 DOTA
Python获取DLL和EXE文件版本号的方法
2015/03/10 Python
编写自定义的Django模板加载器的简单示例
2015/07/21 Python
Django objects.all()、objects.get()与objects.filter()之间的区别介绍
2017/06/12 Python
Python设计模式之MVC模式简单示例
2018/01/10 Python
Python列表推导式、字典推导式与集合推导式用法实例分析
2018/02/07 Python
利用python 更新ssh 远程代码 操作远程服务器的实现代码
2018/02/08 Python
Python使用itchat 功能分析微信好友性别和位置
2019/08/05 Python
postman和python mock测试过程图解
2020/02/22 Python
Python 执行矩阵与线性代数运算
2020/08/01 Python
解决使用Pandas 读取超过65536行的Excel文件问题
2020/11/10 Python
css3实现一个div设置多张背景图片及background-image属性实例演示
2017/08/10 HTML / CSS
Joe Fresh官网:加拿大时尚品牌和零售连锁店
2016/11/30 全球购物
PatPat德国:妈妈的每日优惠
2019/10/02 全球购物
银行职员个人的工作自我评价
2014/02/15 职场文书
个人社会实践自我鉴定
2014/03/24 职场文书
幼儿学前班评语
2014/12/29 职场文书
计划生育工作总结2015
2015/04/03 职场文书