vue中通过路由传参

表格默认选中事件失效:

方法:
setCurrent(row) {
   this.$refs.singleTable.setCurrentRow(row);
 },
在
created() {
    this.initDeviceList();
    this.initLeftTable();
}的方法 initLeftTable中需要写$nextTick,否则不生效
this.$nextTick(function(){
            // 如果不写在$nextTick中的话不默认选中第一行
this.scoreParent = this.leftTableList[0].evaluatConfigInfo ? JSON.parse(this.leftTableList[0].evaluatConfigInfo) : null;
this.setCurrent(this.leftTableList[0]);//每次更新了数据，触发这个函数即可。
this.$router.push({name: 'corroseIndex',query: { evaluatId: this.leftRowData.evaluatId, loopId:this.leftRowData.loopId }});
})

路由传参方法

handleClick(tab, event) {
 if (tab.name === 'corroseIndex') {
   this.$router.push({name: 'corroseIndex',query: { evaluatId: this.leftRowData.evaluatId, loopId:this.leftRowData.loopId }});
 } else if (tab.name === 'runSituation') {
   this.$router.push({name: 'runSituation',query: { evaluatId: this.leftRowData.evaluatId, loopId:this.leftRowData.loopId }});
 } else if (tab.name === 'selfAbility') {
   this.$router.push({name: 'corroseManage'});
 }
},
第三个tab是以组件的形式引入的,所以需要在点击的时候将路由切换到父级,否则会出现tab1的内容和组件一起渲染

在子页面中获取路由的参数

watch: {
    '$route': {
        handler: function(){
            this.parentEvaluatId = this.$route.query.evaluatId;
            this.parentLoopId = this.$route.query.loopId;
            this.initStandardTableList();
            this.initIndexsTableList();
        }
    }
},
通过watch来监听路由的变化,在子页面取路由参数,切记是this.$route,而不是this.$router
同时:如果不监听路由参数的变化,做页面重新渲染的话,当点击左侧表格的时候路由参数虽然变化,但是没法重新渲染页面

数组A中删除数组B中的相同的数据,重新组装数组

for (let i = 0; i < tableList.length; i++) {
   tableList.index = i;
  for(let j = 0; j < this.standardMediumCode.length;j++){
    if(tableList[tableList.index].mediumCode === this.standardMediumCode[j]){
        tableList.splice(tableList.index, 1);
        i = -1;
    }
  }
  // for (let itemCode of this.standardMediumCode) {
  //   if (tableList[i].mediumCode === itemCode) {
  //     tableList.splice(i, 1);
  //   }
  // }
};