elementui table+分页组件封装

1. table组件

<template>
  <div class="table-wrap">
    <el-table :data="tableList" highlight-current-row size="small" height="450px" border style=" 100%" v-loading="loading" @selection-change="handleSelectionChange">
      <!-- 复选框 -->
      <el-table-column v-if="options && options.selection" type="selection" style=" 55px" align="center" />
      <el-table-column v-if="options && options.index" :label="options && options.labelIndex" type="index" width="60" align="center" />
      <!-- 表格数据 -->
      <template v-for="item in tableName">
        <el-table-column :key="item._id" :property="item.prop" :label="item.label" :align="item.align" :width="item.width">
          <template slot-scope="scope">
            <template v-if="!item.render">
              <template v-if="item.formatter">
                <span v-html="item.formatter(scope.row, item, scope.$index)" @click="item.click && item.click(scope.row, scope.$Index)"></span>
              </template>
              <template v-else-if="item.newjump">
                <router-link class="newjump" v-bind="{ terget: '_blank', ...item.target }" :to="item.newjump(scope.row, scope.$index)"></router-link>
              </template>
              <template v-else>
                <span :style="item.click ? 'color: #409EFF; cursor: pointer;' : null" @click="item.click && item.click(scope.row, scope.$index)">
                  {{scope.row[item.prop] || item.content}}
                  {{`${scope.row[item.prop] && item.unit ? item.unit : ''}`}}
                </span>
              </template>
            </template>
            <template v-else>
              <render :column="column" :row="scope.row" :render="item.render" :index="index"></render>
            </template>
          </template>
        </el-table-column>
      </template>
      <!-- 按钮 -->
      <el-table-column v-if="options && options.slotcontent" label="操作" align="center">
        <template slot-scope="scope">
          <slot :data="scope.row" />
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  name: 'tableComponent',
  components: {
    render: {
      functional: true,
      props: {
        row: Object,
        render: Function,
        index: Number,
        column: {
          type: Object,
          default: null
        }
      },
      render: (h, opt) => {
        const params = {
           row: opt.props.row,
           index: opt.props.index
        }
        if(opt.props.column) params.column = opt.column
        return opt.props.render(h, params)
      }
    }
  },
  props: {
    options: Object,
    tableName: {
      type: Array,
      default() {
        return []
      }
    },
    tableList: {
      type: Array,
      default() {
        return []
      }
    },
    column: {
      type: Array,
      default() {
        return []
      }
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    handleSelectionChange(val) {
      this.mutipleSelection = val
      this.$emit('handleSelectionChange', Array.from(val))
    }
  }
    
}
</script>

2. 分页组件

<template>
  <div class="pagination">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="queryForm.pageno"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="queryForm.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="queryForm.total"
    />
  </div>
</template>
<script>
export default {
  name: 'paginationComponent',
  props: {
    queryForm: {
      type: Object,
      default() {
        return {
          pageno: 1,
          pagesize: 10,
          total: 0
        }
      }
    }
  },
  methods: {
    handleCurrentChange(e) {
      this.$emit('getList', { page: e })
    },
    handleSizeChange(e) {
      this.$emit('getList', { size: e })
    },
  }
}
</script>

3. 页面使用

<table-component :tableName="resourceName" :tableList="resourceList" :options="resourceOptions" :loading="treeLoading">
  <template slot-scope="scope">
    <el-button size="mini" type="primary" plain @click="handleEdit(scope.data)">编辑</el-button>
    <el-button size="mini" type="danger" @click="handleDelete(scope.data)">删除</el-button>
  </template>
</table-component>
<div class="pagination-wrap">
  <pagination-component :queryForm="queryForm" @getList="getList"></pagination-component>
</div>

import tableComponent from '@/components/tableComponent'
import paginationComponent from '@/components/paginationComponent'
import { getResourceList } from '@/api/resource'
export default {
  name: 'resourceManage',
  components: { tableComponent, paginationComponent },
  data() {
    return {
      queryForm: {
        pid: 0,
        pageno: 1,
        pagesize: 10,
        total: 0
      },
      treeLoading: false,
      resourceName: [],
      resourceList: [],
      resourceOptions: {}
    }
  },
  created() {
    this.resourceOptions = {
      index: true,
      labelIndex: '序号',
      slotcontent: true
    },
    this.resourceName = [{
      prop: 'id',
      label: '资源ID',
      align: 'center',
       '80'
    },{
      prop: 'pid',
      label: 'PID',
      align: 'center',
       '80'
    },{
      prop: 'title',
      label: '资源名称',
      align: 'center',
       '80'
    },{
      prop: 'path',
      label: '资源路径',
      align: 'center',
       '80'
    },{
      prop: 'type',
      label: '资源类型',
      align: 'center',
       '80',
      formatter: e => {
        if(e == 1) {
          return '链接'
        } else {
          return '按钮'
        }
      }
    },{
      prop: 'updateTime',
      label: '更新时间',
      align: 'center',
       '80'
    },{
      prop: 'createTime',
      label: '创建时间',
      align: 'center',
       '80'
    }]
    this.getList()
  },
  methods: {
    async getList() {
      let res = await getResourceList(this.queryForm)
      if(res && res.code == 0) {
        this.resourceList = res.data.list
        this.queryForm.total = res.data.total
      } else {
        this.$message.error('请求出现错误，请稍后重试');
      }
    }
  }
}