change event of El select

When we modify the El select value, the change event will be triggered, so we can change the value of the v-model, as shown below at the beginning of use

<el-table-column align="center" label="Machine platform">
   <template slot-scope="scope">
     <el-select
        clearable
        filterable
        no-data-text="No optional machine"
        placeholder="Please choose"
        :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>

But there will be a problem: we have multiple El select, only changing the value of one of them, but triggering all change events; or we have v-for generating many El select calling the same change function, at this time, all EL select will execute the change function once, which will bring us unexpected problems.

How to deal with this problem? The element UI documentation introduces us to another event: visible change, which is used as follows

<el-table-column align="center" label="Machine platform">
   <template slot-scope="scope">
     <el-select
        clearable
        filterable
        no-data-text="No optional machine"
        placeholder="Please choose"
        :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>

I thought it could be solved, but it didn't work. Suddenly I noticed: change, thought of using @ change, and tried to solve it.

<el-table-column align="center" label="Machine platform">
   <template slot-scope="scope">
     <el-select
        clearable
        filterable
        no-data-text="No optional machine"
        placeholder="Please choose"
        @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="Machine platform">
   <template slot-scope="scope">
     <el-select
        clearable
        filterable
        no-data-text="No optional machine"
        placeholder="Please choose"
        @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>

The abbreviation of v-bind is:, the abbreviation of v-on is@

Change and visible change are functions. You should use @, not:,
Pay attention to these details in daily development