需求:表格组件只可以同时选中一行,若已有某一行被选中,则再次点击其他行时,已选中的当前行变为未选中状态。
实现只可以选中一行
template
<el-table
height="94.8%"
ref="multipleTable1"
type="index"
border
style="width: 96%; border-bottom: 1px solid black"
:data="tableData1"
@select="select"
>
<el-table-column type="selection"></el-table-column>
<el-table-column
prop="sectionDataName"
sortable
label="名称"
></el-table-column>
<el-table-column
prop="sectionDataDescribe"
align="center"
sortable
label="数据描述"
></el-table-column>
</el-table>
methods
select(selection, row) {
this.timeData = row
if (selection.length > 1) {
let del_row = selection.shift()
this.$refs.multipleTable1.toggleRowSelection(del_row, false) // 用于多选表格,切换某一行的选中状态,如果使用了第二个参数,则是设置这一行选中与否(selected 为 true 则选中)
}
},
toggleRowSelection用法
实现无法表格左上角无选择框,无法进行全选
.el-table__header-wrapper .el-checkbox {
display: none;
}
为了防止项目中所有表格都无法进行全选,在当前样式前加一个表示当前页面的标识符,如下#sign
是我自己定义的id选择符
#sign .el-table__header-wrapper .el-checkbox {
display: none;
}
另外,style样式不能加人scoped等其他属性,直接写style就好
<style >
#sign.el-table__header-wrapper .el-checkbox {
display: none;
}
</style>