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 相关文章推荐
js form 验证函数 当前比较流行的错误提示
Jun 23 Javascript
jQuery之end()和pushStack()使用介绍
Feb 07 Javascript
js判断字符长度及中英文数字等
Mar 19 Javascript
jQuery实现点击该行即可删除HTML表格行
Oct 17 Javascript
URL中“#” “?” &amp;“”号的作用浅析
Feb 04 Javascript
JavaScript正则表达式校验与递归函数实际应用实例解析
Aug 04 Javascript
jQuery 实现鼠标画框并对框内数据选中的实例代码
Aug 29 jQuery
使用 Node.js 模拟滑动拼图验证码操作的示例代码
Nov 02 Javascript
JS实现的倒计时恢复按钮点击功能【可用于协议阅读倒计时】
Apr 19 Javascript
webpack的 rquire.context用法实现工程自动化的方法
Feb 07 Javascript
vue 将多个过滤器封装到一个文件中的代码详解
Sep 05 Javascript
js实现随机点名
Jan 19 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 解决utf-8和gb2312编码转换问题
2010/03/18 PHP
thinkphp框架实现数据添加和显示功能
2016/06/29 PHP
详解thinkphp实现excel数据的导入导出(附完整案例)
2016/12/29 PHP
js实现的网站首页随机公告随机公告
2007/03/14 Javascript
XML+XSL 与 HTML 两种方案的结合
2007/04/22 Javascript
纯CSS打造的导航菜单(附jquery版)
2010/08/07 Javascript
jQuery toggleClass应用实例(附效果图)
2014/04/06 Javascript
javascript制作的网页侧边弹出框思路及实现代码
2014/05/21 Javascript
JS设置下拉列表框当前所选值的方法
2015/12/22 Javascript
无循环 JavaScript(map、reduce、filter和find)
2017/04/08 Javascript
JS库之Highlight.js的用法详解
2017/09/13 Javascript
node前端模板引擎Jade之标签的基本写法
2018/05/11 Javascript
解决vue-router在同一个路由下切换,取不到变化的路由参数问题
2018/09/01 Javascript
webpack打包非模块化js的方法
2018/10/24 Javascript
详解Vue中watch的详细用法
2018/11/28 Javascript
layui动态表头的实现代码
2019/08/22 Javascript
Node.js API详解之 zlib模块用法分析
2020/05/19 Javascript
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
2020/06/06 jQuery
[05:43]VG.R战队教练Mikasa专访:为目标从未停止战斗
2016/08/02 DOTA
Python程序员开发中常犯的10个错误
2014/07/07 Python
Python图片转换成矩阵,矩阵数据转换成图片的实例
2018/07/02 Python
用Pytorch训练CNN(数据集MNIST,使用GPU的方法)
2019/08/19 Python
Django后端分离 使用element-ui文件上传方式
2020/07/12 Python
python使用bs4爬取boss直聘静态页面
2020/10/10 Python
html5唤醒APP小记
2019/03/27 HTML / CSS
allbeauty美国:英国在线美容店
2019/03/11 全球购物
公司综合部的成员自我评价分享
2013/11/05 职场文书
施工班组长岗位职责
2014/01/05 职场文书
高三学生评语大全
2014/04/25 职场文书
超市开店计划书
2014/04/26 职场文书
公司优秀员工获奖感言
2014/08/14 职场文书
聘任证明怎么写
2015/03/02 职场文书
2016年圣诞节寄语(一句话)
2015/12/07 职场文书
涨工资申请书应该怎么写?
2019/07/08 职场文书
python自然语言处理之字典树知识总结
2021/04/25 Python
Node.js实现断点续传
2021/06/23 Javascript