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

71次阅读

共计 1946 个字符，预计需要花费 5 分钟才能阅读完成。

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