elementui表格中实现点击单个单元格触发事件

发布时间:2024年01月09日
<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://blog.csdn.net/m0_61265297/article/details/135479765
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。