vue elementUI 关于表格的多选总结

前提:在做后台管理系统时,有好多有关表格的操作都需要用到多选框,经常用到的是elementUi中的Table,现在进行总结

示例图:

vue elementUI 关于表格的多选总结_第1张图片

总结:

1.在列表第一列添加多选框,按照组件一步步来,multipleSelection是存放选中数据的数组

vue elementUI 关于表格的多选总结_第2张图片

2.如果表格中有分页,需要在翻页的时候记住上一页面选中的数据

vue elementUI 关于表格的多选总结_第3张图片

vue elementUI 关于表格的多选总结_第4张图片

3.取消选中状态

(1)需要去掉某些行的选中状态(不是全部)

前提:

需要先用ref属性对DOM进行注册引用信息,这样就可以在vue中用$refs对Dom元素进行操作了

vue elementUI 关于表格的多选总结_第5张图片

使用方法:

this.$refs.multipleTable.toggleRowSelection(this.tableData[index], true)

(2)去掉表格中所有的选择状态(全部)

this.$refs.multipleTable.clearSelection()

 

你可能感兴趣的:(前端样式,前端框架)