vue中,el-table无数据(空数据)时,进行暂无数据的文本内容设置之具名插槽#empty(v-slot=empty)和empty-text
在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
类的样式来进一步调整文本的外观。
评论已关闭