iview中Table组件中表头使用selection时计算选中的数量以及总价格的注意事项

都没什么

于 2021-02-23 23:43:46 发布

阅读量1.1k

点赞数

分类专栏：笔记文章标签： javascript es6 vue.js

本文链接：https://blog.youkuaiyun.com/weixin_44960011/article/details/114005548

版权

笔记专栏收录该内容

17 篇文章

订阅专栏

本文介绍了如何在Vue的iview表格组件中启用多选功能，通过设置`type: 'selection'`来实现。重点讲解了`@on-select`、`@on-select-all`和`@on-selection-change`三个事件的使用，其中`@on-selection-change`在选中项变化时触发，适合实时更新选中数量。作者建议使用此方法来保持选中数量的准确性。同时，文章提到了如何将选中项存入数组，并通过computed属性计算总价。示例中，选中项被存储在`selectgood`数组中，然后计算总金额。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

iview表格组件中通过给 columns 数据设置一项，指定 type: ‘selection’，即可自动开启多选功能。
这里提供了3个方法
@on-select，选中某一项触发，返回值为 selection 和 row，分别为已选项和刚选择的项。
@on-select-all，点击全选时触发，返回值为 selection，已选项。
@on-selection-change，只要选中项发生变化时就会触发，返回值为 selection，已选项。
这里我用第3个方法时，选中几个就显示选中的数量有几个，但是用第一二个方法时，选中几个会显示选中的数量有几个，但是取消选中数量不会变，所以一般应该是用第三个方法，至于假如你表格中有价格，想计算总价的话，我一般是把选中的放在一个数组中，然后利用computed属性计算在这里插入图片描述
这里的selectgood是我在data里面声明的一个数组，然后把选中的东西赋值给这个数组，然后在copmputed里面计算总价，最后在需要的地方用这个totalAmount就可以