vue中，el-table无数据（空数据）时，进行暂无数据的文本内容设置之具名插槽#empty（v-slot=empty）和empty-text

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;
  }
});