Vue Element-ui table隐藏表头勾选框,多选框改单选框

在table中添加class = "table-style"

Vue Element-ui table隐藏表头勾选框,多选框改单选框_第1张图片

在style里添加 样式

.table-style /deep/ .el-table-column--selection.is-leaf .el-checkbox {
    display: none;
}

Vue Element-ui table隐藏表头勾选框,多选框改单选框_第2张图片

以上可以将table中表头的勾选框隐藏!!!

在table中添加事件   @select="selectCur"。

Vue Element-ui table隐藏表头勾选框,多选框改单选框_第3张图片

在methods中编写事件

selectCur(selection, row){
   console.log('selection, row',selection, row);
   this.$refs.multipleTable.clearSelection();
   if (selection.length == 0) return;
   this.$refs.multipleTable.toggleRowSelection(row, true);
},

Vue Element-ui table隐藏表头勾选框,多选框改单选框_第4张图片

以上就是将table的多选改成单选!!!

前端小白,纯手搓。

如果对各位有用,请点赞,谢谢激励。

 

 

你可能感兴趣的:(基础篇,Vue,前端,elementui,vue)