工作日记（十五）：完整项目开发之前端vue遗留小问题与修复

2020.7.27

今天继续完善前端vue。

小问题与修复过程如下：

1.使用<el-tooltip>实现鼠标移动到文本标签时，显示详情框

代码如下：

<el-table-column label="人群分类" min-width='2' align="center">
  <template slot-scope="{row}">
    <el-tooltip class="item" effect="dark" :content="peopleAllType" placement="top" v-if="row.peopleType == '全部'">
      <span>{{row.peopleType}}</span>
    </el-tooltip>
    <span v-if="row.peopleType != '全部'">{{row.peopleType}}</span>
  </template>
</el-table-column>

说明：

●这段代码是table标签中的一列，如果内容不为“全部”，则正常显示；如果内容为“全部”，则除了显示“全部”二字以外，当鼠标移动到这一列时，显示详情框，详情框的内容对应js中的【peopleAllType】变量。

 

2.添加活动与修改活动时，列表table没有自动刷新的问题

在dialog中添加与修改活动后，增加回参；页面根据回参判断是否调用刷新页面的方法。

代码如下：

backFunction(value){
  this.isShow = false;
  if(value){
    
    setTimeout( () => {
      this.getList();
      
    },1.5*1000 )
  
  }
}

说明：

●这段代码是根据参数判断是否需要刷新页面；经过测试，【setTimeout()】这个方法是必须的，如果在“新建/修改活动”后直接就调用，会导致查询到的列表中没有新数据（应该是insert或update数据库有延迟），增加setTimeout、1.5秒后再刷新活动列表就没有问题了。