2、关于Element-UI Table表格组件的二次封装

1、在components文件夹下创建一个Pagination.vue文件

<template>
  <div :class="{'hidden':hidden}" class="pagination-container">
    <el-pagination :background="background" :current-page.sync="currentPage" :page-size.sync="pageSize" :layout="layout" :page-sizes="pageSizes" :total="total" v-bind="$attrs" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
  </div>
</template>

<script>
export default {
  name: 'Pagination',
  props: {
    total: {
      required: true,
      type: Number
    },
    page: {
      type: Number,
      default: 1
    },
    limit: {
      type: Number,
      default: 20
    },
    pageSizes: {
      type: Array,
      default() {
        return [10, 20, 30, 50]
      }
    },
    layout: {
      type: String,
      default: 'total, sizes, prev, pager, next, jumper'
    },
    background: {
      type: Boolean,
      default: true
    },
    autoScroll: {
      type: Boolean,
      default: true
    },
    hidden: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    currentPage: {
      get() {
        return this.page
      },
      set(val) {
        this.$emit('update:page', val)
      }
    },
    pageSize: {
      get() {
        return this.limit
      },
      set(val) {
        this.$emit('update:limit', val)
      }
    }
  },
  methods: {
    handleSizeChange(val) {
      this.$emit('pagination', { page: this.currentPage, limit: val })
    },
    handleCurrentChange(val) {
      this.$emit('pagination', { page: val, limit: this.pageSize })
    }
  }
}
</script>
           

2、在components文件夹下创建一个baseList.vue文件

<template>
  <div class="tableDiv">
    <el-table v-loading="listLoading" :data="listData" element-loading-text="加载中" border fit highlight-current-row stripe :height="height"  @sort-change="sortChanged">
      <!-- 
      key：对应字段所绑定的key值
      label：对应字段展示的名称
      align：表格对齐方式
      header-align：表头对齐方式
      show-overflow-tooltip：当td文字超出宽度时显示省略号，鼠标放置上去显示全部文字
        -->
      <el-table-column v-for="column in columns" :key="column.key" :label="column.label" :align="column.align || 'center'" :header-align="column.headerAlign" :width="column.width" :min-width="column.minWidth" :max-width="column.maxWidth" :show-overflow-tooltip="column.overflow || false">
        <template slot-scope="scope">
          <slot :name="column.key" :index="scope.$index" :row="scope.row" :column="column">
            {{ format != null && typeof(format[column.key]) != "undefined"
              ? format[column.key](scope.row, scope.$index)
              : scope.row[column.key]
            }}
          </slot>
        </template>
      </el-table-column>
    </el-table>
	<!-- 引入分页组件 -->
    <pagination v-show="total>0" :total="total" :page.sync="limitQuery.page" :limit.sync="limitQuery.pageSize" @pagination="fetchData" />
  </div>
</template>

<script>
import Pagination from '@/components/Pagination' 
export default {
  name: 'BaseList',
  components: { Pagination },
  props: {
    url: { type: String, default: '' },
    query: { type: Object, default: () => { } },
    columns: { type: Array, default: () => [] },
    format: { type: Object, default: () => { } },
    append: { type: Object, default: () => { } },
    listData: { type: Array, default: () => [] },
    total: { type: Number, default: 0 },
    height: { type: Number, default: 300 }
  },
  data: () => {
    return {
      // -- 参数 --
      limitQuery: {
        page: 1,
        pageSize: 10,
        sort: '+id'
      },
      // -- 状态 --
      listLoading: false
    }
  },
  methods: {
  	// 选中多个数据
    sortChanged(val) { },
    // 点击切换分页
    fetchData(val) {
      this.$emit('changePage', val)
    }
  }
}
</script>
           

3、在页面中引用

<template>
  <div class="contentDiv">
    <div class="tableBox">
      <p class="title">隧道综合管理</p>
      <el-row class="search">
        <el-col :span="24">
          <el-button icon="el-icon-circle-plus-outline" @click="TunnelShow = true; tunnelId = null">添加隧道</el-button>
          <el-button icon="el-icon-refresh" @click="getList()">刷新</el-button>
        </el-col>
      </el-row>
      <baseTable v-loading="TableLoading" element-loading-text="正在加载…" element-loading-background="rgba(9, 34, 75, 0.5)" :columns="columns" :list-data="tableData" :total="page.total" :height="565" @changePage="changePage">
        <!-- slot：这个很重要！！！需要处理的数据必须绑定上这个 不然数据不生效  -->
        <template slot="indexNum" slot-scope="scope">
          {{ (page.pageNum - 1) * page.pageSize + scope.index + 1 }}
        </template>
        <template slot="handle" slot-scope="scope">
          <div class="sbcz_page">
            <el-button style="background:#374cbe">查看</el-button>
            <el-button style="background:#03ac87">编辑</el-button>
            <el-button style="background:#ff504c">删除</el-button>
          </div>
        </template>
      </baseTable>
    </div>
  </div>
