elementPlus表格组件el-table实现只能同时选择一行，全选按第一行处理

目录

需求背景：

具体实现：

模板代码：

函数处理代码：

代码讲解：

---

需求背景：

点击表格最左侧的复选框列，选中当前表格行，而且只允许选择一行，选中一行后，其他行自动禁用。若点击全选，则默认选择表格第一行。

具体实现：

模板代码：

        <el-table
          :data="allTest"
          style="width: 100%;"
          @selection-change="handleSelectionChange1"
        >
          <el-table-column type="selection" width="85" :selectable="handleSelectable" />
          <el-table-column property="topicName" label="测试试题" width="250" />
          <el-table-column property="sum" label="题目总数" width="250" />
        </el-table>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogFormVisible1 = false">取消</el-button>
            <el-button type="primary" @click="SelectionTopic">
              确认
            </el-button>
          </span>
        </template>

函数处理代码：

<script lang="ts" setup>
import { reactive, ref, watch } from 'vue'
import { ElMessage } from 'element-plus'

interface Topic {
  topicName: string
  sum: number
}

const allTest: Topic[] = [
  {
    topicName: '抑郁程度测试A版',
    sum: 50,
  },
  {
    topicName: '抑郁程度测试B版',
    sum: 30,
  },
  {
    topicName: '抑郁程度测试C版',
    sum: 70,
  },
  {
    topicName: '心理健康测试A版',
    sum: 40,
  },
  {
    topicName: '心理健康测试B版',
    sum: 55,
  },
]

// 记录选中的试题
const selectedRow = ref<Topic | null>(null)
// 最后确定的试题
const Selection1 = ref<Topic>()
// 监听表格变化
function handleSelectionChange1(val: Topic[]) {
  if (val.length > 0) {
    selectedRow.value = val[0]
  }
  else {
    selectedRow.value = null
  }
}
// 通过判断 selectedRow.value 是否为 null 或者与当前行的 topicName 相等来确定是否可以选中该行
function handleSelectable(row: Topic) {
  return selectedRow.value === null || selectedRow.value.topicName === row.topicName
}
function SelectionTopic() {
  // 判断 selectedRow.value 是否存在来确定是否有选中的行。如果存在我们将这个选中的行数据赋值给 Selection1.value，以便在其他地方可以使用该值
  if (selectedRow.value) {
    Selection1.value = selectedRow.value
    dialogFormVisible1.value = false
  }
  else {
    ElMessage.warning('请选择试题！')
  }
}
</script>

代码讲解：

• selectedRow 是一个用于记录选中的试题的引用。在 handleSelectionChange1 方法中，通过监听表格的选中事件，当选中的行发生变化时，将选中的第一行赋值给 selectedRow.value。
• handleSelectable 方法用于判断是否可以选中某一行。如果没有选中任何行，则所有行都可选，否则只有与当前选中行的 topicName 相同的行可选。（为了禁用其他行）
• SelectionTopic 方法是确认按钮的点击事件处理函数。在该方法中，首先判断 selectedRow.value 是否存在，即是否有选中的行。如果存在，则将选中的行数据赋值给 Selection1.value，并关闭对话框或表单（通过 dialogFormVisible1.value = false）。如果不存在选中的行，则弹出提示窗“请选择试题！”（通过使用 Element Plus 的 Message 组件）。