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

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/sjkxydsj/10673.html