elementui表格中实现点击单个单元格触发事件-Toy模板网

这篇具有很好参考价值的文章主要介绍了elementui表格中实现点击单个单元格触发事件。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

<template>
  <el-table
  :data="tableData"
  style="width: 100%">
  <el-table-column
    prop="date"
    label="日期"
    width="180">
    <template scope="scope">
      <div class="sub-body" @click="rePeoplemessageCard(scope.row.date)">{{ scope.row.date }}</div>
    </template>

  </el-table-column>
  <el-table-column
    prop="name"
    label="姓名"
    width="180">
    <template scope="scope">
      <div class="sub-body" @click="rePeoplemessageCard(scope.row.name)">{{ scope.row.name }}</div>
    </template>
  </el-table-column>
  <el-table-column
    prop="address"
    label="地址">
    <template scope="scope">
      <div class="sub-body" @click="rePeoplemessageCard(scope.row.address)">{{ scope.row.address }}</div>
    </template>
  </el-table-column>
</el-table>
</template>


<script>
export default {
  name:'ONe',
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 弄'
          }],
     // 要展开的行，数值的元素是row的key值
     expands: []
         }
     },
     methods:{

      //在<table>里，我们已经设置row的key值设置为每行数据id：row-key="id"
        //  rowClick(row, column, cell, event) {
        //   console.log(event,'event')
        //   console.log(column,'column')
        //   console.log(row,'row')
        //   console.log(cell,'cell')
        //   console.log(column.label,'lable')
        //  // 如果你使用的eslint的话  需要加上：
        //  /* eslint no-extend-native: ["error", { "exceptions": ["Array"] }] */
        //     //  Array.prototype.remove = function (val) {
        //     //      let index = this.indexOf(val);
        //     //      if (index > -1) {
        //     //          this.splice(index, 1);
        //     //      }
        //     //  };
        //     //  if (this.expands.indexOf(row.id) < 0) {
        //     //      this.expands.push(row.id);
        //     //  } else {
        //     //      this.expands.remove(row.id);
        //     //  }
        //  },
         rePeoplemessageCard(i){
          console.log('i',i)
         }
     }
 }
</script>

<style>
  .demo-table-expand {
   font-size: 0;
  }
  .demo-table-expand label {
   width: 90px;
   color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
   margin-right: 0;
   margin-bottom: 0;
   width: 50%;
  }
  </style>

关键部分

template scope="scope">
<div class="sub-body" @click="rePeoplemessageCard(scope.row.name)">{{ scope.row.name }}</div>
</template>文章来源地址https://www.toymoban.com/news/detail-815672.html

到了这里，关于elementui表格中实现点击单个单元格触发事件的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！