VUE2表格无数据时让代码变得更优雅，简单展示图片方法

2024-02-07 18:32:57

优化VUE 2表格：优雅处理无数据情况

在前端开发中，表格是展示数据的常用元素。然而，当表格中没有数据时，页面可能会显得单调无趣。本文将介绍如何利用ElementUI框架，在VUE 2表格中优雅地处理无数据情况。

准备工作

首先，确保已安装VUE 2和ElementUI。如果没有，请运行以下命令进行安装：

npm install vue
npm install element-ui

创建一个VUE项目

创建新的VUE项目，并安装ElementUI：

vue create my-project
cd my-project
npm install element-ui

集成ElementUI

在main.js文件中，引入ElementUI并将其作为VUE插件进行安装：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

创建VUE组件

创建一个名为TableNoData.vue的VUE组件：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="name" label="名称" width="180"></el-table-column>
    <el-table-column prop="age" label="年龄" width="180"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: []
    }
  }
}
</script>

添加图片展示

在VUE组件中，添加noDataTemplate插槽，并将其设置为图片元素：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="name" label="名称" width="180"></el-table-column>
    <el-table-column prop="age" label="年龄" width="180"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
    <template #noDataTemplate>
      <img src="no-data.png" alt="没有数据">
    </template>
  </el-table>
</template>

自定义CSS样式

为了美化图片展示，可以添加CSS自定义样式：

.el-table__empty-block {
  text-align: center;
}

.el-table__empty-image {
  width: 200px;
  height: 200px;
  margin: 0 auto;
}

使用组件

在VUE应用程序中，使用<TableNoData>组件，将其设置为表格的no-data-template插槽：

<template>
  <div>
    <el-table :data="tableData" style="width: 100%" :no-data-template="noDataTemplate">
      <el-table-column prop="name" label="名称" width="180"></el-table-column>
      <el-table-column prop="age" label="年龄" width="180"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import TableNoData from './components/TableNoData.vue'

export default {
  components: {
    TableNoData
  },
  data() {
    return {
      tableData: []
    }
  }
}
</script>