Vue2 Element el-table多选表格控制选取的思路解读
前言
构建多选表格, 实现对监听选取状况, 获取当前选中项行数据, 获取当前所有选中项.
一、构建多选表格
构建DOM结构, 在表格el-table内加一个特殊列即可, 将列类型type属性设置为selection.
<el-table-column type="selection"> </el-table-column>
注意如果使用v-for指令生成表格, 不要将上面这段代码直接加在v-for里, 不然每行旁边都有一个选项列, 肯定是要分开的, 但是怎么分开的同时不拆表呢.
刚开始我尝试过这种方案, 使用一个div将需要遍历生成的列包裹, 在div上v-for遍历, 但el-table仍然是基于HTML表格的封装, 这就像往原生HTML表格的列外面套了div, 会直接破坏表格结构.
我差点就忘了这是Vue2…直接把div换成<template></template>就好.
<el-table-column type="selection" width="55">
</el-table-column>
<template v-for="(item, index) in billTableEvent">
<el-table-column
:prop="item.props"
:label="item.label"
:align="item.align"
:min-width="item.minwidth"
v-if="item.props === 'payAmt'"
:key="index"
>
<template slot-scope="scope">
{{ scope.row.payAmt }}
</template>
</el-table-column>
<el-table-column
:prop="item.props"
:label="item.label"
:align="item.align"
:min-width="item.minWidth"
:key="index"
v-else
>
</el-table-column>
</template>二、多选表的事件、方法
刚开始的时候, 我觉得要是将el-table提供的方法作为事件处理函数, 那我岂不是可以同时操作一堆表格参数, 会更简单些?
然后根本拿不到值…
如果将el-table的方法直接作为事件处理函数, 那么该事件处理函数会被直接判定为一个普通的事件处理函数, 并不能发挥到其应有的作用, 应当通过事件拿到el-table相关参数, 然后在合适的地方调用el-table提供的方法来协助达成目的.
获取参数例：
methods: {
handleSelectChange(selection) {
this.multipleSelection = selection;
console.log(selection); // [{...}, {...}]
},
handleSelectAll(selection) {
console.log(this.multipleSelection);
console.log(selection); // [{...}, {...}]
},
},el-table的事件处理函数内除了可以使用事件本身携带的参数, 还可以使用el-table的方法, 事实上这些el-table提供的方法可以在各种能调用函数的地方被调用, 并且它们各自接收固定的值作为参数,
举例官方的例子, 在表格外调用toggleSelection:
但由于使用这些方法需要接收固定的参数, 在el-table的事件处理函数里调用它们可能会更方便一些.
<div id="empty">
<el-table
ref="tableEBBA020M"
:data="billData"
@row-click="rowClick"
@selection-change="handleSelectChange"
>
<el-table-column
v-for="(item, index) in billTableEvent"
:prop="item.props"
:label="item.label"
:align="item.align"
:min-width="item.minwidth"
v-if="item.props === 'payAmt'"
:key="index"
>
<template slot-scope="scope">
{{ scope.row.payAmt }}
</template>
</el-table-column>
</el-table>
</div>然后自己起一个事件处理函数名(额…至少要和事件相关), 在这个事件处理函数里面调用el-table的方法.
methods: {
rowClick(row) { // 单选
this.$refs.tableEBBA020M.toggleRowSelection(row);
},
}不需要去考虑太复杂的事情, 比如设立一个变量每次选中就+1偶数时选中奇数取消什么的(已经开始难受了), 这些细化的事情Element已经帮忙做好了, 完成后会直接把结果给你, 也就是事件所携带的各种参数.
利用上面的方法拿到el-table的selection和row, 配合一些数组方法就已经可以完成大多数的多选表格控制.
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vue "...infinite update loop..."的问题解决，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-04-04
这篇文章主要为大家详细介绍了vue-pdf实现文件在线预览，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
这篇文章主要介绍了vue设置路由title，但刷新页面时title失效的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
vue-cli-service serve报错error:0308010C:digital enve
这篇文章主要介绍了vue-cli-service serve报错error:0308010C:digital envelope routines::unsupported的解决分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
Vue和ElementUI都是非常流行的前端开发框架,它们可以让我们更加便捷地开发前端应用,下面这篇文章主要给大家介绍了关于使用Vue+ElementUI动态生成面包屑导航的相关资料,需要的朋友可以参考下2023-05-05
本文主要介绍了Vuex 命名空间 namespaced的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-03-03
这篇文章主要为大家介绍了nextTick能否获取到最新dom原理解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
这篇文章主要介绍了vue登录页实现使用cookie记住7天密码功能的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-02-02
这篇文章主要介绍了elementUI同一页面展示多个Dialog的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-11-11
这篇文章主要介绍了vue3中Fragment特性的一个bug，需要留意的注意事项示例解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2024-01-01
最新评论