1 \src\views\Users\OnlineCustomerView.vue
:page-sizes="[1, 10, 15, 20, 50, 100]" :total="pagination.totalCount" prev-text="上一页" next-text="下一页" background layout="->, total, sizes, prev, pager, next" @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
import {
ref,
} from 'vue';
import {
onlineCustomerIndex,
} from '../../common/http.api.js';
import moment from 'moment';
const pagination = ref({
pageIndex: 1, //初始化当前页,即第1页。
pageSize: 15, //初始化每页最多所包含的项数值,即每页最多所包含15项。
totalCount: 0, //初始化数据源的总计项数值,由于还没有加载数据源所以该值为:0。
//初始化排序字段及其方式。
OrderByModel: JSON.stringify({
OrderByFiled: '',
OrderByType: '',
}),
QueryCondition: ""
});
//初始化当前页的渲染数据集列表实例。
const currentPageList = ref([]);
//获取当前页面渲染显示所需的数据源。
const currentPageInit = async () => {
const res = await onlineCustomerIndex(pagination.value);
currentPageList.value = res.data.response.data;
pagination.value.totalCount = res.data.response.totalCount;
//console.log(currentPageList.value);
//console.log(pagination.value.totalCount);
//console.log(currentPageList.value[0].lastActivityDateTime);
//console.log(moment(currentPageList.value[0].lastActivityDateTime).format('YYYY-MM-DD HH:mm:ss'));
};
currentPageInit();
//该事件在改变每页最多所包含的项数值后,把数据源加载到当前页面中,并重新对当前页进行渲染显示。
const handleSizeChange = async(size) => {
//console.log(`${size} `);
pagination.value.pageSize = size;
await currentPageInit();
};
//该事件在改变当前页的索引值后,把数据源加载到当前页面中,并重新对当前页进行渲染显示。
const handleCurrentChange= async(currentPage) => {
pagination.value.PageIndex = currentPage;
await currentPageInit();
};
function dateTimeformat(row, column) {
let data = row[column.property];
if (data == null) {
return null;
}
return moment(data).format('YYYY-MM-DD HH:mm:ss');
}
.wrap {
height: 100%;
overflow-x: hidden;
}
//表单“label”字体样式
:deep(.el-form-item__label) {
font-weight: 400;
}
// 修改表头样式。
:deep(.el-table__header thead th) {
background-color: #000000;
color: #ffd04b;
font-weight: 400;
text-align: center;
}
//表格隔行变换颜色。
:deep(.el-table__body tbody tr:nth-child(odd)) {
background-color: #FFFFFF;
}
:deep(.el-table__body tbody tr:nth-child(even) td) {
background-color: #CCFFFF;
}
.userinfo-inner {
cursor: pointer;
float: left;
}
//“el-pagination”分页组件样式。
.el-pagination {
margin-top: 10px;
//font-size: 25px;
//"上一页"样式。
:deep(.btn-prev) {
background-color: transparent;
height: 40px;
margin-right: 20px;
}
//"下一页"样式。
:deep(.btn-next) {
background-color: transparent;
height: 40px;
margin-left: 20px;
}
//分页索引样式。
:deep(.number) {
background-color: transparent;
min-width: 40px;
height: 40px;
margin-right: 15px;
}
}
//“el-pagination”分页组件中下拉框控件字体样式。
:deep(.el-input__wrapper) {
//font-size: 25px;
}
.lightgreen-box {
//background-color: lightgreen;
//height: 24px;
float: right;
}
对以上功能更为具体实现和注释见:230418_017shopvue(在线用户统计的前端实现)。