vue+elementui实现点击table中的单元格触发事件--弹框


Posted in Javascript onJuly 18, 2020

elementui中提供了点击行处理事件

查看位置: elementui的table事件

elementui的table中怎样点击某个单元格触发事件?

可以先看一下官网中table的自定义列模板代码

<template>
 <el-table
  :data="tableData"
  border
  style="width: 100%">
  <el-table-column
   label="日期"
   width="180">
   <template scope="scope">
    <el-icon name="time"></el-icon>
    <span style="margin-left: 10px">{{ scope.row.date }}</span>
   </template>
  </el-table-column>
  <el-table-column
   label="姓名"
   width="180">
   <template scope="scope">
    <el-popover trigger="hover" placement="top">
     <p>姓名: {{ scope.row.name }}</p>
     <p>住址: {{ scope.row.address }}</p>
     <div slot="reference" class="name-wrapper">
      <el-tag>{{ scope.row.name }}</el-tag>
     </div>
    </el-popover>
   </template>
  </el-table-column>
  <el-table-column label="操作">
   <template scope="scope">
    <el-button
     size="small"
     @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
    <el-button
     size="small"
     type="danger"
     @click="handleDelete(scope.$index, scope.row)">删除</el-button>
   </template>
  </el-table-column>
 </el-table>
</template>
 
<script>
 export default {
  data() {
   return {
    tableData: [{
     date: '2016-05-02',
     name: '王小虎',
     address: '上海市普陀区金沙江路 1518 弄'
    }, {
     date: '2016-05-04',
     name: '王小虎',
     address: '上海市普陀区金沙江路 1517 弄'
    }, {
     date: '2016-05-01',
     name: '王小虎',
     address: '上海市普陀区金沙江路 1519 弄'
    }, {
     date: '2016-05-03',
     name: '王小虎',
     address: '上海市普陀区金沙江路 1516 弄'
    }]
   }
  },
  methods: {
   handleEdit(index, row) {
    console.log(index, row);
   },
   handleDelete(index, row) {
    console.log(index, row);
   }
  }
 }
</script>

点击单元格弹出框可以使用template-scope方式实现

父组件

<el-table
  :data="tableData"
  border
  style="width: 100%">
  <el-table-column
   label="编号"
   prop = "number"
   width="180">
   <template scope="scope">
    <div style="color:red;text-decoration:underline;cursor:pointer;" @click="getMore(scope.row)">{{ scope.row.date }}</div>
   </template>
  </el-table-column>
  <el-table-column
   label="名称"
   prop = "name"
   width="180">
   <template scope="scope">
    <div style="color:red;text-decoration:underline;cursor:pointer;" @click="getMore2(scope.row)">{{ scope.row.date }}</div>
   </template>
  </el-table-column>
</el-table>
 
<el-dialog :visible-sync="getA">
  <my-component :rowaa=row></my-component>
</el-dialog>
<el-dialog :visible-sync="getB">
  <my-component2 :rowaa=row></my-component2>
</el-dialog>
 
<script>
  import myComponent from './mycomponent'
  import myComponent2 form './mycomponent2'
  export default {
    data() {
       return {
        tableData : [
          {"number" : 1,"name":"y"},
          {"number" : 2,"name":"x"},
        ],
        getA : false,
        getB : false,
        row : ''
      } 
    },
    components: {
     'my-component' : myComponent,
      'my-component2' : myComponent2 
    },
    methods : {
      getMore(row) {
        this.getA = true
        this.row = row
      },
      getMore2(row) {
        this.getB = true
        this.row = row
      }
    }
  }
</script>

子组件 mycomponent

<div>{{formData}}</div>
 
<script>
export default {
  props: ['rowaa'],
  data() {
    return {
      formData:''
    }
  },
  created() {
   this.getData() 
  },
  watch : {
    'rowaa' : 'getData'
  },
  methods: {
    getData() {
      //从后台获取数据逻辑 model.CacheModel.get('api/' + this.rowaa + '.json')
      //通过this.rowaa就可以获取传过来的值
      this.formData = 333
    }
  }
}
</script>

问题解决

可以使用template+slot插值进行管理

点击找到当前行的信息,然后再根据该信息在子组件中请求数据

也试过通过点击行的事件,判断在哪一个单元格然后处理事件,这样也可以,但如果在表格中列存放的内容发生变化又得重新调整

也试过dialog弹出框直接写在当前单元格的template中,就像官网中例子一样,但是这样会在点击时触发多次(次数与当前页展示的数量一致)

补充知识:element cell-click使用方法

我就废话不多说了,大家还是直接看代码吧~

<el-table width="100%" border :data="Datalist" @cell-click="handle" >

