- 1.列表分页
- 2.select 分页加载、搜索
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body class="gray-bg">
<div id="app-au" class="wrapper wrapper-content animated fadeInRight">
<div class="row">
<div class="col-sm-12">
<div class="ibox float-e-margins">
<div class="ibox-title">
<el-breadcrumb separator="/">
<el-breadcrumb-item>项目管理-饿了么</el-breadcrumb-item>
<el-breadcrumb-item><a href="javascript:void()">列表</a></el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="ibox-content">
<!-- 查询-->
<div>
<el-form :inline="true" :model="formInline" class="demo-form-inline" size="mini">
<!-- <el-form-item label="公众号">-->
<!-- <el-select v-model="formInline.woa_id" filterable placeholder="活动区域">-->
<!-- <el-option label="区域一" value="shanghai"></el-option>-->
<!-- <el-option label="区域二" value="beijing"></el-option>-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<el-form-item label="项目">
<el-select v-model="formInline.p_id" filterable
remote
:remote-method="selectPid"
loading-text="数据加载中"
v-loadmore="loadMore"
placeholder="活动区域">
<el-option
v-for="item in selectPData.data"
:key="item.id"
:label="item.text"
:value="item.id">
</el-select>
</el-form-item>
<el-form-item label="secret">
<el-input v-model="formInline.secret" placeholder="审批人"></el-input>
</el-form-item>
<el-form-item label="链接">
<el-input v-model="formInline.host" placeholder="审批人"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSearchClick">查询</el-button>
</el-form-item>
</el-form>
</div>
<!-- 列表-->
<template>
<el-table
:data="tableData"
border
style="width: 100%">
<el-table-column
prop="id"
label="ID"
width="50"></el-table-column>
<el-table-column
prop="w_name"
label="公众号"></el-table-column>
<el-table-column
prop="project_name"
label="项目"></el-table-column>
<el-table-column
prop="host"
label="链接"></el-table-column>
<el-table-column
prop="top_list_key"
label="项目ID"></el-table-column>
<el-table-column
prop="secret"
label="项目secret"></el-table-column>
<el-table-column
prop="key"
label="key"></el-table-column>
<el-table-column
prop="iv"
label="iv"></el-table-column>
<el-table-column
prop="trace"
label="链路前缀"></el-table-column>
<el-table-column
prop="state_str"
label="状态"></el-table-column>
<el-table-column
prop="create_at"
label="创建时间"></el-table-column>
</el-table>
</template>
<!-- 分页-->
<div style="margin-top: 15px;">
<el-row>
<el-col :span="6" :offset="18">
<div class="block">
<el-pagination
layout="prev, pager, next,jumper"
:total="<?php echo $num;?>"
:page-size="<?php echo $count;?>"
@current-change="handleCurrentChange"
>
</el-pagination>
</div>
</el-col>
</el-row>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<script>
var Main = {
data() {
return {
pageSize:<?php echo $count;?>,
page:<?php echo $page;?>,
// 表格数据
tableData: <?php echo json_encode($list);?>,
// 筛选项目数据
selectPData:{
page:1,
pageSize:10,
is:true,
searchName:'',
data:[],
},
// 筛选条件
formInline: {
woa_id: '',
p_id: '',
secret:'',
host:''
}
}
},
methods: {
// 项目搜索框滚动到底部
loadMore()
{
if(this.selectPData.is)
{
this.getSelectProjectData();
}
},
// 项目数据查询
getSelectProjectData()
{
var search = this.selectPData.searchName;
var page = this.selectPData.page;
var rows = this.selectPData.pageSize;
var url = '/xxxxx?search='+search+'&page='+page+
'&rows='+rows+'&is_delete=1';
this.get(url,function (data,that) {
var paramData = data.data;
// 请求数据长度
var paramDataLen = paramData.length;
// 本地数据长度
var len = that.selectPData.data.length;
// 请求数据大于0，才赋值
if(paramDataLen > 0)
{
// 循环赋值
for (var item in paramData)
{
var key = len+parseInt(item);
that.selectPData.data[key] = paramData[item]
}
that.selectPData.page = parseInt(data.page)+1;
}
// 请求数据小于每页数据,表示下一页为空
if(paramDataLen < that.selectPData.pageSize)
{
that.selectPData.is = false;
}
that.$forceUpdate();
});
},
// 项目搜索赋值
selectPid(query)
{
// 页码重置
this.selectPData.page = 1;
// 可搜索
this.selectPData.is = true;
this.selectPData.searchName = query;
this.selectPData.data = [];
// 搜索数据
this.loadMore();
},
// 跳转到指定页
onSearchClick()
{
},
// 分页点击查询
handleCurrentChange(val) {
this.page = val;
var size = this.pageSize;
var page = this.page;
var url = '/xxxx?ajax=1&count='+size+'&page='+page;
this.get(url,function (data,that) {
that.tableData = data.list;
that.$forceUpdate();
});
},
// get数据请求
get(url,paramsData)
{
that = this;
axios.get(url)
.then(function (response) {
if(response.data.code == 0)
{
var data = response.data.data;
// 回调方法刷新数据
paramsData(data,that);
}
else
{
// response.data.message
that.$notify({
title: '警告',
message: response.data.message,
type: 'warning'
});
}
})
.catch(function (error) {
alert(1);
console.log(error);
that.$notify({
title: '失败',
message: '请求错误',
type: 'error'
});
});
}
},
mounted:function () {
// 搜索项目初始化数据加载
this.selectPid('');
}
}
var Directives = Vue.directive('loadmore', {
bind (el, binding) {
// 获取element-ui定义好的scroll盒子
const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')
SELECTWRAP_DOM.addEventListener('scroll', function () {
const CONDITION = this.scrollHeight - this.scrollTop <= this.clientHeight
if (CONDITION) {
binding.value()
}
})
}
})
Vue.use(Directives)
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app-au')
</script>
297
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
