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 是函數，應該用@，不能用：，
這些細節在平常開發中要注意