el-table实现点击行单选并隐藏全选框

el-table实现点击行单选并隐藏全选框

效果如下

使用vue2结合element-ui实现，隐藏el-table自带的全选框，并实现当点击行时，自动勾选复选框
el-table官网介绍

template部分

<el-tableref="bsTableRef"v-loading="grid.loading"borderstripe:data="tableData":height="400"@selection-change="handleSelectionChange"@current-change="handleCurrentChange"><el-table-column width="60" type="selection" align="center" /><!-- 其余table-column --></el-table>

关键点就在于设置两个自定义函数，以及设置某一列的type为selection

@selection-change="handleSelectionChange"
@current-change="handleCurrentChange"

css部分

//使用的scss
::v-deep {.el-table__header .el-checkbox {display: none !important;}
}

这样即可隐藏el-table-column的selection默认自带的全选框

js部分

data(){//存储当前被选中的行activeRow: null
},
methods:{// 点击复选框选择行handleSelectionChange(val) {if (val.length > 1) {//当多选时，先清空表格复选框选项，再选中最新选的this.$refs.bsTableRef.clearSelection()this.$refs.bsTableRef.toggleRowSelection(val[1])this.activeRow = val[1]} else if (val.length == 0) {//取消选择this.activeRow = null} else if (val.length == 1) {//只选了一行this.activeRow = val[0]}},//当前行变化时handleCurrentChange(row) {//点击某行时，也要对应设置复选框的选中状态this.activeRow = rowthis.$refs.bsTableRef.toggleRowSelection(row)},
}