vue2.5+ElementUi2.15+实现列表页中的分页、时间戳转日期、状态开关等功能demo
该项目是以典型的前后端分离架构：hyperf、jwt + vue、element ui
需求：
列表页的开发（我这用文章列表页实现）
完成功能：列表展示，分页，状态开关，日期转化
未完成功能：新增 批量删除 ， 操作栏功能，编辑，删除等
环境：
跟之前的一样（有兴趣的可以自行翻阅）
"dependencies": {
"axios": "^0.21.1",
"element-ui": "^2.15.6",
"vue": "^2.5.2",
"vue-router": "^3.0.1",
"vuex": "^3.6.2"
},后端接口：
hyperf2.1+jwt开始步骤：
1.添加路由 以 文章列表 路由为例
/src/router/index.js
（我直接复制过来整个测试项目路由页）
import Vue from 'vue'
import Router from 'vue-router'
import login from '@/views/login'
import Container from '@/container/Container'
import Dashboard from '@/views/dashboard'
import User from '@/views/user'
import Article from '@/views/article'
Vue.use(Router)
const router = new Router({
//mode: 'history', //去掉url中的#
routes: [
{
path: '/',
redirect: '/dashboard',
name: 'Container',
component: Container,
children: [
{path: 'dashboard', name: '首页', component: Dashboard, },
{path: 'user', name: '用户列表', component: User,},
{path: 'article', name: '文章列表', component: Article,},
]
},
{
path: '/login',
name: 'login',
component: login
}
]
})
//使用 router.beforeEach 注册一个全局前置守卫，判断用户是否登陆
router.beforeEach((to, from, next) => {
if (to.path === '/login') {
next()
} else {
let token = localStorage.getItem('token')
if (token === null || token === '') {
next('/login')
} else {
next()
}
}
})
export default router2.添加文章列表页面
/src/views/article/index.vue
<template>
<div>
<el-table
ref="multipleTable"
:data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
tooltip-effect="dark"
style="width: 100%"
@selection-change="handleSelectionChange">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column prop="art_id" label="ID" width="120"></el-table-column>
<el-table-column prop="title" label="标题" width="140"></el-table-column>
<el-table-column prop="cat_id" label="分类" width="120"></el-table-column>
<el-table-column prop="view" label="浏览量" width="140"></el-table-column>
<el-table-column prop="pubtime" label="添加日期" :formatter="formatDate" width="150"></el-table-column>
<el-table-column prop="is_state" label="状态" width="140">
<template scope="scope">
<el-switch
v-model="scope.row.is_state"
active-color="#13ce66"
inactive-color="#ff4949"
:active-value="0"
:inactive-value="1"
@change="changeStatus(scope.row)">
</el-switch>
</template>
</el-table-column>
<el-table-column prop="is_state" label="状态" width="80" align="center">
<template scope="scope">
<span v-if="scope.row.is_state==1" style="color:red;">停用</span>
<span v-if="scope.row.is_state==0" style="color:green;">启用</span>
</template>
</el-table-column>
<el-table-column label="操作" width="140" align="center">
<template scope="scope">
<el-button type="text" size="mini" @click="blockUp(scope.row)" v-if="scope.row.is_state==1">停用</el-button>
<el-button type="text" size="mini" @click="startUsing(scope.row)" v-if="scope.row.is_state==0">启用</el-button>
</template>
</el-table-column>
<el-table-column align="center" label="操作" width="200%">
<template slot-scope="scope">
<el-button v-if="scope.row.edit" type="success" size="mini"
icon="el-icon-circle-check-outline" @click="confirmEdit(scope.row)">保存
</el-button>
<el-button v-else type="primary" size="mini"
@click="startEdit(scope.row)">编辑
</el-button>
<el-button v-if="scope.row.edit" class="cancel-btn" size="mini" icon="el-icon-refresh"
type="warning" @click="cancelEdit(scope.row)">取消
</el-button>
<!--<el-button type="danger" size="mini" @click="handleConfig(scope.row)">删除</el-button>-->
</template>
</el-table-column>
</el-table>
<div style="margin-top: 20px">
<el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
<el-button @click="toggleSelection()">取消选择</el-button>
</div>
<div style="text-align: center;margin-top: 30px;">
<el-pagination
background
layout="prev, pager, next"
:total="total"
@current-change="current_change">
</el-pagination>
</div>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [],
multipleSelection: [],
total: 0,
pagesize:5,
currentPage:1
}
},
methods: {
addArt: function() {
this.axios({
method: 'GET',
url: 'https://blog.zongscan.com/admin/arts',
}).then(res => {
console.log(res)
this.tableData = res.data.data;
this.total= res.data.total;
}).catch(function () {
console.log(66)
})
},
current_change:function(currentPage){
this.currentPage = currentPage
},
//改变状态
changeStatus:function(v) {
console.log( v.art_id + '--->'+v.is_state)
//修改状态
this.axios({
method: 'GET',
url: 'https://blog.zongscan.com/admin/artedit',
params: {'art_id':v.art_id,'is_state':v.is_state}
}).then(res => {
console.log(res.data)
this.$alert('状态修改成功!', 'is_state', {
confirmButtonText: 'ok'
})
}).catch(function () {
console.log('is_state')
})
},
//日期转化
formatDate(row, column) {
let data = row[column.property]
if(data == null) {
return null
}
//注意 时间单位/毫秒 不然就显示1970了
let dt = new Date(data * 1000)
return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate() + ' ' + dt.getHours() + ':' + dt.getMinutes() + ':' + dt.getSeconds()
},
toggleSelection(rows) {
if (rows) {
rows.forEach(row => {
this.$refs.multipleTable.toggleRowSelection(row);
});
} else {
this.$refs.multipleTable.clearSelection();
}
},
handleSelectionChange(val) {
this.multipleSelection = val;
}
},
mounted: function () {
this.addArt()
}
}
</script>
<style>
</style>
来张完整的效果图：
相关文章