天天看點

vue+ElementUI table無資料顯示圖檔

效果

vue+ElementUI table無資料顯示圖檔
<div class="myTranslationContentTable">
			<el-table :stripe="true" :data="tableData" ref="tableT" @selection-change="handleSelectionChange" size="small" style="width: 99%;"  height="50vh">
				<el-table-column fixed type="selection" width="55">
				</el-table-column>
				<el-table-column prop="customerName" label="檔案名稱" width="140">
				</el-table-column>
				<el-table-column prop="billMouth" label="翻譯語言">
				</el-table-column>
				<el-table-column prop="totalAmount" label="行業領域">
				</el-table-column>
				<el-table-column prop="confirmationAmount" label="字數">
				</el-table-column>
				<el-table-column prop="status" label="狀态" :formatter="translationStatus">
				</el-table-column>
				<el-table-column prop="invoiceAmount" sortable label="翻譯時間">
				</el-table-column>
				<el-table-column label="操作" fixed="right" class="tableOperation">
					<template slot-scope="scope">
						<span class="table_look" @click="toPreview(scope.$index,scope.row)">預覽 <span>|</span></span>
						<span class="table_look" @click="toDownload(scope.$index,scope.row)">下載下傳<span>|</span></span>
						<span class="table_look" @click="toDelete(scope.$index,scope.row)">删除</span>
					</template>
				</el-table-column>
				
				<div slot="empty">
					<p>
						<img src="../../static/img/ico-null.png"/>
					</p>
					<p><span>暫無翻譯記錄</span></p>
				</div>
			</el-table>
		</div>
           

繼續閱讀