Vue -- iview表格 axiso调用接口数据
<template>
<div class="home">
<Card :bordered="false">
<p slot="title">列表</p>
<div>
<Table stripe border :columns="column" :data="list">
<template slot-scope="{index}" slot="action">
<Button type="info" shape="circle" size="small"
@click="showDialog(index)">查看</Button>
</template>
</Table>
<Page class="page" :total="total" :current="current"
@on-change="changePage"></Page>
</div>
</Card>
<Modal v-model="dialogShow" title="信息">
<div class="info">
<p>模型编号：</p>
<span>{{$store.state.modID}}</span>
</div>
<div class="info">
<p>模型名称：</p>
<span>{{$store.state.modName}}</span>
</div>
</Modal>
</div>
</template>
<script>
export default {
data(){
return{
dialogShow:false, // 弹出层展示
total:0, // 数据总览
current:1, // 当前页码
queryInfo:{
userId:'jxx',
orgId:'beijing',
pageNumber:1, // 当前页数
pageSize:10 // 每页条数
},
column: [ // 表格列
{
type:'index',
title:'#',
width:60
},
{
title: '模型id',
key: 'modelid',
width:220,
sortable:true
},
{
title: '模型名称',
key: 'modelname'
},
{
title: '制作人',
key: 'username'
},
{
title: '制作日期',
key: 'datetime',
width:200,
sortable:true
},
{
title: '许可',
key: 'permission'
},
{
title:'操作',
slot:'action',
}
],
list:[] // 表格数据
}
},
created(){
this.getList()
},
methods:{
// 获取列表
async getList(){
const res = await this.$axios.get('/queryModel',{params:this.queryInfo})
if(res.data.success !== true){
return this.$Message.error('ERROR')
}
this.list = JSON.parse(res.data.resultJson)
this.total = parseInt(res.data.count)
//this.list = eval(res.data.resultJson) // 将json字符串转为对象格式
},
// 分页器
changePage(newNumber){
this.queryInfo.pageNumber = newNumber
this.getList()
},
// 展示对话框
showDialog(index){
this.$store.commit('showModel',{
mid:this.list[index].modelid,
mname:this.list[index].modelname
})
this.dialogShow = true
}
}
};
</script>
<style scoped>
.home{background: #eee;padding:20px;}
.page{margin-top: 10px;display: flex;justify-content: flex-end;}
.info{display: flex;justify-content: flex-start;margin-bottom: 5px;}
.info p{margin-right: 20px;font-weight: bolder;}
</style>
