部署wordpress站点,网站后缀类型,百度指数查询官网入口,wordpress批量建站今天ld提了一个需求#xff0c;说页面的列表里面有要下载的地址,然后点击批量下载。我思索片刻#xff0c;给出了代码
1.这个是列表页面的代码
!-- 这个是列表页面的代码 --
el-table :datauserListShow aligncenterborder highlight-…今天ld提了一个需求说页面的列表里面有要下载的地址,然后点击批量下载。我思索片刻给出了代码
1.这个是列表页面的代码
!-- 这个是列表页面的代码 --
el-table :datauserListShow aligncenterborder highlight-current-row sizesmall stylewidth: 100%stripereftableel-table-column label选择width45pxfixedtemplate slot-scopescope el-checkbox classbiaodiandian v-modelscope.row.selected :labelscope.row changeclickChange(scope.row)i/i/el-checkbox/template/el-table-columnel-table-column propbarcode width200px show-overflow-tooltip aligncenter label条码号/el-table-columnel-table-column propcreateTime width200px show-overflow-tooltip aligncenter label登记时间/el-table-column
/el-table
2.这个是选择框的代码
data(){return(){selectedRows:[], //这个是传递的复选框的值因为是批量选择吗所以给的是数组}
} methods:{//选择文件 选择复选框clickChange(row) {if (row.selected) {this.selectedRows.push(row); // 选中时添加到数组中} else {const index this.selectedRows.findIndex(item item row);if (index -1) {this.selectedRows.splice(index, 1); // 取消选中时从数组中移除}}},}
3.好了现在该批量下载了之所以写上面两步是因为得做批量选择的复选框也就是得批量拿到数据
!-- 这个是批量下载的按钮-
el-button typewarning clickhandleDownload round sizemini下载体检报告/el-button4.这个按钮的方法
methods:{//这个可以直接赋值过去就能用还有你的浏览器得开启允许批量下载也就是第一次回
//触发一个提示说是否允许批量下载多个文件要点击允许就行了
async handleDownload() {//this.selectedRows 这个就是上面写的那个批量拿到的数据//row.reportUrl 这个就是列表数据里面的地址路径const reportUrls this.selectedRows.map(row row.reportUrl);for (const reportUrl of reportUrls) {if (reportUrl) { //判断是否存在const link document.createElement(a);link.href reportUrl;link.download reportUrl.substring(reportUrl.lastIndexOf(/) 1);link.style.display none;document.body.appendChild(link);link.click();await new Promise((resolve) setTimeout(resolve, 500));document.body.removeChild(link);}}},}
好了兄弟们到这里就结束了上面的代码可以直接拿过就能用不想要上面插件上面依赖的就是vue的代码。
代码没有走后台的接口
