<el-table
:data="sarAccessListDatas"
tooltip-effect="dark"
style="width: 100%"
border
height="100%"
:header-cell-style="{
background: '#f5f1f1',
color: '#333333',
fontSize: '16px',
fontWeight: 'bold',
height: '48px'}"
@row-click="rowClick"
@select="select"
@selection-change="selectListChange"
ref="detailedSelection"
>
<el-table>
<el-table-column
:selectable="selectEnableCeshi"
type="selection"
min-width="10%">
</el-table-column>
<script>
data(){
return(){
bill_id:""
}
},
methods:{
//方法一
// 表格某一行的单击事件
rowClick(row, column) {
const selectData = this.selectList
this.$refs.detailedSelection.clearSelection()
if( selectData.length === 1 ) {
selectData.forEach(item => {
// 判断 如果当前的一行被勾选, 再次点击的时候就会取消选中
if (item === row) {
this.$refs.detailedSelection.toggleRowSelection(row, false);
}
// 不然就让当前的一行勾选
else {
this.$refs.detailedSelection.toggleRowSelection(row, true);
}
})
}
else {
this.$refs.detailedSelection.toggleRowSelection(row, true);
}
},
//方法一
select(selection, row) {
// 清除 所有勾选项
this.$refs.detailedSelection.clearSelection()
// 当表格数据都没有被勾选的时候 就返回
// 主要用于将当前勾选的表格状态清除
if(selection.length === 0) return
this.$refs.detailedSelection.toggleRowSelection(row, true)
},
//方法一
//选择清单选择框改变
selectListChange(data) {
this.selectedList = [];
for (let i = 0; i < data.length; i++) {
this.selectedList.push(data[0]);
}
},
========================================================================================
//方法二
//selectEnableCeshi(row) {
//console.log(row);
//if (this.radioSelectCeshi == true) {
// return false;
//} else {
// return true;
//}
// },
select(selection, row){
this.bill_id = row.id;
// 清除 所有勾选项
this.$refs.multipleTable.clearSelection()
// 当表格数据都没有被勾选的时候 就返回
// 主要用于将当前勾选的表格状态清除
if(selection.length == 0) return
this.$refs.multipleTable.toggleRowSelection(row, true);
},
}
</script>
elementUI表格复选框只能选中一个
最新推荐文章于 2024-08-29 11:48:39 发布