</template>

<script>
import baseTable from '@/components/BaseList'
export default {
  components: {
    baseTable
  },
  data() {
    return {
      // 列表请求参数以及查询参数
      tableQuery: {
        beginTime: null,
        endTime: null,
        isDesc: true,
        name: null,
        orderColumn: null,
        pageNum: 1,
        pageSize: 10
      },
      page: {
        total: 0,
        pageSize: 0,
        pageNum: 0
      },
      // 列表数据
      tableData: null,
      // 表头
      columns: [
        { label: '序号', key: 'indexNum' },
        { label: '隧道名称', key: 'name' },
        { label: '上行起始桩号', key: 'upBeginPile' },
        { label: '上行结束桩号', key: 'upEndPile' },
        { label: '上行隧道长度', key: 'upLength' },
        { label: '下行起始桩号', key: 'downBeginPile' },
        { label: '下行结束桩号', key: 'downEndPile' },
        { label: '下行隧道长度', key: 'downLength' },
        { label: '操作', key: 'handle', width: 210 }
      ],
      // 列表loading
      TableLoading: true
    }scrollTo
  },

  mounted() {
    this.getList()
  },

  methods: {
    // 请求隧道列表数据
    getList() {
      this.TableLoading = true
      // res 数据补充在下面依作参考
      const res = {}	  
      if (res.code === '000000') {
        this.TableLoading = false
        this.tableData = res.data.list
        this.page.total = res.data.total
        this.page.pageSize = res.data.pageSize
        this.page.pageNum = res.data.pageNum
      } else {
        this.$message.error(res.msg)
      }
    },
    // 切换分页
    changePage(e) {
      this.tableQuery.pageSize = e.limit
      this.tableQuery.pageNum = e.page
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
.sbcz_page {
  .el-button {
    margin: 0;
    padding: 5px 8px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    line-height: 17px;
    border: none;
  }
}
</style>
           

<script>
// res 数据
const res = {
  code: '000000',
  msg: '处理成功',
  time: '2022-11-15T06:05:48.876Z',
  data: {
    total: 7,
    list: [{
      id: 30,
      createBy: null,
      createTime: '2022-11-14 13:03:11',
      updateBy: null,
      updateTime: null,
      name: '隧道1',
      sort: 7,
      upBeginPile: 'k184+962',
      upEndPile: 'k185+697.2',
      upBeginPileM: 184962.0,
      upEndPileM: 185697.2,
      downBeginPile: 'k185+076',
      downEndPile: 'k185+809.2',
      downBeginPileM: 185076.0,
      downEndPileM: 185809.2,
      upLength: 735.2,
      downLength: 733.2,
      lon: 0.0,
      lat: 0.0
    }, {
      id: 29,
      createBy: null,
      createTime: '2022-11-14 13:02:17',
      updateBy: null,
      updateTime: null,
      name: '隧道2',
      sort: 6,
      upBeginPile: 'k181+676',
      upEndPile: 'k184+916',
      upBeginPileM: 181676.0,
      upEndPileM: 184916.0,
      downBeginPile: 'k181+840',
      downEndPile: 'k185+202',
      downBeginPileM: 181840.0,
      downEndPileM: 185202.0,
      upLength: 3240.0,
      downLength: 3362.0,
      lon: 0.0,
      lat: 0.0
    }],
    pageNum: 1,
    pageSize: 10,
    size: 0,
    startRow: 0,
    endRow: 0,
    pages: 1,
    prePage: 0,
    nextPage: 0,
    isFirstPage: false,
    isLastPage: false,
    hasPreviousPage: false,
    hasNextPage: false,
    navigatePages: 0,
    navigatepageNums: null,
    navigateFirstPage: 0,
    navigateLastPage: 0
  }
}
</script>