【无标题】

el-table复选框实现单选和默认选中效果

// html
<el-table ref="singleTable" v-loading="loading" border :data="list" style="width: 100%" v-removeAriaHidden
  @select-all="selectAll" @select="rowSelect" @selection-change="selectionChange" >

	<el-table-column align="center" label="操作" width="100" type="selection" v-removeAriaHidden></el-table-column>
 	<el-table-column align="center" label="ID" width="100">
 		<template slot-scope="scope">{{ scope.row.id }}</template>
 	</el-table-column>
 	<el-table-column align="center" label="宝物名称">
    	<template slot-scope="scope">{{ scope.row.name }}</template>
 	</el-table-column>
</el-table>

//js
data(){
	return{
		loading: false,
        list: [],
		radioChecked: []
	}
},
methods:{
	selectAll() {
        this.$refs.singleTable.clearSelection();
      },
  
      rowSelect(selection, row) {
        this.$refs.singleTable.clearSelection();
        if (selection.length == 0) return;
        this.$refs.singleTable.toggleRowSelection(row, true); // 选中当前行
        this.radioChecked = []
        this.radioChecked[0] = row;
      },
  
      selectionChange(val) {
        console.log(val);
        // this.radioChecked = val;
        // console.log(this.radioChecked);
      },
}