vue elementUI 使用el-select 时 change触发的问题解决带来的关于vue中：和@的区别

2019年9月15日 166次阅读 来源: 一舧

el-select 的change事件

当我们在修改el-select值的时候，会触发change事件，因此可以改变v-model的值，一开始使用的时候就像下面这样

<el-table-column align="center" label="机台">
   <template slot-scope="scope">
     <el-select
        clearable
        filterable
        no-data-text="无可选机床"
        placeholder="请选择"
        :change="changeValue"
        v-model="scope.row.machineTools[0].id"
     >
        <el-option
          :key="item.id"
          :label="item.machineToolName+'('+item.coding+')'"
          :value="item.id"
          v-for="item in scope.row.availableMachineTools"
         ></el-option>
    </el-select>
  </template>
</el-table-column>

但是会出现一个问题：我们有多个el-select，只是改变了其中一个el-select的值，但是会触发所有的change事件；或者我们是v-for生成了很多个调用同一个change函数的el-select，这时所有的el-select都会执行一遍change函数，这会给我们带来意想不到的问题。

那怎么处理这个问题呢？elementUI文档给我们介绍了另一个事件：visible-change，用法如下

《vue elementUI 使用el-select 时 change触发的问题解决带来的关于vue中：和@的区别》

<el-table-column align="center" label="机台">
   <template slot-scope="scope">
     <el-select
        clearable
        filterable
        no-data-text="无可选机床"
        placeholder="请选择"
        :visible-change="changeValue"
        v-model="scope.row.machineTools[0].id"
     >
        <el-option
          :key="item.id"
          :label="item.machineToolName+'('+item.coding+')'"
          :value="item.id"
          v-for="item in scope.row.availableMachineTools"
         ></el-option>
    </el-select>
  </template>
</el-table-column>

我以为可以解决，但是并没有用，突然我注意到:chang，想到了应该用@change，一试果然解决了。

<el-table-column align="center" label="机台">
   <template slot-scope="scope">
     <el-select
        clearable
        filterable
        no-data-text="无可选机床"
        placeholder="请选择"
        @visible-change="changeValue"
        v-model="scope.row.machineTools[0].id"
     >
        <el-option
          :key="item.id"
          :label="item.machineToolName+'('+item.coding+')'"
          :value="item.id"
          v-for="item in scope.row.availableMachineTools"
         ></el-option>
    </el-select>
  </template>
</el-table-column>
<el-table-column align="center" label="机台">
   <template slot-scope="scope">
     <el-select
        clearable
        filterable
        no-data-text="无可选机床"
        placeholder="请选择"
        @change="changeValue"
        v-model="scope.row.machineTools[0].id"
     >
        <el-option
          :key="item.id"
          :label="item.machineToolName+'('+item.coding+')'"
          :value="item.id"
          v-for="item in scope.row.availableMachineTools"
         ></el-option>
    </el-select>
  </template>
</el-table-column>

v-bind的缩写是：，v-on的缩写是@

《vue elementUI 使用el-select 时 change触发的问题解决带来的关于vue中：和@的区别》

change和visble-change 是函数，应该用@，不能用：，
这些细节在日常开发中要注意

    原文作者：一舧
    原文地址: https://segmentfault.com/a/1190000018616289
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