鍍金池/ 問答/HTML5  HTML/ element ui表格中如何獲取td對應的tr信息

element ui表格中如何獲取td對應的tr信息

在一個element UI的表格之中,如何在element ui表格中通過已點擊獲取的td拿到對應的tr信息?

回答
編輯回答
巫婆

element ui官方API已給出Demo,詳見:http://element-cn.eleme.io/#/...

通過Scoped slot可以獲取到row, column, $indexstoretable內部的狀態(tài)管理)的數(shù)據(jù),具體Demo如下:

<template>
  <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      label="日期"
      width="180">
      <template slot-scope="scope">
        <i class="el-icon-time"></i>
        <span style="margin-left: 10px">{{ scope.row.date }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="姓名"
      width="180">
      <template slot-scope="scope">
        <el-popover trigger="hover" placement="top">
          <p>姓名: {{ scope.row.name }}</p>
          <p>住址: {{ scope.row.address }}</p>
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.name }}</el-tag>
          </div>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">編輯</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">刪除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    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 弄'
        }]
      }
    },
    methods: {
      handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
      }
    }
  }
</script>

另外:
Table Eventsrow-click事件也可以獲取當前行數(shù)據(jù),詳見官方API

2017年7月7日 12:28
編輯回答
挽青絲

scope.$index,scope.$row都可以,也可以個人傳index參到方法里面,這個element-ui的API中都有提到

2018年4月14日 18:31