element el-tree、el-table元件載入資料前閃現 暫無資料 清除
阿新 • • 發佈:2022-04-01
相信很多人在使用element el-tree、el-table元件載入資料前會顯示一個“ 暫無資料 ”,體驗很不友好,有沒有辦法處理不顯示呢?答案是:有的。廢話不多說直接上程式碼解說:
<!--el-tree "暫無資料" 不顯示處理-->
<template> <el-tree :empty-text="emptyText" :expand-on-click-node="false" :props="defaultProps" :load="loadNode" node-key="id" lazy> <div class="custom-tree-node" slot-scope="{ node, data }"> <!--節點渲染--> </div> </el-tree> </template> <script> export default { data() { return { emptyText:"",} },
//* 利用el-tree 自帶的empty-text屬性繫結一個初始化空值,當拿到tree資料時判斷資料長度,當資料長度為0時設定emptyText值為"暫無資料"即可 </script>
<!--el-table "暫無資料" 不顯示處理--> <template> <el-table :data="tableData" style="width: 100%"> <template slot="empty"> <p>{{dataText}}</p> </template> <el-table-column prop="date" label="日期" width="180"></el-table-column> <el-table-column prop="name" label="姓名" width="180"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> </template> data() { return { tableData: [], dataText: "" //進去頁面先讓字樣為空 }; }, //請求資料 goodsList() { //先將變數清空 this.dataText = ""; this.$request( this.$config.baseApi + "/user/address/inde", "get" ).then(res => { if (res.code === 200) { this.tableData = res.data.content; // 當請求後臺,資料為空時,再讓頁面顯示暫無資料 if (this.tableData.length === 0) { this.dataText = "暫無資料"; } } }); }