el-table使用总结

最新推荐文章于 2024-09-19 14:54:46 发布

JWbonze

最新推荐文章于 2024-09-19 14:54:46 发布

阅读量419

点赞数

分类专栏： # vue 文章标签： elementui 前端 javascript

本文链接：https://blog.csdn.net/JWbonze/article/details/122876778

版权

vue 专栏收录该内容

15 篇文章 2 订阅

订阅专栏

本文展示了如何使用Element-UI库创建一个带有数据加载提示的基础表格组件。通过`v-loading`指令控制加载状态，并在数据加载完成时更新表格内容。在`doSearchList`方法中，调用`getList`获取数据，成功后设置列表数据和总条数，错误时显示警告信息。

摘要由CSDN通过智能技术生成

基础table

table属性

数据加载提示

                <el-table :height="tableHeight" stripe :data="list"
                          v-loading="loading"
                          element-loading-text = "数据正在加载中..."
                >
                </el-table>
            //列表初始化查询
            doSearchList(){
                this.loading = true;
                getList(this.searchForm, page).then(res => {
                    if (res.data.code === 0) {
                        this.issueList = res.data.data.list ? res.data.data.list : [];
                        this.total = res.data.data.total;
                        this.loading = false;
                    } else {
                        this.loading = false;
                        this.$message({
                            type: 'warning',
                            message: res.data.message
                        });
                    }
                });
            },