elementUI el-table中多列使用el-switch切换导致的问题

elementUI el-table中多列使用el-switch切换导致的问题_第1张图片

 第2、4列中使用的el-switch 可以正常工作,但后面的就无法正常工作了,点第6列的switch时,会导致第8列的switch一起更改状态,点第8列时同样也会导致第6列的switch状态一同更改。

但绑定的事件,是点击哪个switch就会触发哪个,并不会同时触发多列的switch。

给每个switch组件加了个id进行观查,通过浏览器控制台观查得知,第6/8列的switch组件id是相同的,但代码中写的却并不是相同的,至此基本找到了问题所在。

其实解决方法也很简单,绝大多数朋友都有使用过,就是添加key属性,只是这个属性平时并不常用,所以一直忽略了。

于是开始尝试给switch组件添加key,结果一样还是不行,后来给表格列添加key属性,测试成功。

            
              
            
            
              
            

至此问题解决,这个问题其实困扰了很久,另一个同事也一直没搞明白,直到今天又把这个东西推给我,网上搜了半天也没什么思路,无耐又来扒cdsn,看到一文章提及el-table-column :key应用,忽然想起曾经看教程时,讲师曾经提到过相关内容,于是才算是找到了一点头绪,按图索骥终将问题解决。

你可能感兴趣的:(前端脚本,elementui,javascript,前端)