乐趣区

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 是函数,应该用 @,不能用:,这些细节在日常开发中要注意

退出移动版