在HTML中使用 Vue Iview组件(table page)
在HTML中使用Vue Iview 遇到各种坑,大多都是关于作用域的留贴做个记录<div id="app"><!-- html中使用i-table不是Table --><i-table :columns="columns1" :data="historyData" he
·
在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>
更多推荐
已为社区贡献1条内容
所有评论(0)