el-table单选表格

el-table 是一个基于 Element UI 的表格组件，支持单选、多选、排序、筛选等功能。要实现 el-table 的单选功能，需要在表格中添加一个 type 为 selection 的列，并设置 selectable 属性为 true。同时，需要在 el-table 上绑定 @selection-change 事件，当用户选择某一行时，会触发该事件，可以通过该事件获取到用户选择的行数据。

以下是一个简单的 el-table 单选表格示例：

<template>
  <el-table :data="tableData" @selection-change="handleSelectionChange">
    <el-table-column type="selection" :selectable="row => row.status === 'published'"></el-table-column>
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
    <el-table-column prop="status" label="状态"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 18, status: 'published' },
        { name: '李四', age: 20, status: 'draft' },
        { name: '王五', age: 22, status: 'published' },
        { name: '赵六', age: 24, status: 'draft' }
      ],
      selectedRow: null
    }
  },
  methods: {
    handleSelectionChange(rows) {
      this.selectedRow = rows[0] || null
    }
  }
}
</script>

在上面的示例中，我们定义了一个 tableData 数组作为表格的数据源，其中每个元素包含 name、age 和 status 三个属性。我们在 el-table 中添加了一个 type 为 selection 的列，并设置 selectable 属性为 true，这样就可以让用户选择某一行。同时，我们在 el-table 上绑定了 @selection-change 事件，当用户选择某一行时，会触发该事件，我们通过该事件获取到用户选择的行数据，并将其保存在 selectedRow 变量中。