methods: {
	handle(row,column,event,cell) {
	  console.log(row)
	  console.log(column)
	  console.log(event)
	  console.log(cell)
  }
}

以上这篇vue+elementui实现点击table中的单元格触发事件--弹框就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js获取url参数代码实例分享(JS操作URL)
Dec 13 Javascript
jQuery中wrapInner()方法用法实例
Jan 16 Javascript
js中利用tagname和id获取元素的方法
Jan 03 Javascript
AngularJS控制器controller正确的通信的方法
Jan 25 Javascript
JS判断iframe是否加载完成的方法
Aug 03 Javascript
JavaScript中闭包之浅析解读(必看篇)
Aug 25 Javascript
node+koa实现数据mock接口的方法
Sep 20 Javascript
npm配置国内镜像资源+淘宝镜像的方法
Sep 07 Javascript
JS监听滚动和id自动定位滚动
Dec 18 Javascript
自定义Vue中的v-module双向绑定的实现
Apr 17 Javascript
Vue图片浏览组件v-viewer用法分析【支持旋转、缩放、翻转等操作】
Nov 04 Javascript
vue-cli3项目打包后自动化部署到服务器的方法
Sep 16 Javascript
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
Jul 18 #Javascript
vue element table中自定义一些input的验证操作
Jul 18 #Javascript
vue cli4.0项目引入typescript的方法
Jul 17 #Javascript
js实现省级联动(数据结构优化)
Jul 17 #Javascript
Vue如何基于vue-i18n实现多国语言兼容
Jul 17 #Javascript
jquery实现有过渡效果的tab切换
Jul 17 #jQuery
使用Vue-cli 中为单独页面设置背景图片铺满全屏
Jul 17 #Javascript
You might like
php date与gmdate的获取日期的区别
2010/02/08 PHP
phpExcel导出大量数据出现内存溢出错误的解决方法
2013/02/28 PHP
解析如何通过PHP函数获取当前运行的环境 来进行判断执行逻辑(小技巧)
2013/06/25 PHP
PH P5.2至5.5、5.6的新增功能详解
2014/07/14 PHP
浅析php工厂模式
2014/11/25 PHP
php版微信返回用户text输入的方法
2016/11/14 PHP
PHP流Streams、包装器wrapper概念与用法实例详解
2017/11/17 PHP
基于pthread_create,readlink,getpid等函数的学习与总结
2013/07/17 Javascript
使用GruntJS构建Web程序之安装篇
2014/06/04 Javascript
js调试系列 初识控制台
2014/06/18 Javascript
node.js平台下利用cookie实现记住密码登陆(Express+Ejs+Mysql)
2017/04/26 Javascript
JavaScript数据类型和变量_动力节点Java学院整理
2017/06/26 Javascript
jQuery EasyUI 选项卡面板tabs的使用实例讲解
2017/12/25 jQuery
Vue学习之组件用法实例详解
2020/01/06 Javascript
基于JS判断对象是否是数组
2020/01/10 Javascript
javascript canvas检测小球碰撞
2020/04/17 Javascript
微信小程序之高德地图多点路线规划过程示例详解
2021/01/18 Javascript
[01:09:16]DOTA2-DPC中国联赛 正赛 SAG vs Dynasty BO3 第一场 1月25日
2021/03/11 DOTA
Python实现list反转实例汇总
2014/11/11 Python
实践Python的爬虫框架Scrapy来抓取豆瓣电影TOP250
2016/01/20 Python
python 性能提升的几种方法
2016/07/15 Python
Python随机生成数据后插入到PostgreSQL
2016/07/28 Python
python爬虫框架scrapy实现模拟登录操作示例
2018/08/02 Python
python selenium实现发送带附件的邮件代码实例
2019/12/10 Python
python GUI库图形界面开发之PyQt5表单布局控件QFormLayout详细使用方法与实例
2020/03/06 Python
5 分钟读懂Python 中的 Hook 钩子函数
2020/12/09 Python
介绍一下MD5加密算法
2016/11/12 面试题
蓝颜请假条
2014/04/11 职场文书
计算机专业自荐信
2014/05/24 职场文书
开发房地产协议书
2014/09/14 职场文书
党的群众路线教育实践活动总结材料
2014/10/30 职场文书
初三英语教学计划
2015/01/23 职场文书
自我推荐信格式模板
2015/03/24 职场文书
pytorch中的numel函数用法说明
2021/05/13 Python
BCL经典机 SONY ICF-5900W电路分析
2022/04/24 无线电
winserver2019安装软件一直卡在应用程序正在为首次使用做准备
2022/06/10 Servers