elementui表格获取mysql数据_一个常见的elementUI表格，从后端获取数据并分页及查询...

最新推荐文章于 2024-05-06 20:38:37 发布

健玮

最新推荐文章于 2024-05-06 20:38:37 发布

阅读量722

点赞数

文章标签： elementui表格获取mysql数据

本文链接：https://blog.csdn.net/weixin_36140403/article/details/114168376

版权

本文介绍了如何在Vue.js应用中利用ElementUI展示从MySQL数据库获取的数据，包括设置表格列定义、加载数据、实现分页和查询功能。通过调用后端API获取数据，然后在前端进行数据显示和分页操作，同时提供了时间格式化的示例。

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

:data="appPageResult.content":highlight-current-row="highlightCurrentRow"v-loading="loading":element-loading-text="$t(‘action.loading‘)":size="size"style="width:100%;">

v-for="column in appColumns"header-align="center"align="center":prop="column.prop":label="column.label":width="column.width":min-width="column.minWidth":fixed="column.fixed":key="column.pro":type="column.type":formatter="column.formatter":sortable="column.sortable==null?true:column.sortable">

:lable="$t(‘action.operation‘)"width="185"fixed="right"header-align="center"align="center">

:label="$t(‘action.enter‘)":size="size"type="primary"@click="handleEnter(scope.row)" />

//载入按钮组件及时间格式化函数

import KtButton from "@/views/core/KtButton"import { format } from"@/utils/datetime"exportdefault{

components:{

KtButton

data() {return{//定义一个查询对象，传到后端后，需要正确解析label。

appFilters: {

label:‘‘},

size:‘mini‘,

align:‘left‘,

highlightCurrentRow:true,//此处的columns，需要与后端返回的内容列对应，否则为空

appColumns: [

{prop:"id", label:"ID", minWidth:50},

{prop:"label", label:"App应用名", minWidth:100},

{prop:"createUser", label:"创建人", minWidth:100},

{prop:"gitBranch", label:"部署分支", minWidth:80},

{prop:"jenkinsJob", label:"JenkinsJob", minWidth:80},

{prop:"deployVersion", label:"发布单", minWidth:120},

{prop:"updateTime", label:"更新时间", minWidth:120, formatter:this.dateFormat}

],//预置一个空的表格内容对象

appPageResult: {},//预置一个请求第1页的页请请求对象

appPageRequest: {

pageNum:1},

loading:false,

}

methods: {//获取分页数据

listApp: function(data) {//在获取到数据之前，显示加载中状态

this.loading = true

//如果是查询数据，则传递给listApp的是null，这个时机，可以获取查询的参数，并重新请求第1页。

//否则，参数为分页的对象

if (data === null) {this.appPageRequest.pageNum = 1

this.appPageRequest.params = [{name:‘label‘, value:this.appFilters.label}]

}else{this.appPageRequest =data

}//前端只需要初始化一个pageNum，其它分页数据由后端获取

this.$api.app.listApp(this.appPageRequest).then((res) =>{this.appPageResult =res.datathis.appPageRequest.pageSize =res.data.pageSizethis.appPageRequest.totalSize =res.data.totalSize

})//在获取到数据之后，取消加截中的状态

this.loading = false},//刷新分页数据, 触发分页时，只需要更新pageNum

refreshAppPageRequest: function(pageNum) {this.appPageRequest.pageNum =pageNumthis.listApp(this.appPageRequest)

},//进入具体应用, 未完(这里需要一个操作，就是动态将此路由加入router，否则，不支持切换主页tab的操作。)

handleEnter: function(row) {this.$router.push({ name: ‘AppDetail‘, params: {app_id: row.id }})

},//时间格式化

dateFormat: function(row, column, cellValue, index){returnformat(row[column.property])

}

mounted() {//在网页挂载时，先载入第一页数据.appPageRequest此时只有一个pageNum为1的参数

this.listApp(this.appPageRequest)

}