Vue中的vxe-table教程10-空数据、加载中的样式设置
知识点:一、空数据提示1. empty-text="没有更多数据了!"2. 末尾加标签<template v-slot:empty><span style="color: red;"><img src="./img/img2.gif"><p>没有更多数据了!</p></span></template&g
·
知识点:
一、空数据提示
1. empty-text="没有更多数据了!"
2. 末尾加标签
<template v-slot:empty>
<span style="color: red;">
<img src="./img/img2.gif">
<p>没有更多数据了!</p>
</span>
</template>
二、加载中:
:loading="loading"
空数据效果图:
加载中效果图:
1. index.html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/xe-utils"></script>
<script src="https://cdn.jsdelivr.net/npm/vxe-table"></script>
<!-- 使用 cdn 引用方式需要注意是否锁定版本,默认指向最新版本 -->
</head>
<body>
<div id="app">
<template>
<div style="padding: 20px 50px 0 50px">
<!--
一、空数据提示
1. empty-text="没有更多数据了!"
2. 末尾加标签
<template v-slot:empty>
<span style="color: red;">
<img src="./img/img2.gif">
<p>没有更多数据了!</p>
</span>
</template>
二、加载中:
:loading="loading"
-->
<vxe-table
border
highlight-hover-row
:loading="loading"
height="300"
:data="tableData">
<vxe-table-column type="seq" width="60"></vxe-table-column>
<vxe-table-column field="name" title="Name" sortable></vxe-table-column>
<vxe-table-column field="sex" title="Sex"></vxe-table-column>
<vxe-table-column field="age" title="Age"></vxe-table-column>
<vxe-table-column field="address" title="Address" show-overflow></vxe-table-column>
<!-- <template v-slot:empty>-->
<!-- <span style="color: red;">-->
<!-- <img src="./img/img1.gif">-->
<!-- <p>没有更多数据了!</p>-->
<!-- </span>-->
<!-- </template>-->
</vxe-table>
</div>
</template>
</div>
</body>
<script src="./js/main.js"></script>
<link rel="stylesheet" href="./css/main.css">
</html>
2. main.css中的代码
@import url("https://cdn.jsdelivr.net/npm/vxe-table/lib/style.css");
.vxe-textarea--inner {
line-height: inherit;
}
3. main.js中的代码
var Main = {
data() {
return {
tableData: [],
}
},
created() {
this.loading=true;
setTimeout(() => {
this.tableData = [
{id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'vxe-table 从入门到放弃'},
{id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou'},
{id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai'},
{id: 10004, name: 'Test4', role: 'Designer', sex: 'Women ', age: 23, address: 'vxe-table 从入门到放弃'},
{id: 10005, name: 'Test5', role: 'Develop', sex: 'Women ', age: 30, address: 'Shanghai'},
{id: 10006, name: 'Test6', role: 'Designer', sex: 'Women ', age: 21, address: 'vxe-table 从入门到放弃'},
{id: 10007, name: 'Test7', role: 'Test', sex: 'Man ', age: 29, address: 'vxe-table 从入门到放弃'},
{id: 10008, name: 'Test8', role: 'Develop', sex: 'Man ', age: 35, address: 'vxe-table 从入门到放弃'}
];
this.loading=false;
}, 500)
},
methods: {},
};
var app = new Vue(Main).$mount('#app');
更多推荐
已为社区贡献21条内容
所有评论(0)