今天ld提了一個需求，說頁面的列表里面有要下載的地址,然后點擊批量下載。我思索片刻，給出了代碼

1.這個是列表頁面的代碼

<!-- 這個是列表頁面的代碼 -->
<el-table :data="userListShow" align="center"border highlight-current-row size="small" style="width: 100%"striperef="table"><el-table-column label="選擇"width="45px"fixed><template slot-scope="scope" > <el-checkbox class="biaodiandian"  v-model="scope.row.selected" :label="scope.row" @change="clickChange(scope.row)"><i></i></el-checkbox></template></el-table-column><el-table-column prop="barcode"  width="200px"  show-overflow-tooltip align="center" label="條碼號"></el-table-column><el-table-column prop="createTime"  width="200px" show-overflow-tooltip align="center" 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 type="warning" @click="handleDownload" round size="mini">下載體檢報告</el-button>

4.這個按鈕的方法

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的代碼。

代碼沒有走后臺的接口