前几篇文章我们已经把后台的基础搭建好了，感兴趣的朋友可以点击一些链接，查看之前的基础搭建

• 前端开发从零搭建VUE后台
• 深入了解VUE3实践 - 搭建后台（二）
• 深入了解VUE3实践 - 搭建后台（三）
• 深入了解VUE3实践 - 搭建后台（四）
• 深入了解VUE3实践 - 搭建后台（五）
• VUE3 你不知道的按钮与菜单权限
• VUE 编写后台常用的组件

前言

上一篇我们讲解了搜索的组件，今天我们来讲一个我们做后台必要的一个组件table。 传统的

element table我们需要在各个页面编写很多代码。这样很麻烦了。我们今天就把这个写成

组件，方便我们后台的调用。

思路

我们希望通过简单的传参，来实现这个功能。 table必须的几个东西，大概为table的数据，

table的字段，分页，loading等。我们先按照这几个参数来实现吧。

开始

在src/components/ElTable.vue.

<template>
	<div>
        <el-table :data="tableData" style="width: 100%;" v-loading="loading">
            <template :key="index" v-for="(vo, index) of tableColums">
                <!-- s 表格选择 -->
                <template v-if="vo.selection">
                    <el-table-column type="selection" :width="vo.width || 55" />
                </template>
                <!-- e 表格选择 -->

                <template v-else>
                    <!-- s 表格slot -->
                    <el-table-column 
                        v-if="vo.slot"
                        :property="vo.key" 
                        :label="vo.name" 
                        :width="vo.width"
                        :min-width="vo.minWidth"
                        :fixed="vo.fixed"
                    >
                        <template #default="scope">
                            <slot :name="vo.key" :row="scope.row"></slot>
                        </template>
                    </el-table-column>

                    <!-- s 其他 -->
                    <el-table-column 
                        v-else
                        :property="vo.key" 
                        :label="vo.name" 
                        :width="vo.width"
                        :min-width="vo.minWidth"
                        :fixed="vo.fixed"
                    />
                </template>

            </template>
        </el-table>
        <el-row class="page" v-if="page">
            <div class="page_total">
                共{{ Math.ceil(page.total / page.pageSize) }}页/{{
                    page.total
                }}条数据
            </div>
            <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="page.currentPage"
                :page-sizes="[10, 20, 50]"
                :page-size="page.pageSize"
                layout="sizes, prev, pager, next, jumper"
                :total="page.total"
            >
            </el-pagination>
        </el-row>
    </div>  
</template>

js代码

<script>
    import { computed, ref } from 'vue';
    import { useStore } from 'vuex';
    export default {
        emits:["pageChangeSize","pageChangeCurrent"],
        props:{
            tableData:Array, //表格数据
            tableColums:Array, //表格字段
            page: Object, //分页数据,
            loading: Boolean, //loading
        },
        steup(props, context){
        },
        methods:{
            //改变每页数量
            handleSizeChange(val){
                this.page.pageSize=val;
                this.$emit('pageChangeSize', val);
            },
            //currentPage当前页改变时
            handleCurrentChange(val) {
                this.page.currentPage=val;
                this.$emit('pageChangeCurrent', val);
            }
        }
    }
</script>

这样我们的table组件就完成了。下面我们来看看怎么使用吧

#参数
tableData:[{
  name:"这个总公司",
  teamNum:10,
  personNum:20,
  startTime:'2021-10-10',
  endTime:'2021-10-20'
}],
  tableColums:[
    { key: "name", name: "劳务公司名称", minWidth: "150px", selection:true},
    { key: "teamNum", name: "班组数量", minWidth: "80px" },
    { key: "personNum", name: "人员数量", minWidth: "80px" },
    { key: "startTime", name: "开始时间", minWidth: "120px" },
    { key: "endTime", name: "结束时间", minWidth: "120px" },
    { key: "operation",slot:true,name: "操作", minWidth:"230px", fixed:"right"}
  ],
    page:{
      pageSize:10,
        total:2,
          currentPage:1
    },
      loading:false

#使用分成两种情况，一种是带slot一种是不带slot的

#带slot
<ElTable :tableData="tableData" :tableColums="tableColums" :page="page" :loading="loading">
  <template #operation="scope">
    <el-button type="text" icon="el-icon-edit">修改</el-button>
  	<el-button type="text" icon="el-icon-delete">删除</el-button>
  </template>
</ElTable>

#不带slot
<ElTable :tableData="tableData" :tableColums="tableColums" :page="page" :loading="loading"></ElTable>

每天学习一点，进步一点。加油～～