el-table插件可以选择行,但是只能多选,而项目中有单选的需求。
效果如下图所示,点击行或者点击复选框都可以选中行(高亮,复选框选中),并且每次只选中当前行,之前选中的行清空。点击标题行的复选框则清空选中行。
el-table设置。
<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是自定义的一个数组,用于放置选中的行对象信息,以便在项目中其他地方使用。
/*** 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 = []
}
有问题评论区回复。。。。能解决的回复。。。。不能解决的自己百度哈。。。。。