element table的问题

Question

多选框table 想实现两个效果
1、点击选中一个选择框时获取当前row的数据，也就是这个选择框所在这一行的数据
2、选中之后禁用当前选择框
看了关于的文档，没找到解决办法table数据是一个数组里面多个对象 每个对象都有一个id

<el-table :data="clientList"
      @selection-change="handleSelectionInspertorChange"
      ref="queryResultClientsTable">
    <el-table-column type="selection" :selectable="isSelectable" align="center"></el-table-column>
    <el-table-column prop="trueName" label="姓名" align="center"></el-table-column>
    <el-table-column prop="trueName" label="年龄" align="center"></el-table-column>
</el-table>### 问题描述

问题出现的环境背景及自己尝试过哪些方法

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

你期待的结果是什么？实际看到的错误信息又是什么？

Answer 1

你可以通过给表格加入 @select 事件进行监听。

<template>
  <el-table ref="multipleTable" :data="tableData3" @select="selectData">
    <el-table-column type="selection" width="55">
    </el-table-column>
    <el-table-column label="日期" width="120">
      <template slot-scope="scope">{{ scope.row.date }}</template>
    </el-table-column>
    <el-table-column prop="name" label="姓名" width="120">
    </el-table-column>
    <el-table-column prop="address" label="地址" show-overflow-tooltip>
    </el-table-column>
  </el-table>
  <div style="margin-top: 20px">
    <el-button @click="toggleSelection([tableData3[1], tableData3[2]])">切换第二、第三行的选中状态</el-button>
    <el-button @click="toggleSelection()">取消选择</el-button>
  </div>
</template>

export defalut {
  ...
  methods : {
    selectData(selection, row){
      console.log(selection, row);
      // doSomething...
    }
  }
}

在doSomething的地方加入你的逻辑代码就可以了

Answer 2

https://jsfiddle.net/e9xywkjb/ 是不是这种效果？