微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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>

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。

相关推荐