eclipse的开发网站开发,商城网站建设步骤,石大网页设计与网站建设客观题,阳新网络推广公司表格实现多选
实现表格多选很简单#xff0c;只需要在表格里加上一列即可#xff0c;加完之后就会在表格里出现一列白色的四方块按钮#xff0c;可以多选#xff0c;也可以单选 el-table-columntypeselectionwidth55aligncenter只需要在表格里加上一列即可加完之后就会在表格里出现一列白色的四方块按钮可以多选也可以单选 el-table-columntypeselectionwidth55aligncenter那么如何获取选中的数据呢官方文档提供了三种钩子函数但是一个就可以满足需求了在表格设置中加上selection-change 这个事件其功能为只要选中的数据发生改变那么就会触发这个函数 el-table:datatableDatastylewidth: 100%; margin-top: 10px:bordertruev-loadingloadingselection-changehandleSelectionChange函数具体内容如下 handleSelectionChange(val) {// val拿到的是选中行的全部数据而this.multipleSelection是把val以对象装在数组中this.multipleSelection val;console.log(this.multipleSelection);// 每次都清空存储的数据并装入新数据this.SelectionList [];for (const val of this.multipleSelection) {for (const key in val) {if (key id) {this.SelectionList.push(val[key]);}}}// 在遍历之后转换为字符串因为这里后端要的值只有行id因此就全部转为字符串后发给后端this.ROWids this.SelectionList.toString();console.log(this.ROWids, this.ROWids);},//具体要什么值需要根据实际开发情况而定而该函数直接获取到所有选中行的所有数据就很nics想要什么就取什么就可以了。到这里为止就已经完成了多选以及获取选中的数据
val获取的值multipleSelection存储的值以及转化之后的ROWids字符串如下 实现不同页一起选中
之前所做的工作仅仅只能在当前页进行选中获取选中的数据而不能实现换页一起选中点击下一页之后之前选中的数据就丢失了。而为了解决这个问题那么就可以在表格的设置中添加row-keyid 属性以及在多选列中添加 :reserve-selectiontrue 即可其会实现存储功能让不同页之间也可以实现一起选中 el-table:datatableDatastylewidth: 100%; margin-top: 10px:bordertruerow-keyidv-loadingloadingselection-changehandleSelectionChangeel-table-columntypeselectionwidth55aligncenter:reserve-selectiontrue控制表格选中数据清空
截止上一步为止我们并没有实现通过代码清空选中行的功能而只能在页面中通过手动的方式去取消之前选中的行设想我已经完成了对所选行的操作例如查询导出等操作那么操作完成之后一定会再次请求接口刷新页面而选中的标志却并没有消失这就很影响用户体验
而可以这样进行解决我们只需要在表格的设置中添加 refmultipleTable 然后在想要清空选中数据的回调处如查询数据结束之后的回调在通过 this.$refs.multipleTable.clearSelection(); 即可完成清空选中数据的操作nics el-table:datatableDatarefmultipleTablestylewidth: 100%; margin-top: 10px:bordertruerow-keyidv-loadingloadingselection-changehandleSelectionChangejavascript代码 ReturnFace() {if (this.ROWids []) {this.$message({message: 未选中数据不予检测,type: warning,});} else {let data {ids: this.ROWids,};this.$confirm(是否进行人脸下发检测?, 提示, {confirmButtonText: 确定,cancelButtonText: 取消,type: warning,}).then(function () {return ReturnPeopFace(data);}).then(() {this.getList();this.msgSuccess(人脸下发检测成功);this.$refs.multipleTable.clearSelection();});}},表格实现一键选中所有数据
截止目前所做的工作实际上是可以实现同页、不同页多选一键选中当前页的所有行以及在自己想要的回调处清空自前选中的行
但是却并没有实现一键选中所有的数据这是为什么呢是因为当数据量比较多的时候数据会进行分页展示例如有30条数据每页在初始化时展示10条第二页甚至第三页数据其实是没有获取的该策略被称之为是懒加载可以大大缩短求情时间提升用户体验。只有点击第二页的时候才会获取第二页的数据进行展示。所以呢要想一键选中所有页的数据还需要做一些特殊的骚操作才行。
持续更新中…
