在HTML中使用 Vue Iview组件(table page)

1 篇文章 0 订阅

在HTML中使用Vue Iview 遇到各种坑,大多都是关于作用域的留贴做个记录


                 <div id="app">
		      <!-- html中使用i-table不是Table -->
		      <i-table :columns="columns1" :data="historyData" height="550"></i-table><br/><br/>
		      <Page :total="dataCount" :page-size="pageSize" @on-change="changepage" show-total></Page>
		 </div>
<script>
//每页显示多少条
var pageSize=10;
var vue =  new Vue({
	el: '#app',
	data (){
        return {
        //在脚本中,我们在表格中定义的数据和表头都需要在这里进行绑定,下面是一些假数据,其中Columns1中的title表示列明,key表示K-V中的标识
            columns1: [
                {
                    title: '用户名',
                    key: 'username',
                    ellipsis:true
                },
                {
                    title: '邮箱',
                    key: 'email'
                },
                {
                    title: '创建时间',
                    key: 'createTime'
                },
                {
                    title: '更新时间',
                    key: 'updateTime'
                },
                {
                    title: '操作',
                    key: 'action',
                    width: 150,
                    align: 'center',
                    render: (h, params) => {
                        return h('div', [
                            h('Button', {
                                props: {
                                    type: 'primary',
                                    size: 'small'
                                },
                                style: {
                                    marginRight: '5px'
                                },
                                on: {
                                    click: () => {
                                        this.show(params.index)
                                    }
                                }
                            }, 'View'),
                            h('Button', {
                                props: {
                                    type: 'error',
                                    size: 'small'
                                },
                                on: {
                                    click: () => {
                                        this.remove(params.index)
                                    }
                                }
                            }, 'Delete')
                        ]);
                    }
                }
            ],
            //接下来绑定数据,分别对应前面的列的key值来进行数据绑定
            historyData: [],
            // 初始化信息总条数
            dataCount:0
            
        }
    },
    methods: {
    	// 1 查询
        querytable(pageNum,pageSize){
            var dataSource = [];
        	$.ajax({ 
    			url: "/user/getUsers", 
    			type:'post',
    			data: {
    				pageNum:pageNum,
    				pageSize:pageSize
    			},
    			async : false,
    			dataType:'json',
    			success: function(data){
    				if(data.type == 'success'){
    					dataSource = data;
    				}
    	        }}); 
         	 this.historyData = dataSource.list;
                 this.dataCount = dataSource.count;
      },
        // 2 分页
        changepage(index){
    	  this.querytable(index,pageSize);
        },
        //3 查看
        show(index){
        	 this.$Modal.info({
                 title: 'User Info',
                 content: `Name:${this.historyData[index].username}<br>email:${this.historyData[index].email}<br>createTime:${this.historyData[index].createTime}`
             })
        },
        // 4 删除
        remove (index) {
            // 暂无
        }
    },
      //当页面加载的时候执行
         created () {
    	  this.querytable(1,pageSize);
        }
	});
</script>


  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值