东莞网站建设seo,广州 flash 网站,网站登陆界面模板,成都程序员培训机构table选择多行数据 功能介绍#xff1a; 1.列表分页功能#xff1b; 2.一键全选#xff0c;选中列表所有数据#xff1b; 3.全选#xff0c;选中当前页数据#xff1b; 4.重置#xff0c;清除选中状态#xff1b; 5.列表搜索查询#xff1b; 效果#xff1a; 1.列表分…table选择多行数据 功能介绍 1.列表分页功能 2.一键全选选中列表所有数据 3.全选选中当前页数据 4.重置清除选中状态 5.列表搜索查询 效果 1.列表分页功能
!-- 新建发送 船载终端 列表数据 --
el-table :datanewShipTableData refnewShipTableData border highlight-current-row element-loading-text拼命加载中stylewidth: 100%;height:auto; :header-cell-style{textAlign: center,background:#fafafa}:cell-style{ textAlign: center } selection-changenewShipSelectionChange :row-keyshipRowKeyel-table-column typeselection :reserve-selectiontrue width55 :selectablenewShipCheckSelectable/el-table-columnel-table-column propshipName label船舶名称/el-table-columnel-table-column proptype label船舶类型template slot-scopescope{{scope.row.type 1?集装箱:散货}}/template/el-table-columnel-table-column propmmsi labelMMSI/el-table-columnel-table-column proptonnage label船舶吨位(t)/el-table-columnel-table-column propdraft label吃水(m)/el-table-columnel-table-column proplocation label最后定位港口/el-table-columnel-table-column propshipStatus label空船期template slot-scopescope{{scope.row.shipStatus 0?是:否}}/template/el-table-column
/el-table
!-- 新建发送 船载终端 分页 --
el-row classaicel-col :span6 classpt20!--一键全选/重置按钮--el-checkbox label一键全选 v-modelnewShipCheckAll changenewShipCheck border/el-checkboxel-button clicknewShipResetCheck classml20重置/el-button/el-colel-pagination background size-changenewShipSizeChange current-changenewShipCurrentChange:current-pagenewCreatShipPagination.page :page-sizes[5, 10, 15, 20,25]:page-sizenewCreatShipPagination.pageSize layouttotal, sizes, prev, pager, next, jumper:totalnewCreatShipPagination.total/el-pagination
/el-row 注意事项 实现多选非常简单: 手动添加一个el-table-column设type属性为selection即可默认情况下若内容过多会折行显示若需要单行显示可以使用show-overflow-tooltip属性它接受一个Boolean为true时多余的内容会在 hover 时以 tooltip 的形式显示出来。 接口数据获取
// 新建 -- 船载终端 -- 获取表格数据getPushShipPageFun() {this.newShipRuleForm.pageNum this.newCreatShipPagination.page;this.newShipRuleForm.pageSize this.newCreatShipPagination.pageSize;getPushShipPage(this.newShipRuleForm).then(res {if (res.code 200) {// this.$refs.newShipRuleForm.resetFields();//清除console.log(res, 新建 -- 船载终端 -- 分页列表);this.newShipTableData res.data.records;this.newCreatShipPagination.total res.data.total;} else {this.$message.error(数据加载失败,请稍后再试);}}).catch(err {console.log(err);});},
分页切换跳转 // 新建 -- 船载终端 -- 选择一页几条数据newShipSizeChange(val) {this.newCreatShipPagination.pageSize val;this.newCreatShipPagination.page 1;this.getPushShipPageFun();},// 新建 -- 船载终端 -- 选择第几页newShipCurrentChange(val) {this.newCreatShipPagination.page val;this.getPushShipPageFun();},
2.一键全选、全选
点击一键全选是选中全部的数据
具体实现
el-col :span6 classpt20!--一键全选/重置按钮--el-checkbox label一键全选 v-modelnewShipCheckAll changenewShipCheck border/el-checkboxel-button clicknewShipResetCheck classml20重置/el-button
/el-col
//data定义newShipCheckAll:false,//船载终端
watch监听newShipTableData数据
watch: {// 分页全选-监听穿在终端表格数据变化 -- (点击了全选后--翻页仍然选中)newShipTableData: {handler(value) {if (this.newShipCheckAll) {this.newShipTableData.forEach(row {if (row) {this.$refs.newShipTableData.toggleRowSelection(row, true);}});}},deep: true},
} selection-change 当选择项发生变化时会触发该事件 // 新建 -- 船载终端 -- 全选回调newShipSelectionChange(val) {// val表示当前选择行的 item 对象信息,全选为选中的所有 item 的数组集合console.log(val, 终端全选/反选val);this.shipSelection val;// 选择船载终端的 集合this.shipMmsiList this.shipSelection.map(item {return {mmsi: item.mmsi,longitude:item.longitude,latitude:item.latitude,location:item.location }});// this.shipMmsiList this.distinct(this.shipMmsiList);console.log(this.shipMmsiList, 选择船舶的mmsi集合);if (val.length this.newShipLength) {this.newShipCheckAll true;} else if (val.length 0) {this.newShipCheckAll false;}},
// 新建 -- 终端 --列表选择框 -- 翻页保留选中状态shipRowKey(row) {return row.shipId;console.log(row.shipId, 打印row.shipId);}, selectable 仅对 typeselection 的列有效类型为 FunctionFunction 的返回值用来决定这一行的 CheckBox 是否可以勾选 // 船载终端全选-全选时禁用选择框newShipCheckSelectable(row, index){return !this.newShipCheckAll;}, 一键全选功能逻辑处理 toggleRowSelection 用于多选表格切换某一行的选中状态如果使用了第二个参数则是设置这一行选中与否selected 为 true 则选中 clearSelection 用于多选表格清空用户的选择 // 一键全选newShipCheck(){//请求 终端 列表数据this.getPushShipPageFun();if (this.newShipCheckAll) {this.newShipTableData.forEach(row {if (row) {this.$refs.newShipTableData.toggleRowSelection(row, true);}});} else {this.$refs.newShipTableData.clearSelection();}},
3.重置 // 船载终端重置newShipResetCheck(){this.$refs.newShipTableData.clearSelection();},
4.列表搜索查询
el-col :span8div classgrid-content bg-purple-lightel-form-itemel-button typeprimary clicknewShipSubmitForm(newShipRuleForm)查询/el-buttonel-button clicknewShipResetForm(newShipRuleForm)重置/el-button/el-form-item/div
/el-col
查询
// 新建 -- 终端 -- 查询newShipSubmitForm(newShipRuleForm) {if(this.newShipRuleForm.minTonnagethis.newShipRuleForm.maxTonnage){if(parseFloat(this.newShipRuleForm.minTonnage)parseFloat(this.newShipRuleForm.maxTonnage)){this.$message.warning(船舶吨位错误);return;}}this.$refs[newShipRuleForm].validate(valid {if (valid) {this.newCreatShipPagination.page 1;this.getPushShipPageFun();} else {console.log(error submit!!);return false;}});},
重置 // 新建 -- 终端 -- 重置newShipResetForm(newShipRuleForm) {this.shipMmsiList [];this.shipSelection[];this.$refs.newShipTableData.clearSelection();//清除选择this.newShipRuleForm.shipStatus;this.newCreatShipPagination.page 1;this.$refs[newShipRuleForm].resetFields();this.newShipRuleForm.pageSize this.newCreatShipPagination.pageSize;this.getPushShipPageFun();}, ⭐️⭐️⭐️ 作者船长在船上 主页来访地址船长在船上的博客 简介CSDN前端领域博客专家CSDN前端领域优质创作者资深前端开发工程师专注web前端领域开发在CSDN分享工作中遇到的问题以及问题解决方法和对项目开发的实际案例总结以及新技术的认识。 ————————————————版权声明本文为CSDN博主「船长在船上」的原创文章遵循CC 4.0 BY-SA版权协议转载请附上原文出处链接及本声明。
