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 相关文章推荐
HTML中不支持静态Expando的元素的问题
Mar 08 Javascript
javascript中this做事件参数相关问题解答
Mar 17 Javascript
IE6中链接A的href为javascript协议时不在当前页面跳转
Jun 05 Javascript
Javascript中typeof 用法小结
May 12 Javascript
jquery实现可自动收缩的TAB网页选项卡代码
Sep 06 Javascript
JavaScript实现横向滑出的多级菜单效果
Oct 09 Javascript
Javascript中JSON数据分组优化实践及JS操作JSON总结
Dec 22 Javascript
基于Vue的ajax公共方法(详解)
Jan 20 Javascript
详解vantUI框架在vue项目中的应用踩坑
Dec 06 Javascript
详解使用angular框架离线你的应用(pwa指南)
Jan 31 Javascript
原生js实现贪食蛇小游戏的思路详解
Nov 26 Javascript
js验证账户名是否重复
May 26 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
讲解WordPress中用于获取评论模板和搜索表单的PHP函数
2015/12/28 PHP
在TP5数据库中四个字段实现无限分类的示例
2019/10/18 PHP
JavaScript 学习笔记之操作符(续)
2015/01/14 Javascript
jQuery中DOM操作实例分析
2015/01/23 Javascript
javascript实现百度地图鼠标滑动事件显示、隐藏
2015/04/02 Javascript
JavaScript实现的encode64加密算法实例分析
2015/04/15 Javascript
jquery+CSS3实现淘宝移动网页菜单效果
2015/08/31 Javascript
js随机生成26个大小写字母
2016/02/12 Javascript
详解jQuery UI库中文本输入自动补全功能的用法
2016/04/23 Javascript
JavaScript希尔排序、快速排序、归并排序算法
2016/05/08 Javascript
javascript 闭包详解及简单实例应用
2016/12/31 Javascript
JS+html5制作简单音乐播放器
2020/09/13 Javascript
Vuex之理解Getters的用法实例
2017/04/19 Javascript
JavaScript常见继承模式实例小结
2019/01/11 Javascript
layer.open弹层查看缩略图的原图,自适应大小的实例
2019/09/05 Javascript
layer.confirm点击第一个按钮关闭弹出框的方法
2019/09/09 Javascript
node创建Vue项目步骤详解
2020/03/06 Javascript
vue利用全局导航守卫作登录后跳转到未登录前指定页面的实例代码
2020/05/19 Javascript
解决python matplotlib imshow无法显示的问题
2018/05/24 Python
Python散点图与折线图绘制过程解析
2019/11/30 Python
Python 实现递归法解决迷宫问题的示例代码
2020/01/12 Python
python检查目录文件权限并修改目录文件权限的操作
2020/03/11 Python
Selenium 滚动页面至元素可见的方法
2020/03/18 Python
Python基于mediainfo批量重命名图片文件
2020/12/29 Python
python利用后缀表达式实现计算器功能
2021/02/22 Python
维多利亚的秘密官方旗舰店:VICTORIA’S SECRET
2018/04/02 全球购物
化工专业应届生求职信
2013/11/08 职场文书
物理研修随笔感言
2014/02/14 职场文书
保安部任务及岗位职责
2014/02/25 职场文书
安全责任书范本
2014/04/15 职场文书
代办委托书怎么写
2014/08/01 职场文书
单位婚育证明范本
2014/11/21 职场文书
事业单位财务人员岗位职责
2015/04/14 职场文书
2016年感恩教师节校园广播稿
2015/12/18 职场文书
「魔导具师妲莉亚永不妥协~从今天开始的自由职人生活~」1、2卷发售宣传CM公开
2022/03/21 日漫
《艾尔登法环》Boss腐烂树灵很有可能是《黑暗之魂3》的一个废案
2022/04/11 其他游戏