Vue2项目实践八：表格数据转换方法、分页方法和组件封装复用

努力赚钱的阳仔

已于 2023-12-05 14:15:05 修改

阅读量443

点赞数 7

文章标签：前端 javascript 开发语言

于 2023-12-05 14:13:19 首次发布

本文链接：https://blog.csdn.net/shieryue_2016/article/details/134805659

版权

table.js 表格数据转换封装

//作业列表获取表格数据方法封装
export function getTableData(root, url, params, arr) {
  root.service.get(url, { params: params || {} })
    .then(res => {
      if (res.data.status === 200) {
        root.tableData = res.data.data
        root.total = res.data.total
        root.tableData.map(item => {
          arr.map(aItem => {
            item[aItem] ? item[aItem + '_text'] = '是' : item[aItem + '_text'] = '否'
          })
        })
        root.loading = false
      }
    })
    .catch(err => {
      throw err
    })
}

workList.vue后端分页

<template>
  <div>
    <el-table class="workList"
      :data="tableData"
      v-loading = 'loading'
      border
      style="width: 100%">
      <el-table-column prop="id" label="用户ID" align="center"></el-table-column>
      <el-table-column prop="useId" label="所有班级" align="center"></el-table-column>
      <el-table-column prop="title" label="作业名称" align="center"></el-table-column>
      <el-table-column prop="completed_text" label="完成情况" align="center"></el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>
<script>
import {getTableData} from '@/utils/table'
const data = [{
        'id':  '1',
        'useId':  '2',
        'title':  '批量清理数据',
        'completed':  '否'
      },
      {
        'id':  '19',
        'useId':  '3',
        'title':  '批量清理激活',
        'completed':  '是'
      },
      {
        'id':  '10',
        'useId':  '2',
        'title':  '批量清理数据',
        'completed':  '否'
      },
      {
        'id':  '12',
        'useId':  '3',
        'title':  '批量清理激活',
        'completed':  '是'
      },{
        'id':  '14',
        'useId':  '2',
        'title':  '批量清理数据',
        'completed':  '否'
      },
      {
        'id':  '13',
        'useId':  '4',
        'title':  '批量清理激活',
        'completed':  '是'
      }]
export default {
  data(){
    return {
      tableData: [],
      total : 0,
      page: 1,
      size: 10,
      loading: true,
    }
},
  created(){
    this.tableData = data
    this.loading = false
    getTableData(this,'/works',{page:this.page,size:this.size},["completed"])
  },
  methods:{ 
    handleSizeChange(val) {
      this.size = val
      this.page = 1
      getTableData(this,'/works',{page:this.page,size:val},["completed"])

      },
    handleCurrentChange(val) {
      this.page = val
      getTableData(this,'/works',{page: val ,size:this.size},["completed"])

    },
  }
  
}
</script>
<style lang="scss" scoped>
.workList {
  .el-pagination {
    text-align: left;
    margin-top: 20px;
  }

}
</style>

分页组件pageing.vue

<template>
  <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
    :page-sizes="[5, 10, 15, 20]" :page-size="size" layout="total, sizes, prev, pager, next, jumper" :total="total"
    :url="url">
  </el-pagination>
</template>

<script>
import { getTableData } from '@/utils/table'
export default {
  props: {
    "total": Number,
    "url": String

  },
  data() {
    return {
      page: 1,
      size: 10
    }
  },
  created() {
    getTableData(this.$parent, '/works', { page: this.page, size: this.size }, ["completed"])
  },
  methods: {
    handleSizeChange(val) {
      this.size = val
      this.page = 1
      getTableData(this.$parent, '/works', { page: this.page, size: val }, ["completed"])

    },
    handleCurrentChange(val) {
      this.page = val
      getTableData(this.$parent, '/works', { page: val, size: this.size }, ["completed"])

    },
  }
}
</script>

workMent.vue

<template>
  <div>
    <el-table class="workMent" :data="tableData" v-loading='loading' border style="width: 100%">
      <el-table-column prop="id" label="用户ID" align="center"></el-table-column>
      <el-table-column prop="useId" label="所有班级" align="center"></el-table-column>
      <el-table-column prop="title" label="作业名称" align="center"></el-table-column>
      <el-table-column prop="completed_text" label="完成情况" align="center"></el-table-column>
    </el-table>
    <Page :total="total" :url="url" />
  </div>
</template>
<script>
import Page from '../common/pageing.vue'
export default {
  components: {
    Page,
  },
  data() {
    return {
      tableData: [{
        'id': '1',
        'useId': '2',
        'title': '批量清理数据',
        'completed': '否'
      },
      {
        'id': '19',
        'useId': '3',
        'title': '批量清理激活',
        'completed': '是'
      },
      {
        'id': '10',
        'useId': '2',
        'title': '批量清理数据',
        'completed': '否'
      },
      {
        'id': '12',
        'useId': '3',
        'title': '批量清理激活',
        'completed': '是'
      }, {
        'id': '14',
        'useId': '2',
        'title': '批量清理数据',
        'completed': '否'
      },
      {
        'id': '13',
        'useId': '4',
        'title': '批量清理激活',
        'completed': '是'
      }],
      total: 0,
      loading: true,
      url: '/works'
    }
  }

}
</script>
<style lang="scss" scoped>
.workMent {
  .el-pagination {
    text-align: left;
    margin-top: 20px;
  }

}
</style>