vue+elementui中table实现单选行功能

el-table插件可以选择行,但是只能多选,而项目中有单选的需求。

效果如下图所示,点击行或者点击复选框都可以选中行(高亮,复选框选中),并且每次只选中当前行,之前选中的行清空。点击标题行的复选框则清空选中行。

el-table设置。

html 复制代码
<el-table :data="proList"
          ref="tableRef"
          @row-click="rowClick"
          @select-all="selectAll"
          @select="(selection,row)=>rowClick(row)"
          height="calc(100vh - 120px)"
          :header-cell-style="{background:'#F5F9FB ',color:'#333'}"
          border>
    <el-table-column type="selection" width="50" align="center">
    </el-table-column>
    <el-table-column prop="id" label="项目id" align="center">
    </el-table-column>
    <el-table-column prop="projectName" label="项目名称" align="center">
    </el-table-column>
    <el-table-column prop="createTime" label="创建时间" align="center">
    </el-table-column>
</el-table>

函数。其中,selectedRows是自定义的一个数组,用于放置选中的行对象信息,以便在项目中其他地方使用。

javascript 复制代码
/**
 * table行点击事件
 */
rowClick(row, column, event) {
    this.selectedRows = []
    this.$refs.tableRef.clearSelection()
    this.selectedRows.push(row)
    this.$refs.tableRef.toggleRowSelection(row)
},

/**
 * 选择所有checkbox点击事件
 */
selectAll(selection) {
    this.$refs.tableRef.clearSelection();
    this.selectedRows = []
}

有问题评论区回复。。。。能解决的回复。。。。不能解决的自己百度哈。。。。。

相关推荐
岁月宁静4 小时前
深度定制:在 Vue 3.5 应用中集成流式 AI 写作助手的实践
前端·vue.js·人工智能
心易行者4 小时前
10天!前端用coze,后端用Trae IDE+Claude Code从0开始构建到平台上线
前端
saadiya~5 小时前
ECharts 实时数据平滑更新实践(含 WebSocket 模拟)
前端·javascript·echarts
fruge5 小时前
前端三驾马车(HTML/CSS/JS)核心概念深度解析
前端·css·html
百锦再5 小时前
Vue Scoped样式混淆问题详解与解决方案
java·前端·javascript·数据库·vue.js·学习·.net
烛阴5 小时前
Lua 模块的完整入门指南
前端·lua
Sheldon一蓑烟雨任平生5 小时前
Vue3 表单输入绑定
vue.js·vue3·v-model·vue3 表单输入绑定·表单输入绑定·input和change区别·vue3 双向数据绑定
浪里行舟6 小时前
国产OCR双雄对决?PaddleOCR-VL与DeepSeek-OCR全面解析
前端·后端
znhy@1236 小时前
CSS易忘属性
前端·css
瓜瓜怪兽亚6 小时前
前端基础知识---Ajax
前端·javascript·ajax