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

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

前端代码：

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

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

效果图：

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

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

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

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

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

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

具体实现：

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在控制台打印出来，看具体内容。

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

赞 (0)

相关推荐

  • Vue实现动态添加或者删除对象和对象数组的操作方法

    添加核心代码如下: this.data.push({ type: [{ value: '选项1', label: 'in' }, { value: '选项3', label: 'out' }], value:[{ value: '选项1', label: 'CSV' }, { value: '选项3', label: 'TSV' }], parameter:'', default:'', description:'', isDelete:false, }); 删除核心代码如下: /*遍历数组,然

  • vue基本使用--refs获取组件或元素的实例

    说明:vm.$refs 一个对象,持有已注册过 ref 的所有子组件(或HTML元素) 使用:在 HTML元素 中,添加ref属性,然后在JS中通过vm.$refs.属性来获取 注意:如果获取的是一个子组件,那么通过ref就能获取到子组件中的data和methods 添加ref属性 <div id="app"> <h1 ref="h1Ele">这是H1</h1> <hello ref="ho">&l

  • Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)

    Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)

    1. 绑定元素 2. mounted生命周期 3. 实现思路 页面挂载完后,监听全局点击事件 获取当前点击的元素,根据需求获取当前元素本身的属性 判断当前点击元素与要隐藏的元素是否相同 当前点击元素与要隐藏的元素不相同则隐藏 4. 最终效果 接着看下vue实现点击目标元素外页面的其他地方隐藏弹窗 方法: 步骤1:给页面最外出的元素div加点击事件:@click="popShow = false". 步骤2:给点击目标元素加点击事件:@click="popShow = true

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

    1.在vue中对数组中的某个对象进行操作时(替换.删除),都需要用到该对象在数组中的下标. 前端代码: scope.$index :获取当前行的下标 scope.row:获取当前行的对象 效果图: 思路:通过点击事件将该对象在数组中的下标传递到方法中,然后对数组进行操作 即可根据下标删除数组中对应的对象. 补充知识:vue-element-upload 文件上传打开选择文件弹框前进行提示或操作 在项目中使用文件上传功能时,需求是不能直接弹出弹框,要先二次确认或进行提示.引申开来,即可在打开选择文

  • vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)

    mounted() { // 在mounted中监听表格scroll事件 this.$refs.scrollTable.addEventListener( 'scroll',(event) => { this.adjustTable(event); }); }, ...... // target中的属性很多,可以通过控制台查看--clientWidth可以获取除滚动条外的可视区域宽度 adjustTable(event) { this.clientWidth = event.target.cli

  • vue element 关闭当前tab 跳转到上一路由操作

    方法一 this.$store.dispatch('delVisitedViews', this.$route); this.$router.go(-1); 方法二 this.$store.state.tagsView.visitedViews.splice(this.$store.state.tagsView.visitedViews.findIndex(item => item.path === this.$route.path), 1) this.$router.push(this.$st

  • 在Vue 中获取下拉框的文本及选项值操作

    方法1: <!-- element表单组件 --> <el-form :model="ruleForm" label-position="right" ref="ruleForm" // 被ref 标记的 status-icon size="small" inline :rules="rules" label-width="150px" class="demo

  • vue深度优先遍历多层数组对象方式(相当于多棵树、三级树)

    目录 深度优先遍历多层数组对象 比如树结构是这样的 vue遍历包含数组的对象 请求来拿到后数据格式是下面这种 最终在html中这样遍历 深度优先遍历多层数组对象 这个方法如果是对于下面的三级树的话可以拿到爷爷Id,自己Id,父亲Id:其实如果想要拿到label的话就把data.id换成data.label就行了 function treeFindPath(tree, func, path = []) {         if (!tree) return []         for (cons

  • vue element 中的table动态渲染实现（动态表头）

    通过在vue中使用element的table表格,实现数据动态渲染,并且动态渲染表头.通过在父组件中引入子组件表格,然后向子组件传递表格数据和表头数据. 子组件table中template模板 <el-table :data="this.tableData" height="400px" max-height="400px" size="small" row-class-name="row" cell

  • Vue Element前端应用开发之获取后端数据

    Vue Element前端应用开发之获取后端数据

    概述 在前面随笔<循序渐进VUE+Element 前端应用开发之动态菜单和路由的关联处理>中介绍了在Vue + Element整合框架中,实现了动态菜单和动态路由的处理,从而可以根据用户角色对应的菜单实现本地路由的过滤和绑定,菜单顺利弄好了,就需要进一步开发页面功能了,本篇随笔介绍一个案例,通过获取后端数据后,进行产品信息页面的处理. 1.后端数据的获取处理 前后端的边界则非常清晰,前端可以在通过网络获取对应的JSON就可以构建前端的应用了. 我们通过Vue.config.js的配置信息,可以

  • 如何封装Vue Element的table表格组件

    如何封装Vue Element的table表格组件

    在封装Vue组件时,我依旧会交叉使用函数式组件的方式来实现.关于函数式组件,我们可以把它想像成组件里的一个函数,入参是渲染上下文(render context),返回值是渲染好的HTML(VNode).它比较适用于外层组件仅仅是对内层组件的一次逻辑封装,而渲染的模板结构变化扩展不多的情况,且它一定是无状态.无实例的,无状态就意味着它没有created.mounted.updated等Vue的生命周期函数,无实例就意味着它没有响应式数据data和this上下文. 我们先来一个简单的Vue函数式组件

  • 封装Vue Element的table表格组件的示例详解

    在封装Vue组件时,我依旧会交叉使用函数式组件的方式来实现.关于函数式组件,我们可以把它想像成组件里的一个函数,入参是渲染上下文(render context),返回值是渲染好的HTML(VNode).它比较适用于外层组件仅仅是对内层组件的一次逻辑封装,而渲染的模板结构变化扩展不多的情况,且它一定是无状态.无实例的,无状态就意味着它没有created.mounted.updated等Vue的生命周期函数,无实例就意味着它没有响应式数据data和this上下文. 我们先来一个简单的Vue函数式组件

  • Vue ELement Table技巧表格业务需求实战示例

    Vue ELement Table技巧表格业务需求实战示例

    目录 前言 常见业务 需求:合并行 思路分析 需求合并列 思路分析 前言 在我们日常开发中,表格业务基本是必不可少的,对于老手来说确实简单,家常便饭罢了,但是对于新手小白如何最快上手搞定需求呢?本文从思路开始着手,帮你快速搞定表格. 常见业务 需求:合并行 1. 合并条码一样的两行 2. 触摸高亮关闭,表格颜色重一点 思路分析 调取element Table的回调 通过给table传入span-method方法可以实现合并行或列,方法的参数是一个对象,里面包含当前行row.当前列column.当

随机推荐