vue中，el-table无数据（空数据）时，进行暂无数据的文本内容设置之具名插槽#empty（v-slot=empty）和empty-text
empty-text，在表格空数据时显示的文本内容，也可以通过slot="empty"或v-slot=“empty”设置，来展示【暂无数据】
效果
1、图片-组件插槽版
<template>
<el-table :header-cell-style="{ background: '#eef1f6' }" ref="tableRef" :data="financeTableData"
class="table">
<template #empty>
<noneData :noneShow="financeTableData && financeTableData.length == 0"></noneData>
</template>
<el-table-column type="index" width="55" label="序号"></el-table-column>
<el-table-column prop="docName" align="center" label="文档名称"></el-table-column>
<el-table-column align="center" label="相关附件" prop="fileName">
<template #default="scope">
<span style="color: #409eff; cursor: pointer"
@click="handelDowload(scope.row)">{{scope.row.fileName}}</span>
</template>
</el-table-column>
</el-table>
<div class="jump-pagination">
<el-pagination background :current-page="page.pageNumber"
layout="total, sizes, prev, pager, next, jumper" :page-size="page.pageSize"
:page-sizes="[10, 20, 30, 40, 50, 100]" :total="page.total" @current-change="hanleCurrentChange"
@size-change="handleSizeChange" />
<el-button link type="primary" @click="jumpClick">跳转</el-button>
</div>
</template>
<script lang="ts" setup>
import { ref, inject } from 'vue';
import { post } from "@/utils/path.js";
import axios from "axios";
import {
// downLoadxls,
downLoad
} from "@/utils/utils.js";
import { ElMessage, ElLoading } from 'element-plus'
const constant = inject('constant')
const message = inject('message');
const financeTableData = ref([])
const page = ref({
pageSize: 10,
pageNumber: 1,
total: 0,
})
// 列表数据
const getList = () => {
const params = {
docName: formInfo.value.docName,
pageNo: page.value.pageNumber,
pageSize: page.value.pageSize
}
post(constant.ieopCollaborate + '/collaborate/archive/page', params).then((res) => {
const { code, data } = res.data
if (code == '200') {
financeTableData.value = data.records
page.value.pageSize = data.perPageSize
page.value.total = Number(data.total)
page.value.pageNumber = data.currentPageNum
}
})
}
getList()
//分页跳转查询
const hanleCurrentChange = (val: any) => {
page.value.pageNumber = val
getList()
}
const handleSizeChange = (val: any) => {
page.value.pageSize = val
getList()
}
const jumpClick = () => {
getList()
}
</script>
1.1、公共样式
src\assets\css\index.scss
// 分页样式
.jump-pagination{
display: flex;
justify-content: center;
.el-button{
margin: 14px 0 0 0;
margin-left: 10px;
}
}
1.2、全局组件
src\main.ts
import { createApp, ref } from 'vue'
import App from './App.vue'
const app = createApp(App)
import router from './router'
app.use(router)
// 加载全局样式样式
import './assets/css/index.scss'
/***暂无数据-注册全局组件***/
app.component('noneData', noneData);
import noneData from './components/noneData/noneData.vue';
1.3、暂无数据组件
src\components\noneData\noneData.vue
<template>
<div class="noneData" v-if="noneShow">
<img src="img/noneDataL.png"/>
<p>{{noneTitle}}</p>
</div>
</template>
<script>
export default{
props:{
noneShow:{
type:Boolean,
default:false
},
noneTitle:{
type:String,
default:"敬请期待!"
}
}
}
</script>
<style lang="scss" scoped>
.noneData{
width: 100%;
text-align: center;
font-size: 16px;
color: #333333;
margin: 30px 0;
img{
height: 180px;
}
}
</style>
2、文本内容
效果
代码
<template>
<el-table ref="cerTable" class="activityAudit" :data="list" :header-cell-style="{ background: '#eef1f6' }" :empty-text="defaultData" stripe show-header highlight-current-row style="width: 100%"
@selection-change="handleSelectionChange">
<el-table-column type="selection" align="center"></el-table-column>
<el-table-column label="活动编号" show-overflow-tooltip align="center" #default="scope">
{{ scope.row.id }}
</el-table-column>
<el-table-column label="活动类型" align="center" #default="scope">
<span v-if="scope.row.type == 0">主题活动</span>
<span v-else-if="scope.row.type == 1">博览会</span>
<span v-else>赛事支撑</span>
</el-table-column>
<el-table-column label="申请人" show-overflow-tooltip align="center" #default="scope">
{{ scope.row.actiCompanyName }}
</el-table-column>
<el-table-column label="申请时间" align="center" #default="scope">
{{date( scope.row.createDate) }}
</el-table-column>
</el-table>
<div class="pagination-container">
<el-pagination background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
v-model:current-page="activityAuditForm.pageNo"
:page-sizes="[10,20,30,50]"
v-model:page-size="activityAuditForm.pageSize"
layout="total, sizes, prev, pager, next, jumper" :total="total">
</el-pagination>
</div>
</template>
<script>
import {post} from '@/utils/path'
import {inject} from 'vue'
import { getWorksAuditApi } from '@/api/activity'
export default {
name: 'RequirementCer',
data() {
return {
defaultData:'正在加载，请稍候...',
activityAuditForm: {
pageNo: 1,
pageSize: 20,
},
list: [],
cerSelection: [],
total: 0,
message:inject('message'),
date:inject('date'),
}
},
created() {
this.getList()
},
methods: {
// 获取审核列表数据
async getList() {
var that = this;
try {
let result = await getWorksAuditApi(this.activityAuditForm)
if(result.data.code == 200){
that.total = result.data.data.total * 1;
that.list = result.data.data.items;
if(that.total == 0) {
that.defaultData = '暂无数据';
}else{
that.defaultData = '正在加载，请稍候...';
}
}else{
that.message.error(result.data.hint)
}
} catch (error) {}
},
// 多选
handleSelectionChange(val) {
this.cerSelection = val;
// this.actId=val[0].id;
},
handleSizeChange(val) {
this.activityAuditForm.pageSize = val;
this.getList()
},
handleCurrentChange(val) {
this.activityAuditForm.pageNo = val;
this.getList()
}
}
}
</script>
<style scoped="scoped" lang="scss">
.pagination-container{
margin-top: 20px;
display: flex;
justify-content: center;
}
</style>
src\main.ts
import { createApp, ref } from 'vue'
import App from './App.vue'
const app = createApp(App)
import { provide } from 'vue'
function _num(n:any){
if(n<10) return "0"+n;
else return n;
}
app.provide('date', function (val:number, formatString:string) {
var time=new Date(val);
if(!val){
return "";
}
var year=time.getFullYear();
var month=_num(time.getMonth()+1);
var day=_num(time.getDate());
var hours=_num(time.getHours());
var minutes=_num(time.getMinutes());
var seconds=_num(time.getSeconds());
if(formatString=="yyyy"){
return year;
}else if(formatString=="yyyy-MM-dd HH:mm:ss"){
return year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds;
}else if(formatString=="yyyy.MM.dd HH:mm:ss"){
return year+"."+month+"."+day+" "+hours+":"+minutes+":"+seconds;
}else if(formatString=="yyyy.MM.dd"){
return year+"."+month+"."+day
}else if(formatString == "yyyy年MM月"){
return year + "年" + month + "月"
}else if(formatString == "yyyy-MM"){
return year + "-" + month
}else if(formatString == "yyyy年MM月日"){
return year + "年" + month + "月"+day+"日"
}else if(formatString == "HH:mm:ss"){
return hours+":"+minutes+":"+seconds;
}else if(formatString == "MM-dd"){
return month+"."+day
}else if(formatString == "dd"){
return day
}else if(formatString == "yyyy"){
return year
}else{
return year+"-"+month+"-"+day;
}
});
