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 相关文章推荐
为javascript添加String.Format方法
Aug 11 Javascript
javascript中的prototype属性使用说明(函数功能扩展)
Aug 16 Javascript
JS 面向对象之神奇的prototype
Feb 26 Javascript
基于JQuery实现的类似购物商城的购物车
Dec 06 Javascript
在ASP.NET中使用JavaScript脚本的方法
Nov 12 Javascript
模拟一个类似百度google的模糊搜索下拉列表
Apr 15 Javascript
原生javascript实现图片按钮切换
Jan 12 Javascript
javascript生成不重复的随机数
Jul 17 Javascript
jquery+CSS实现的水平布局多级网页菜单效果
Aug 24 Javascript
使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能
Mar 15 Javascript
vue 添加vux的代码讲解
Nov 30 Javascript
微信小程序bindtap事件与冒泡阻止详解
Aug 08 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操作文件方法问答
2007/03/16 PHP
PHP extract 将数组拆分成多个变量的函数
2010/06/30 PHP
PHP读取网页文件内容的实现代码(fopen,curl等)
2011/06/23 PHP
一个PHP的QRcode类与大家分享
2011/11/13 PHP
php MessagePack介绍
2013/10/06 PHP
将酷狗krc歌词解析并转换为lrc歌词php源码
2014/06/20 PHP
javascript instanceof 与typeof使用说明
2010/01/11 Javascript
javascript中关于执行环境的杂谈
2011/08/14 Javascript
JavaScript事件学习小结(三)js事件对象
2016/06/09 Javascript
Javascript基础学习笔记(菜鸟必看篇)
2016/07/22 Javascript
微信小程序实现折叠与展开文章功能
2018/06/12 Javascript
详解几十行代码实现一个vue的状态管理
2019/01/28 Javascript
聊聊Vue中provide/inject的应用详解
2019/11/10 Javascript
element实现合并单元格通用方法
2019/11/13 Javascript
稍微学一下Vue的数据响应式(Vue2及Vue3区别)
2019/11/21 Javascript
VUE使用 wx-open-launch-app 组件开发微信打开APP功能
2020/08/11 Javascript
Nuxt pages下不同的页面对应layout下的页面布局操作
2020/11/05 Javascript
Python中asyncore的用法实例
2014/09/29 Python
在Django的视图(View)外使用Session的方法
2015/07/23 Python
学习python 之编写简单乘法运算题
2016/02/27 Python
详解Django中六个常用的自定义装饰器
2018/07/04 Python
Django基础知识与基本应用入门教程
2018/07/20 Python
一篇文章彻底搞懂Python中可迭代(Iterable)、迭代器(Iterator)与生成器(Generator)的概念
2019/05/13 Python
python中提高pip install速度
2020/02/14 Python
windows下python 3.9 Numpy scipy和matlabplot的安装教程详解
2020/11/28 Python
用CSS3写的模仿iPhone中的返回按钮
2015/04/04 HTML / CSS
浅谈CSS3 box-sizing 属性 有趣的盒模型
2019/04/02 HTML / CSS
整理HTML5中表单的常用属性及新属性
2016/02/19 HTML / CSS
美国在线家居装饰店:Belle&June
2018/10/24 全球购物
自动化毕业生专业自荐书范文
2014/02/04 职场文书
小学生操行评语
2014/04/22 职场文书
学校安全教育月活动总结
2014/07/07 职场文书
2015中秋祝酒词
2015/08/12 职场文书
组织委员竞选稿
2015/11/21 职场文书
《赵州桥》教学反思
2016/02/17 职场文书
SpringCloud Alibaba 基本开发框架搭建过程
2021/06/13 Java/Android