1、html页面
2、获取数据展示复选框
3、回显默认选中数据
<el-table ref="outputTab" :data="outputList" style="width: 100%;" border @selection-change="handleSelectChange" >
<el-table-column type="selection" width="55" align="center"/>
<el-table-column prop="No" align="center" label="单号"></el-table-column>
</el-table>
<script>
export default {
data() {
return {
tableradio:'',
No:''
}
}
created() {
//返回结果后,页面加载成功后,再调用默认选中事件,否则报错
setTimeout(() => {
this.getRowClass(this.tableradio)
}, 100)
},
//数据回显
getRowClass(rowIndex){
if(rowIndex){
let id= parseInt(rowIndex);
this.outputList.forEach(x =>{
if (x.id == id) {
this.$nextTick(() =>{
this.$refs.outputTab.toggleRowSelection(x);
});
}
})
}
},
//获取数据并选中
handleSelectChange(selection) {
this.tableradio = selection.map(e=>e.id )
if (selection.length > 1) {
this.$refs.outputTab.clearSelection();
this.$refs.outputTab.toggleRowSelection(selection.pop());
}
},
}