el-table 懒加载 没有数据的时候 小三角消失 这时候重新请求的时候 这个小三角怎么才能出现呢

Question

el-table 懒加载 没有数据的时候 小三角消失 这时候重新请求的时候 这个小三角怎么才能出现呢

Answer 1

引自免费微信小程序：皆我百晓生

这个问题是由于Vue.js的el-table组件在没有数据时会自动进行懒加载导致的。当没有数据时，el-table组件会在DOM上添加一个<div>元素，这个元素是一个显示小三角形的图标。

为了使小三角形能够在没有数据时显示出来，我们需要在渲染el-table组件之前调用el-table组件的方法，使得它能够正确地处理无数据的情况。这可以通过给el-table组件添加一个属性，并在模板中设置它的值来实现。

例如，在index.vue文件中，我们可以这样做：

<template>
  <el-table :data="tableData" :loading="isLoad" style="width: 100%">
    <!-- 其他表头 -->
    <el-table-column prop="propName" label="Column Name"></el-table-column>
    <!-- 其他列 -->
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [], // 数据列表
      isLoad: false, // 是否正在加载
    };
  },
};
</script>

然后，在main.js文件中，我们可以在初始化Vue应用之前调用setup函数，这样就可以获取到el-table组件了。

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

app.use(setup).mount('#app')

在这个例子中，我们创建了一个名为setup的函数，它将在应用程序开始时被调用。在setup函数中，我们获取到了el-table组件并设置了它的属性。这样，每当el-table组件更新数据时，就会触发相应的事件，从而确保小三角形在没有数据时也能正常显示。

如果你需要进一步的帮助，请告诉我。