element表格内组件执行多次的原因以及解决方法

element表格内组件执行多次的原因以及解决方法

element的table表格里的不良项是我自己封装的一个下拉组件，这个组件一开始我是在created里调用的，每次都会执行两次，找了半天，翻找资料后发现是如果表格里使用了fixed的话，fixed会重新加载一遍，所以相当于是执行了两遍，性能消耗太大了啊。。。出现这个问题的起因是因为我这个组件还需要传一个参数给后端过滤数据，但是如果用户先新增表格行 再去选数据，数据就无法更新过滤。

解决方法

1.一开始我是把fixed去掉了，去掉fixed是可以解决触发多次的问题，但是不满足我的项目要求（ps:如果fixed没用的话，可以删掉处理）
2.我看了element文档，发现有visible-change这个属性（下拉框出现/隐藏时触发），然后我就将请求放在下拉框出现时，这样就完美解决了一打开页面触发多次、数据过滤不起作用的问题,这只是我的解决方法，有更好的方法欢迎大家提供指正！

// template
<el-select
    v-model="selected"
    v-bind="$attrs"
    :loading="loading"
    @change="change"
    @visible-change="handleCaseVisibleChange"
  >
    <el-option
      v-for="item in options"
      :key="item.id"
      :label="item.inspectionNo"
      :value="item.inspectionNo"
    >
      <el-row :gutter="20">
        <el-col :span="12">{{ item.inspectionNo }}</el-col>
        <el-col :span="12" class="text-right">{{ item.inspectionName }}</el-col>
      </el-row>
    </el-option>
  </el-select>


//script
// 下拉框显示/隐藏
    handleCaseVisibleChange(visible) {
      if (visible) {
        this.fetchCaseList()
      }
    }