一、AI賦能提供思路

基本框架

<!-- 隱藏的打印內容（默認不顯示） -->
<div id="print-container" style="display: none;"><h1>退貨單打印內容</h1><table><!-- 打印專用的表格結構 --></table>
</div><script>
export default {methods: {handlePrint() {// 臨時顯示打印內容document.getElementById('print-container').style.display = 'block';// 調用打印window.print();// 打印完成后隱藏（需延遲執行，確保打印已觸發）setTimeout(() => {document.getElementById('print-container').style.display = 'none';}, 500);}}
}
</script>

二、具體實操

1.實現顯示頁面

主要設計：按鈕區、主表格區、打印區

<div class="button"><el-button size="mini" type="primary"@click="handlePrint">打印</el-button></div><div class="tableData"><el-table :data="tableData" ref="multiTable" @selection-change="handleSelection"><el-table-column type="selection"></el-table-column><el-table-column prop="id" label="ID"></el-table-column><el-table-column prop="name" label="名字"></el-table-column><el-table-column prop="category" label="種類"></el-table-column><el-table-column prop="price" label="價格"></el-table-column><el-table-column prop="stock" label="庫存"></el-table-column><el-table-column prop="date" label="時間"></el-table-column></el-table></div><div id="printData" style="display: none;"><h2>庫存表格</h2><table><thead><tr><th>序號</th><th>名字</th><th>種類</th><th>價格</th><th>庫存</th><th>時間</th></tr></thead><tbody><tr v-for="(row,index) in selectRow" :key="row.id"><th>{{ index+1 }}</th><th>{{ row.name }}</th><th>{{ row.category }}</th><th>{{ row.price }}</th><th>{{ row.stock }}</th><th>{{ row.date }}</th></tr></tbody></table></div>

2.準備基礎數據

響應信息

{"code": 200,"message": "success","data": [{"id": 1,"name": "華為Mate 60 Pro","category": "手機","price": 6999,"stock": 120,"date": "2023-10-01"},{"id": 2,"name": "蘋果iPhone 15","category": "手機","price": 7999,"stock": 85,"date": "2023-09-20"}]
}

數據接收

data() {return {tableData: [],loading: false};},methods: {async fetchData() {this.loading = true;try {const response = await axios.get('/mock/tableData.json');this.tableData = response.data.data;} catch (error) {console.error('獲取數據失敗', error);} finally {this.loading = false;}}},mounted() {this.fetchData();}
};

三、邏輯實現

methods:{handleSelection(row){this.selectRow=row},handlePrint(){// 1.打印模板const printTemplate=document.getElementById("printData");// 2. 顯示打印模板（默認隱藏）const originalDisplay = printTemplate.style.display;printTemplate.style.display = "block";// 3. 調用瀏覽器打印功能window.print();// 4. 恢復模板隱藏狀態printTemplate.style.display = originalDisplay;}}

四、樣式設置

@media print {/* 隱藏類名是tableData和button的組件內容 */.tableData, .button {display: none !important;}/* 確保在id為printData的組件中顯示 */#printData {display: block !important;}
}
h2 {
text-align: center;margin: 20px 0;
}table {border-collapse: collapse; /* 合并邊框 */width: 100%;margin: 0 auto;display: flex;/* 彈性布局實現動態對齊 */
}
th, td {border: 1px solid #ddd; /* 單元格邊框 */padding: 8px;text-align: left;
}
th {background-color: #f5f5f5; /* 表頭灰色背景 */
}

常見的表格布局

基礎流式：本實操中的

<div class="table-container"><table><thead><tr><th>列1</th><th>列2</th><th>列3</th></tr></thead><tbody><tr><td>數據1</td><td>數據2</td><td>數據3</td></tr></tbody></table>
</div>

卡片式布局

<div class="card-container"><!-- 每個卡片對應一行數據 --><div class="data-card" v-for="row in tableData" :key="row.id"><div class="card-field"><span class="field-label">商品名稱：</span><span class="field-value">{{ row.name }}</span></div><div class="card-field"><span class="field-label">價格：</span><span class="field-value">{{ row.price }}</span></div></div>
</div>.card-container {display: grid;grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* 自動換行 */gap: 15px; /* 卡片間距 */padding: 10px;
}
.data-card {padding: 15px;border-radius: 8px;box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 卡片陰影 */background: #fff;
}

更多布局可參考Bootstrap和elementUI?

?

?