vue 实现表格点击单选、多选
添加 ref属性名在表格上加@row-click单击事件。在表格上添加@selection-change方法。这个方法可以保证每次都是选择最后点击的那行。selection即为选中的多个数据的数组。
·
单选
添加 ref属性名 在表格上加@selection-change事件 在表格上加@row-click单击事件可以实现点击行单选
/** 单击选中行数据 */
clickRow(row) {
this.$refs.tb.toggleRowSelection(row)
},
userHandleSelectionChange(selection) {
// 单选
if (this.isSingle) {
this.checkUser = selection[0]
if (selection.length > 1) {
this.$refs.tb.clearSelection()
this.$refs.tb.toggleRowSelection(selection.pop())
}
} else {
this.checkUser = selection
}
},
这个方法可以保证每次都是选择最后点击的那行
多选
在表格上添加@selection-change方法
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.teamId)
this.single = selection.length !== 1
this.multiple = !selection.length
},
selection即为选中的多个数据的数组
、、、、、、、、、、、、、、、、、、、、、
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 = []
}
更多推荐
已为社区贡献1条内容
所有评论(0)