elementui 表格数据如何设置按钮的 disabled 属性

Question

一个表格，每行都有一个按钮，点击这个按钮后，设置这个按钮的disabled 为true，怎么拿到当前所在行的button实例对象，并设置 disabled 属性。

Answer 1

利用slot插槽自定义列内容，这样就能获取到当前行的数据，然后按钮的disabled属性和当前行数据的disabled属性绑定，在点击按钮时修改当前行数据的disabled的属性就可以了。

以下代码是拿elementui官方代码稍微改了改的

<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"
          :disabled="scope.row.disabled"
          @click="handleClick(scope.row)">点击按钮置灰</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          disabled: false
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄',
          disabled: false
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
          disabled: false
        }]
      }
    },
    methods: {
      handleClick(row) {
        row.disabled = true
      }
    }
  }
</script>

Answer 2

codepen例子
如果你是指这样获取元素实例来更改的话是会有报错的，避免直接更改属性，若是父组件重新渲染会导致该属性会被覆盖。你应该在tableData每一项里定义一个属性来控制这一行的按钮是否禁用。

Answer 3

这样做确实可以但报错了，在tableData每一项里定义的话，这样好像不能动态地更新button的状态了。