使用element-ui的表格,点击某个单元格@cell-click="",获取到该单元格的对应的id

1,486 阅读1分钟

效果

代码

<el-table
  :data="tableData"
  stripe
  style="width: 100%;"
  @cell-click="open"
  >

    <el-table-column
      prop="id"
      label="课程名称"
      width="200"
      style="text-align:center;">
      <template slot-scope="scope">
        {{ scope.row.name }}
      </template>
    </el-table-column>

</el-table>

data中的代码

tableData: [{
          id: 3333,
          name: '大学体育'
        }, {
          id: 37484,
          name: '高等数学'
        }, {
          id: 23478982374,
          name: '数据结构与算法'
        }, {
          id: 7732497,
          name: '算法分析'
        }]

方法里的代码

open(row, column, cell, event){
  this.$message({
    showClose: true,
    message: '恭喜你' + row[column.property],
    type: 'success'
  });
}

需要注意的几个点