- 需求:点击A页面的某处,跳转到B页面并选中B页面表格的某一行(点击B页面的搜索后需要清空默认选择的状态)
- 环境:vue2、element的table,table允许多选
- 知识点:主要使用到table的这两属性:
:row-key=""
和:reserve-selection="true
和表格的toggleRowSelection方法
,还有getList()的回调函数的使用就是getlList要有返回值,通知create里在getlis调取成功t后再做什么,不然渲染报错
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/5e6c048b876b6eb3308a425f127c0647.png)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/f0321591df132ab0c15d9c2adfbfc2f3.png)
- 代码
<el-table
:header-cell-style="{background:'#d0d0d0',color:'#000'}"
ref="reportmul"
:data="tableData"
style="width: 100%"
height="700"
@selection-change="handleSelectionChange"
@row-click="rowClick"
:row-style="rowStyle"
:row-class-name="rowClassName"
:row-key="getRowKeys"
>
<el-table-column type="selection" align="center" :reserve-selection="true"></el-table-column>
</el-table>
data() {
return{
searchVal:'',
multipleSelection:[],
tableData:[],
}
},
created(){
if(this.$route.params.input){
this.searchVal = this.$route.params.input
await this.getList().then(res=>{
this.multipleSelection[0] = this.tableData[0]
this.$refs.reportmul.toggleRowSelection(this.tableData[0],true)
})
}
this.getList()
},
methods: {
getList(obj={}){
return listgetpage(xxx).then(res=>{
this.tableData = res.data.result
})
},
onSearch(){
this.getList({input:this.searchVal}).then(()=>{
this.$refs.reportmul.clearSelection()
}
)
},
}