el-table二次封装组件-可分页-可加按钮操作

1.封装的table组件内容

<template>
  <div class="table">
    <el-table :data="tableData" v-bind="$attrs" border v-loading="loading" v-on="$listeners">
      <template v-for="(item, index) in tableColumn">
        <template v-if="item.slot">
          <slot :name="item.slot" :item="item"></slot>
        </template>
        <el-table-column
          v-else
          :key="index"
          :prop="item.prop"
          :label="item.label"
          v-bind="item.attrs"
          :show-overflow-tooltip="item.showTooltip === undefined ? true : item.showTooltip"
        >
          <template slot-scope="scope">
            <span
              @click="item.tplHandle ? item.tplHandle(scope.row) : () => {}"
              :class="item.tplHandle ? 'canjump' : ''"
              v-html="item.tplRender ? item.tplRender(scope.row, item) : scope.row[item.prop]"
            ></span>
          </template>
        </el-table-column>
      </template>
      <el-table-column
        label="操作"
        v-if="controls.length > 0"
        fixed="right"
        :width="controls.length >= 2 ? '130' : '100'"
      >
        <template slot-scope="scope">
          <div style="white-space: nowrap">
            <el-button
              type="text"
              class="txtOh"
              v-for="(item, index) in controls"
              :key="index"
              size="small"
              v-show="!item.visible || !item.visible(scope.row)"
              @click="
                () => {
                  item.handle(scope.row, scope.$index)
                }
              "
              :title="item.btnText"
            >
              {{ item.btnText || (item.btnTextFunc && item.btnTextFunc(scope.row)) }}
              <span v-if="item.btnSolt" v-html="item.btnSolt(scope.row)"></span>
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <Paging
      v-if="showPage"
      @size-change="sizeChange"
      @current-change="currentChange"
      :current-page="currentPage"
      :page-size="pageSize"
      :total="total"
    ></Paging>
  </div>
</template>
<script>
import Paging from '@/components/StTable/pagination'
export default {
  name: 'StTable',
  components: { Paging },
  props: {
    tableColumn: {
      type: Array,
      default: () => {
        return []
      }
    },
    // 操作栏按钮
    controls: {
      type: Array,
      default: () => {
        return []
      }
    },
    api: {},
    // 是否分页 不加分页可不加后三个字段
    showPage: {
      type: Boolean,
      default: false
    },
    currentPage: {
      type: Number,
      default: 1
    },
    pageSize: {
      type: Number,
      default: 20
    },
  },
  data() {
    return {
      loading: false,
      tableData: [],
      total: 0, // 分页--数据总数
    }
  },
  created() {
    this.refresh()
  },
  computed: {},
  watch: {},
  methods: {
    refresh() {
      this.loading = true
      if (this.api) {
        this.api()
          .then((res) => {
            let data = res.data
            if (!this.showPage) { //分页
              this.tableData = data
            } else { // 不分页
            // 根据接口自行定义字段
              this.tableData = data.list || []
              this.total = data.total || 0
            }
          })
          .finally((res) => {
            this.loading = false
          })
      } else {
        this.loading = false
        this.tableData = []
      }
    },
    sizeChange(val) {
      this.$emit('handle-size-change', val)
    },
    currentChange(val) {
      this.$emit('handle-current-change', val)
    }
  }
}
</script>
<style lang="scss" scoped>
.table {
  margin-bottom: 16px;
}
.canjump{
  color: #409EFF;
  cursor: pointer;
}
.txtOh{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
</style>

2.分页器组件

组件默认效果:

<template>
  <el-pagination
    class="flex_center"
    v-on="$listeners"
    :current-page="currentPage"
    :page-size="pageSize"
    :page-sizes="pageSizes"
    :layout="layout"
    :total="total"
  >
  </el-pagination>
</template>

<script>
export default {
  name: 'jhPagination',
  props: {
    total: {},
    layout: {
      default: 'total, sizes, prev, pager, next, jumper'
    },
    pageSizes: {
      default() {
        return [10, 20, 30, 40]
      }
    },
    pageSize: {
      default: 20
    },
    currentPage: {
      default: 1
    }
  },
  data() {
    return {
      page: 1,
      size: 10
    }
  },
  watch: {
    pageSize: {
      handler(val) {
        this.size = val
      },
      immediate: true
    },
    currentPage: {
      handler(val) {
        this.page = val
      },
      immediate: true
    }
  },
  created() {},
  methods: {}
}
</script>
<style lang="scss" scoped>
.el-pagination {
  margin-top: 10px;
  border-radius: 5px;
  background-color: #fff;
}
</style>

3.引入组件

table组件中的操作效果：

// 使用table组件-import引入StTable
  <StTable
  	ref="tableRef"
    :api="getName"
   	:show-page="true"
    :controls="controls"
    :tableColumn="tableColumn"
    @handle-size-change="sizeChange"
    @handle-current-change="currentChange"
  >
  </StTable>
  
  data() {
  // 操作
  	controls: [
      {
        btnText: '详情',
        handle: (row) => { // 点击按钮
          this.handleDetail(row)
        }
      }
    ],
    pageNum: 1,
    pageSize: 20,
    tableColumn: [
      { prop: 'index', slot: 'radio' },
      { prop: 'inhospNo', label: '住院号' },
      { prop: 'userName', 
      	label: '医院工作人员',
      	tplRender: (row) => { // 需要动态渲染显示文本
      	  return row.docName || row.userName
   	  	}
      },
      { prop: 'planCount',
        label: '路径总数',
        tplHandle: row => { // 事件操作
          this.showDetail(row)
        }
      },
      ......
    ],
  },
  methods: {
    sizeChange(val) {
      this.pageSize = val
      this.search()
    },
    currentChange(val) {
      this.pageNum = val
      this.search()
    },
    search() {
      this.pageNum = 1
      this.$refs['tableRef'].refresh()
    }, 
  }