前端基于Element-ui 二次封装el-table

自己工作中封装的 el-table，包含了分页器和el-table 表格，保存起来

1、组件内容

<template>
  <div class="question-table">
    <template>
      <el-table :data="allDate.items" style="width: 100%">
        <el-table-column v-if="isSerialShow" type="index" label="序号" />
        <el-table-column
          v-for="(item,index) in tableDetails"
          :key="index"
          :label="item.title"
          :prop="item.key"
        >
          <!-- 过滤时间、前台是否显示 -> 插槽-->
          <template slot-scope="{row}">
            <span>
              {
   
   {
                item.formatDate && item.formatDate(row.addDate)
                  ||item.isFrontShow && item.isFrontShow(row.isFrontDisplay)
                  ||item.stateNow && item.stateNow(row.state)
                  ||item.aa && item.aa(row.state)
                  || row[item.key]
              }}
            </span>
          </template>
          <!-- 过滤插槽-->
        </el-table-column>

        <el-table-column label="操作" width="300">
          <template slot-scope="{row}">
            <slot :row="row" />
          </template>
        </el-table-column>

      </el-table>
      <!-- 分页器 -->
      <el-row type="flex" justify="end">
        <el-pagination
          background
          :current-page="parseInt(allDate.page)"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="parseInt(allDate.pagesize)"
          layout="prev, pager, next,sizes, jumper"
          :total="parseInt(allDate.counts)"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-row>
    </template>
  </div>
</template>

<script>

export default {
  name: 'QuestionTable',
  components: {},
  props: {
    allDate: { // 所有数据信息
      type: Object,
      required: true
    },
    tableDetails: { // 表格的标题和字段
      type: Array,
      required: true
    },
    listPage: { // axios 发送的页码信息
      type: Object,
      required: true
    },
    pagesize: { // 获得以前的页大小，规避BUG
      type: Number,
      required: true
    },
    isSerialShow: { // 是否显示最左侧序号
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
    }
  },
  computed: {},
  watch: {},
  created() {
  },
  mounted() {},
  methods: {
    // 页码数量 改变
    handleSizeChange(pagesize) {
      this.$emit('update:listPage', {
        page: 1,
        pagesize: pagesize
      })
      this.$emit('updateList')
    },
    // 点击页码
    async handleCurrentChange(page) {
      this.$emit('update:listPage', {
        page: page,
        pagesize: this.pagesize
      })
      // 通知父组件刷新获取的数据
      this.$emit('updateList')
    }
  }
}
</script>
<style lang="scss">
.el-table th{
    background: #fafafa;
    border-bottom: 1px solid #e8e8e8 !important
}
.el-pagination{
  margin-top: 20px;;
}
.el-button--text{
  font-size: 12px;
}
</style>

2、父组件进行使用

<subject-table
  :all-date="allDate"
  :table-details="tableDetails"
  :list-page.sync="listPage"
  :pagesize="listPage.pagesize"
  @updateList="getSubjectList()"
>
  <template slot-scope="{row}">
       // row 中可以获取到 当前行的值
  </template>
</subject-table>

3、各参数传递格式与：

1、allDate：所有数据 --> 必传

他是当前table 需要遍历的数组，也就是组件中需要传递的 :data，他是组件中的每一列遍历的内容的基础数据

2、tableDetails：标题和查询字段 --> 必传

表格的标题和字段，他是一个数组，包含两个必须的属性，和一个过滤器，用来过滤

key：字段

是el-table 要在刚才传递的allData 中遍历后获取他里面的字段的 key值，用于显示页面，他与 allData中要获取到的数据的字段是一致的

title：标题

是每一列的标题位置，通常这个是根据ui 来设置的，这是死的。

过滤器：

可以用import 来引入一个过滤器，并return 出过滤好的值，将他添加到对应的对象中，并在子组件的template 中设置好就可以过滤

举例：tableDeatils的实例格式

import { formatDate, isFrontShow } from '@/filters'

tableDetails: [
  {
    title: '学科名称',
    key: 'subjectName'
  },
  {
    title: '创建日期',
    key: 'addDate',
    formatDate:formatDate
  },
  {
    title: '前台是否显示',
    key: 'isFrontDisplay',
    isFrontShow: isFrontShow
  },
]

注意：一定要在子组件的template 中定义好，不然不起效果！

3、listPage：axios 发送的页码信息 --> 必传

我获取table 渲染的字段的内容，通常是传递的页码，当前页码和当前显示的多少页

listPage 举例：

listPage: { // 传递页码
  page: 1,
  pagesize: 10
}

必须传递 list-page.sync 需要加.sync 修饰符，不然翻页不会重新发送axiox请求！

4、pagesize：单独传递后端返回的页码 --> 必传

通常我们都是通过在第三个字段 listPage 这个字段中进行获取，内部逻辑必须需要重新进行传递！

传递内容通常是：listPage.pagesize

5、isSerialShow：序号 ---> 非必传

传递一个布尔值，用来控制第一列是否显示序号，非必传

6、@updateList 方法 --> 必传

当点击页码

当页码数量改变

子组件会触发父组件的 updateList 方法，重新发送axiox 请求，来获取最新的数据

当更新后，他会修改子组件的 listPage ，然后父组件再次调用请求接口并携带最新的listPage 来重新获取数据

字段内容都是需要父组件和子组件进行配合使用，配合Element-ui + 子组件代码比较好理解，留下内容，防止以后忘记，很好用~

附带 el-table 文档地址：Element - The world's most popular Vue UI framework

前端 基于Element-ui 二次封装el-table