② elementui table+分页组件封装

1 table组件

1.1 模板

<template>
  <div class="table-wrap">
    <el-table :data="tableList" highlight-current-row size="small" height="450px" border style="width: 100%" v-loading="loading" @selection-change="handleSelectionChange">
      <!-- 复选框 -->
      <!-- 表格数据 -->
      <!-- 按钮 -->
    </el-table>
  </div>
</template>

1. 复选框

<el-table-column v-if="options && options.selection" type="selection" style="width: 55px" align="center" />
<el-table-column v-if="options && options.index" :label="options && options.labelIndex" type="index" width="60" align="center" />

2. 表格数据

<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>

3. 按钮

<el-table-column v-if="options && options.slotcontent" label="操作" align="center">
  <template slot-scope="scope">
    <slot :data="scope.row" />
  </template>
</el-table-column>

1.2 数据

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: Array,
    tableList: Array,
    column: Array,
    loading: Boolean
  },
  methods: {
    handleSelectionChange(val) {
      this.mutipleSelection = val
      this.$emit('handleSelectionChange', Array.from(val))
    }
  }
}

2 分页组件

2.1 模板

<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>

2.2 数据

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 })
    },
  }
}

3 页面使用

3.1 模板

<template>
  <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>
</template>

3.2 数据

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', width: '80' },
      { prop: 'pid', label: 'PID', align: 'center', width: '80' },
      { prop: 'title', label: '资源名称', align: 'center', width: '80' },
      { prop: 'path', label: '资源路径', align: 'center', width: '80' },
      { prop: 'type', label: '资源类型', align: 'center', width: '80',
        formatter: e => {
          if(e == 1) {
            return '链接'
          } else {
            return '按钮'
          }
        }
      },
      { prop: 'updateTime', label: '更新时间', align: 'center', width: '80' },
      { prop: 'createTime', label: '创建时间', align: 'center', width: '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('请求出现错误，请稍后重试');
      }
    }
  }
}