只需要一个加载特效,简单的使用时:
在button里面使用方法,然后使用方法打开弹窗,打开弹窗前使用loading加载。
<el-button type="primary" @click="openDialog">刷新</el-button>
<el-dialog
title="提示"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose">
<span>这是一段信息</span>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</span>
</el-dialog>
<script>
export default {
data() {
return {
dialogVisible: false
};
},
methods: {
openDialog() {
this.openLoadingScreen()
this.dialogVisible = true
},
openLoadingScreen() {
// 让加载特效更好看一些
const loading = this.$loading({
lock: true,
text: '准备打开弹窗中,请稍候',
spinner: 'el-icon-loading'
})
// 等三秒才结束
setTimeout(() => {
loading.close()
}, 3000)
}
}
};
</script>
复杂一些,在数据未获取时加载,获取完结束加载时:
写个异步方法,数据获取完才结束加载。
<el-button type="primary" @click="showStudentData">刷新</el-button>
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
<script>
export default {
data() {
return {
tableData: []
};
},
methods: {
async showStudentData() {
const loading = this.$loading({
lock: true,
text: '准备获取数据中,请稍候',
spinner: 'el-icon-loading'
})
// getStudentData()就是从后端获取数据的方法
const res = await getStudentData()
this.tableData = res
// 还有另外一种await写法
// await getStudentData.then(res => this.tableData = res)
setTimeout(() => {
loading.close()
}, 3000)
}
}
};
</script>