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 = []
}

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

相关推荐
T^T尚3 小时前
uniapp H5上传图片前压缩
前端·javascript·uni-app
出逃日志4 小时前
JS的DOM操作和事件监听综合练习 (具备三种功能的轮播图案例)
开发语言·前端·javascript
XIE3924 小时前
如何开发一个脚手架
前端·javascript·git·npm·node.js·github
山猪打不过家猪4 小时前
React(五)——useContecxt/Reducer/useCallback/useRef/React.memo/useMemo
前端·javascript·react.js
前端青山4 小时前
React事件处理机制详解
开发语言·前端·javascript·react.js
科技D人生4 小时前
Vue.js 学习总结(14)—— Vue3 为什么推荐使用 ref 而不是 reactive
前端·vue.js·vue ref·vue ref 响应式·vue reactive
对卦卦上心4 小时前
React-useEffect的使用
前端·javascript·react.js
练习两年半的工程师4 小时前
React的基本知识:事件监听器、Props和State的区分、改变state的方法、使用回调函数改变state、使用三元运算符改变state
前端·javascript·react.js
啵咿傲4 小时前
在React中实践一些软件设计思想 ✅
前端·react.js·前端框架
GIS好难学5 小时前
《Vue零基础入门教程》第二课:搭建开发环境
前端·javascript·vue.js·ecmascript·gis·web