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>

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-01-12 18:42:01       91 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-01-12 18:42:01       97 阅读
  3. 在Django里面运行非项目文件

    2024-01-12 18:42:01       78 阅读
  4. Python语言-面向对象

    2024-01-12 18:42:01       88 阅读

热门阅读

  1. 《微信小程序开发从入门到实战》学习七十九

    2024-01-12 18:42:01       56 阅读
  2. typescript递归数据结构的定义和处理

    2024-01-12 18:42:01       64 阅读
  3. Could not erase files or folders:

    2024-01-12 18:42:01       52 阅读
  4. umi + monorepo实践

    2024-01-12 18:42:01       48 阅读
  5. [蓝桥杯2022初赛] 星期计算

    2024-01-12 18:42:01       67 阅读