element table多选表格_VUE+elementUI表格多选框实现单选

要实现多选表格，需要在表格中添加一个列来显示多选框，然后在数据项中添加一个属性来表示该数据是否被选中。下面是一个示例代码：

<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="selection"></el-table-column>
      <el-table-column prop="name" label="Name"></el-table-column>
      <el-table-column prop="age" label="Age"></el-table-column>
      <el-table-column prop="address" label="Address"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'Tom', age: 18, address: 'Beijing', selected: false },
        { name: 'Jerry', age: 20, address: 'Shanghai', selected: false },
        { name: 'Lucy', age: 22, address: 'Guangzhou', selected: false },
        { name: 'John', age: 24, address: 'Shenzhen', selected: false },
      ],
    };
  },
};
</script>

在上面的代码中，我们为表格添加了一个 `type="selection"` 的列来显示多选框，然后在数据项中添加了一个 `selected` 属性来表示该数据是否被选中。

如果要实现单选功能，可以将 `type` 属性设置为 `radio`，并且只需要将 `selected` 属性改为表示当前选中的数据项即可。