element plus table表格复选框实现单选效果

前端登顶之巅–全方位为你梳理前端进阶之路、最全前端知识/面试点总结

分享一个使用比较久的

框架vue3 + vite4.4.2 + element plus；需求背景：数据列表展示内容-复选框支持单选；我们都知道element的table ui组件type = selection，是一个复选框多选的状态，要支持单选有多种方式选择，而我们的项目对列表组件进行了二次封装，不在是模版标签的书写；方案：1. 模版标签式的写法，添加Radio单选标签进行渲染单元格，通过数据层唯一字段控制；2. 控制原有的复选框让其变更成单选，不增加多余逻辑代码和循环。这里我们使用的是方案2，简单便捷

element plus table列表复选框支持单选操作视频

方案2实现过程：

// TableList是封装的组件-在trap-ui内，这块大家可以替换成element plus的table标签，实现逻辑js通用
<template>
	<TableList
      size="small"
      ref="multipleTableRefs"
      :is-footer-extend="false"
      :httpRequest="httpRequest"
      :columns="[]"
      @select="handleSelectClick"
      @selection-change="handleSelectionChange"
    />
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'

const multipleTableRefs = ref(null)

const selectionChecked = ref<string[]>([])

// 获取选中当前行数据
const handleSelectionChange = (checked) => {
  selectionChecked.value = checked
}

// 复选框点击触发动作，长度大于1，我们进行取前一个元素，并设置前一个元素的选中状态，那么当前的元素就是可选的一个状态了
const handleSelectClick = (selection) => {
  if (selection.length > 1) {
    const del_row = selection.shift()
    // toggleRowSelection属性的第二个元素接受的是一个选中状态的布尔值，false不选中，true选中；
   // 注意直接使用element的table没有.element；multipleTableRefs.value.toggleRowSelection(del_row, false)
    multipleTableRefs.value.element.toggleRowSelection(del_row, false)
  }
}
</script>