el-table的多选框实现单选

可以设置 el-table 的 selectable 属性为 "multiple"，然后在 table-column 中的 type 属性设置为 "selection"，这样 el-table 就会展示出多选框，但是可以通过设置 select-on-click-row 属性为 true，实现单选的效果。

相关问题

el-table多选框实现单选

可以通过监听 el-table 的 @row-click 事件来实现 el-table 多选框的单选功能。具体步骤如下：

1.在 el-table 中添加 type="selection"，开启多选框功能。

2.在 el-table 中添加 @row-click="handleRowClick" 监听行点击事件。

3.在 methods 中添加 handleRowClick 方法，通过 $refs 获取到 el-table 的 selection 组件，然后将当前行的数据设置为选中项。

下面是示例代码：

<template>
  <el-table
    ref="table"
    :data="tableData"
    @row-click="handleRowClick"
    style="width: 100%">
    <el-table-column
      type="selection"
      width="55">
    </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-01-01',
        name: '张三',
        address: '北京市朝阳区'
      }, {
        date: '2021-01-02',
        name: '李四',
        address: '上海市浦东新区'
      }, {
        date: '2021-01-03',
        name: '王五',
        address: '广州市天河区'
      }],
      selection: []
    }
  },
  methods: {
    handleRowClick(row) {
      this.$refs.table.toggleRowSelection(row)
      this.selection = this.$refs.table.selection
    }
  }
}
</script>

在上面的代码中，我们通过监听 @row-click 事件来实现了 el-table 多选框的单选功能。在 handleRowClick 方法中，我们通过 $refs 获取到 el-table 的 selection 组件，然后将当前行的数据设置为选中项。最后，我们将选中的数据保存在 selection 变量中，以便后续使用。

el-table复选框设置单选

在 Element UI 中，可以通过 `type="selection"` 将一个列设置为复选框列，用于选择表格中的多个行。如果你想要设置单选，则可以通过以下步骤实现：

1. 将 `type="selection"` 的列去掉。
2. 在表格的 `data` 中添加一个属性，用于记录选中的行的 `id` 或其他唯一标识。
3. 在表格的 `row-click` 事件中，将当前行的 `id` 或其他唯一标识记录到 `data` 中，并取消其他行的选中状态。
4. 在表格的 `row-style` 中根据当前行的 `id` 或其他唯一标识判断是否选中，并设置选中状态的样式。

下面是一个示例代码：

<template>
  <el-table :data="tableData" row-key="id" @row-click="handleRowClick" :row-style="rowStyle">
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: '张三', age: 18 },
        { id: 2, name: '李四', age: 20 },
        { id: 3, name: '王五', age: 22 }
      ],
      selectedId: null
    };
  },
  methods: {
    handleRowClick(row) {
      this.selectedId = row.id;
    },
    rowStyle({ row }) {
      return {
        background: this.selectedId === row.id ? '#eef1f6' : ''
      };
    }
  }
};
</script>

在上面的代码中，我们通过 `handleRowClick` 方法记录当前选中的行，并在 `rowStyle` 中根据 `selectedId` 的值来设置选中状态的样式。注意，这里的 `rowStyle` 方法需要返回一个对象，对象中的 `row` 属性是当前行的数据。