elementUI table二次封装加分页器分享

前言

​ 最近在做自己的项目一个小项目练手的时候，封装了一个前端的table控件，感觉还挺方便的，顺便分享给大家，有写的不好的，可以多多指教，顺便也可以加深一下自己的印象。

封装代码

这里的代码是放在：src/components/HlTable/index.vue

<template>
  <div>
    <div>
      <div>
        <!--这里放按钮-->
        <el-button v-for="item in buttonList" :key="item.click" :type="item.type" :icon="item.icon" style="margin-bottom: 10px" @click="buttonClick(item.click)">{{ item.clickName }}</el-button>
      </div>
      <div>
        <!--这里是table-->
        <el-table v-loading="listLoading" :data="sourceData" border @selection-change="handleSelectionChange" @select="handleSelect" @select-all="handleSelectAll">
          <slot></slot>
        </el-table>
      </div>
    </div>
    <div>
      <!--分页器-->
      <el-pagination
        style="float: right;margin-top:20px"
        :page-size="tablePageSize"
        :page-sizes="[10, 20, 50, 100]"
        :current-page.sync="pageIndex"
        :total="sourceTotal"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HlTable',
  props: {
    dataUrl: {
      type: String,
      default: ''
    },
    queryForm: {
      type: Object,
      default: null
    },
    buttonList: {
      type: Array,
      default: null
    }
  },
  data() {
    return {
      tablePageSize: 20,
      pageIndex: 1,
      sourceTotal: 0,
      sourceData: [],
      listLoading: false,
      checkboxData: [] // 选中的数据
    }
  },
  created() {
    this.getTable(1, 20)
  },
  methods: {
    // 每页 ${val} 条
    handleSizeChange(val) {
      this.tablePageSize = val
      this.getTable(1, val)
    },
    // 当前页: ${val} 页
    handleCurrentChange(val) {
      this.pageIndex = val
      this.getTable(val, this.tablePageSize)
    },
    /** 当用户手动勾选数据行的 Checkbox 时触发的事件
    * row是当前选中的行，val是选中的行，可能有多行
    * */
    handleSelect(val, row) {
      this.checkboxData = val
    },
    /* 当用户手动勾选全选 Checkbox 时触发的事件	*/
    handleSelectAll(val) {
      this.checkboxData = val
    },
    /* 当选择项发生变化时会触发该事件 */
    handleSelectionChange() {
    },
    // 按钮方法
    buttonClick(click) {
      // 向调用者，“抛出”一个方法
      this.$emit(click, this.checkboxData)
    },
    // 获取表格数据
    getTable(index, size) {
      const param = {
        pageIndex: index || 1,
        pageSize: size || 20
      }
      this.tablePageSize = size || 20
      this.pageIndex = index || 1
      if (this.queryForm) {
        for (const attr in this.queryForm) {
          param[attr] = this.queryForm[attr]
        }
      }
      this.listLoading = true
      this.$http.get(this.dataUrl, param).then(res => {
        if (res) {
          this.sourceData = res.list
          this.sourceTotal = res.total
        }
        this.listLoading = false
      }).catch(errer => {
        this.$message.error(errer.message)
        this.listLoading = false
      })
    }
  }
}
</script>

<style scoped>
</style>

代码解读

props里接受了三个参数

1. dataUrl: 这是用来填充table表格的数据后端接口地址
2. queryForm: 用来接受table表格头部的条件
3. buttonList: table表格上线的按钮，如新增、删除等

methods方法解释

1. getTable(index, size)  方法就是获取table表格的数据方法

调用案例

<template>
  <div class="app-container">
    <el-form :inline="true" :model="queryForm" class="demo-form-inline">
      <el-form-item label="角色名称">
        <el-input v-model="queryForm.roleName" placeholder="角色名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="queryData">查询</el-button>
      </el-form-item>
    </el-form>
    <hl-table ref="HlTable" :data-url="dataUrl" :query-form="queryForm">
      <el-table-column type="selection" align="center" width="55"></el-table-column>
      <el-table-column align="center" label="ID" prop="roleId" width="55"></el-table-column>
      <el-table-column label="角色名称" prop="roleName"></el-table-column>
      <el-table-column label="操作" align="center" width="100px">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </hl-table>
  </div>
</template>

<script>
import HlTable from '@/components/HlTable/index'
export default {
  name: 'RoleList',
  components: { HlTable },
  data() {
    return {
      dataUrl: '/frontend/api/role/tableList',
      queryForm: {}
    }
  },
  watch: {
  },

  methods: {
    handleEdit(index, item) {
    },
    queryData () {
      this.$refs.HlTable.getTable()
    }
  }
}
</script>

主要是先引入：import HlTable from ‘@/components/HlTable/index’

然后就是可以直接在hl-table里写elementUI里写标签了，至于为什么不把el-table-column也给封装一下，个人感觉没有必要，而且项目在开发的过程中，el-table-column的标签的情况是多样的，有时候可能想需要一些特殊的操作。所以这里我就没有把el-table-column也给封装一下，直接用的是elementUI原生的。

最后的效果图如下：