vue2.5+ElementUi2.15+实现列表页中的分页、时间戳转日期、状态开关等功能demo

前端  /  管理员 发布于 3年前   1545

该项目是以典型的前后端分离架构：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 router

2.添加文章列表页面

/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>

来张完整的效果图：