第2、4列中使用的el-switch 可以正常工作,但后面的就无法正常工作了,点第6列的switch时,会导致第8列的switch一起更改状态,点第8列时同样也会导致第6列的switch状态一同更改。
但绑定的事件,是点击哪个switch就会触发哪个,并不会同时触发多列的switch。
给每个switch组件加了个id进行观查,通过浏览器控制台观查得知,第6/8列的switch组件id是相同的,但代码中写的却并不是相同的,至此基本找到了问题所在。
其实解决方法也很简单,绝大多数朋友都有使用过,就是添加key属性,只是这个属性平时并不常用,所以一直忽略了。
于是开始尝试给switch组件添加key,结果一样还是不行,后来给表格列添加key属性,测试成功。
<el-table-column :key="Math.random()" prop="status1" label="允许所有111" align="center" width="80">
<template slot-scope="scope">
<el-switch
v-model="scope.row.status1"
:active-value="0"
:inactive-value="1"
@change="changeStatus1(scope.row)"
>
</el-switch>
</template>
</el-table-column>
<el-table-column :key="Math.random()" prop="status2" label="允许所有222" align="center" width="80">
<template slot-scope="scope">
<el-switch
v-model="scope.row.status2"
:active-value="0"
:inactive-value="1"
@change="changeStatus2(scope.row)"
>
</el-switch>
</template>
</el-table-column>
至此问题解决,这个问题其实困扰了很久,另一个同事也一直没搞明白,直到今天又把这个东西推给我,网上搜了半天也没什么思路,无耐又来扒cdsn,看到一文章提及el-table-column :key应用,忽然想起曾经看教程时,讲师曾经提到过相关内容,于是才算是找到了一点头绪,按图索骥终将问题解决。