el-table 如何实现单击行选中复选框

在 `el-table` 中实现单击行选中复选框可以使用 `row-click` 事件和 `toggleRowSelection` 方法。具体实现步骤如下：

1. 给 `el-table` 添加 `@row-click` 事件监听器。

2. 在 `@row-click` 事件处理函数中调用 `toggleRowSelection` 方法来切换当前行的选中状态。

3. 在 `el-table-column` 中添加 `type="selection"` 属性来显示复选框列。

4. 如果需要默认选中某些行，可以在 `mounted` 钩子函数中调用 `toggleRowSelection` 方法来设置选中状态。

下面是一个示例代码：

<template>
  <el-table
    :data="tableData"
    @row-click="handleRowClick"
    style="width: 100%">
    <el-table-column
      type="selection"
      :selectable="selectable">
    </el-table-column>
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { date: '2021-10-01', name: '张三', address: '上海市' },
        { date: '2021-10-02', name: '李四', address: '北京市' },
        { date: '2021-10-03', name: '王五', address: '广州市' }
      ],
      selectedRows: []
    }
  },
  methods: {
    handleRowClick(row) {
      this.$refs.table.toggleRowSelection(row)
    },
    selectable(row) {
      return row.date !== '2021-10-02'
    }
  },
  mounted() {
    this.$refs.table.toggleRowSelection(this.tableData[0], true)
  }
}
</script>

在上面的代码中，我们在 `handleRowClick` 方法中调用了 `toggleRowSelection` 方法来切换行的选中状态。并且在 `selectable` 方法中设置了第二行不可选。在 `mounted` 钩子函数中默认选中了第一行。