<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: '上海市普陀區(qū)金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀區(qū)金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀區(qū)金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀區(qū)金沙江路 1516 弄'
          }],
     // 要展開的行，數(shù)值的元素是row的key值
     expands: []
         }
     },
     methods:{

      //在<table>里，我們已經(jīng)設(shè)置row的key值設(shè)置為每行數(shù)據(jù)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>

關(guān)鍵部分

template scope="scope">
? ? ? <div class="sub-body" @click="rePeoplemessageCard(scope.row.name)">{{ scope.row.name }}</div>
? ? </template>文章來源地址http://www.zghlxwxcb.cn/news/detail-815672.html

到了這里，關(guān)于elementui表格中實(shí)現(xiàn)點(diǎn)擊單個(gè)單元格觸發(fā)事件的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！