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实现广告漂浮效果的小例子
Jul 02 Javascript
node.js中的querystring.parse方法使用说明
Dec 10 Javascript
js实现不提交表单获取单选按钮值的方法
Aug 21 Javascript
基于WebUploader的文件上传js插件
Aug 19 Javascript
JavaScript ES6中CLASS的使用详解
Nov 22 Javascript
JavaScript如何一次性展示几万条数据
Mar 30 Javascript
node.js基础知识小结
Feb 26 Javascript
JsChart组件使用详解
Mar 04 Javascript
layui2.0使用table+laypage实现真分页
Jul 27 Javascript
详解将微信小程序接口Promise化并使用async函数
Aug 05 Javascript
vue数据更新UI不刷新显示的解决办法
Aug 06 Javascript
jQuery实现回到顶部效果
Oct 19 jQuery
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数字格式化
2006/12/06 PHP
php 发送带附件邮件示例
2014/01/23 PHP
PHP多文件上传类实例
2015/03/07 PHP
PHP var关键字相关原理及使用实例解析
2020/07/11 PHP
JQuery 1.4 中的Ajax问题
2010/01/23 Javascript
javascript 正则替换 replace(regExp, function)用法
2010/05/22 Javascript
Javascript无阻塞加载具体方式
2013/06/28 Javascript
基于jquery异步传输json数据格式实例代码
2013/11/23 Javascript
js抽奖实现随机抽奖代码效果
2013/12/02 Javascript
jQuery提示插件alertify使用指南
2015/04/21 Javascript
Spring mvc 接收json对象
2015/12/10 Javascript
nodejs 的 session 简单使用
2016/06/06 NodeJs
详解vue之页面缓存问题(基于2.0)
2017/01/10 Javascript
Three.js的使用及绘制基础3D图形详解
2017/04/27 Javascript
ionic App问题总结系列之ionic点击系统返回键退出App
2017/08/19 Javascript
使用vuex缓存数据并优化自己的vuex-cache
2018/05/30 Javascript
layui(1.0.9)文件上传upload,前后端的实例代码
2019/09/26 Javascript
[02:39]DOTA2英雄基础教程 极限穿梭编织者
2013/12/05 DOTA
[01:30:55]VG vs Mineski Supermajor 败者组 BO3 第三场 6.6
2018/06/07 DOTA
[52:14]VG vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
python实现比较两段文本不同之处的方法
2015/05/30 Python
Python cookbook(数据结构与算法)通过公共键对字典列表排序算法示例
2018/03/15 Python
python+openCV利用摄像头实现人员活动检测
2019/06/22 Python
浅谈python图片处理Image和skimage的区别
2019/08/04 Python
Python检查 云备份进程是否正常运行代码实例
2019/08/22 Python
对python中assert、isinstance的用法详解
2019/11/27 Python
keras用auc做metrics以及早停实例
2020/07/02 Python
Python使用文件操作实现一个XX信息管理系统的示例
2020/07/02 Python
python实现自动打卡的示例代码
2020/10/10 Python
使用 css3 transform 属性来变换背景图的方法
2019/05/07 HTML / CSS
HTML5逐步分析实现拖放功能的方法
2020/09/30 HTML / CSS
美国林业供应商:Forestry Suppliers
2019/05/01 全球购物
澳大利亚游乐场设备品牌:Lifespan Kids
2019/05/24 全球购物
个人欠条范本
2015/07/03 职场文书
2016年庆“七一”主题党日活动总结
2016/04/05 职场文书
Python使用pandas导入csv文件内容的示例代码
2022/12/24 Python