vue中,el-table无数据(空数据)时,进行暂无数据的文本内容设置之具名插槽#empty(v-slot=empty)和empty-text
    		       		warning:
    		            这篇文章距离上次修改已过438天,其中的内容可能已经有所变动。
    		        
        		                
                在Vue中,如果你想在el-table组件中设置当表格没有数据时显示的文本内容,你可以使用<template>元素配合el-table的#empty插槽。以下是一个简单的示例:
<template>
  <el-table
    :data="tableData"
    style="width: 100%">
    <!-- 其他列定义 -->
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: []
    };
  }
};
</script>
 
<style>
/* 自定义无数据时的样式 */
.no-data {
  text-align: center;
  font-size: 14px;
  color: #909399;
  padding: 10px;
}
</style>当tableData为空数组时,el-table会显示默认的“No data”文本。如果你想自定义这个文本,可以使用具名插槽:
<template>
  <el-table
    :data="tableData"
    style="width: 100%">
    <!-- 其他列定义 -->
 
    <template #empty>
      <div class="no-data">
        当前没有数据,请稍后再试。
      </div>
    </template>
  </el-table>
</template>在上面的代码中,当tableData为空时,el-table会显示#empty插槽中定义的内容,而不是默认的“No data”文本。你可以通过自定义no-data类的样式来进一步调整文本的外观。
评论已关闭