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

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，用法以下

<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的缩写是@

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