Element-UI 二次封装

实现功能将 table 和分页相结合，通过一个标签即可实现。

使用

安装

npm install zy-pub-table

引入标签

 <!-- 表格组件 -->
    <pub-table :data="data"
               :total="total"
               :selection="false"
               :height="400"
               :currentPage="tableParams.currentPage"
               :pageSize="tableParams.pageSize"
               @handleSizeChange="handleSizeChange"
               @handleCurrentChange="handleCurrentChange"
               @handleSelectionChange="handleSelectionChange">
      <!-- <el-table-column type="index"
                       width="50"
                       label="序号"></el-table-column> -->
      <el-table-column v-for="(item, index) in dataColumns"
                       width="125"
                       :key="index"
                       :prop="item.prop"
                       :label="item.Name">
      </el-table-column>
       <!-- <template slot-scope="scope">
          <span v-if="item.prop !== 'operation'">{{scope.row[item.prop]}}</span>
          <div v-else
               style="width: 100px;">
            <span :style=""
                  @click="detailEdit($event, scope.row)">详情</span>
            <span :style=""
                  @click="detailEdit2($event, scope.row)">详情2</span>
          </div>
        </template>-->
    </pub-table>

js 配置

import { columns, data } from './service'
  data () {
    return {
      columns: columns,
      data: data,
      total: 0,
    }
  },
    created () {
    this.tableParams = {
      currentPage: this.currentPage,
      pageSize: this.pageSize,
  },
    computed: {
    dataColumns: {
      get: function () {
        return this.columns

      }
      // set: function (value) {
      //   this.dataColumns = value
      // }
    }
  },
    methods: {
      //分页页数事件
    handleSizeChange (val) {
      this.tableParams.pageSize = val
      this.getTableList(this.tableParams)
    },
    //分页大小事件
    handleCurrentChange (val) {
      this.tableParams.currentPage = val
      this.getTableList(this.tableParams)
    },
    //表格复选框事件
    handleSelectionChange (selection) {
      this.select(selection)
    }
  }

传入数据类型

export const columns = [
  {
    Name: '名称',
    prop: 'Name',
  },

]

export const data = [
  { Name: 'aaaa' },
]