基于element 表格封装

<template>
  <div class="Ab_tbale">
    <el-table
      ref="table"
      stripe
      element-loading-text="Loading"
      :header-cell-style="{ background: '#E5E8EE' }"
      :cell-style="{ color: '#3B434D' }"
      :header-row-style="{ color: '#404040' }"
      size="medium"
      :data="tableData"
      border
      :fit="true"
      tooltip-effect="dark"
      style="width:100%"
      :max-height="maxHeight"
      @selection-change="handlerSelectChange"
      @select="handlerSelect"
      @select-all="handlerSelectAll"
    >
      <el-table-column v-if="hasSelect" align="center" type="selection" :selectable="selectEnable" width="50"> </el-table-column>
      <el-table-column v-for="(item, index) in columns" :render-header="item.renderHeader" :key="index" show-overflow-tooltip :width="item.width ? item.width : ''" :align="item.align || 'center'" :label="item.label" :prop="item.param" :sortable="item.sortable ? 'custom' : false">
        <template slot-scope="scope">
          <expand-dom v-if="item.render" :column="item" :row="scope.row" :render="item.render" :index="index">
            <!-- {{ item.render(scope.row) }} -->
          </expand-dom>
          <span v-else>{{ scope.row[item.param] }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="tableOption.label" :fixed="tableOption.fixed" :width="tableOption.width" :min-width="tableOption.minWidth" :label="tableOption.label" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <template v-for="(item, index) in tableOption.options">
            <el-button :key="index" :disabled="item.disabled ? item.disabled(scope.row) : false" :type="item.type" :size="item.size ? item.size : ''" :icon="item.icon" @click="handleButton(item.methods, scope.row, scope.row)">
              {{ item.label }}
            </el-button>
          </template>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination style="margin-top:10px" class="center" v-if="hasPage" background :current-page="currentPage" :page-size="pageSize" layout="total,prev,sizes ,pager, next,jumper" :page-sizes="[10, 20, 30, 40]" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
  </div>
</template>
<script>
export default {
  name: 'Table',
  components: {
    expandDom: {
      functional: true,
      props: {
        row: Object,
        render: Function,
        index: Number,
        column: {
          type: Object,
          default: null
        }
      },
      render: (h, ctx) => {
        const params = {
          row: ctx.props.row,
          index: ctx.props.index
        }
        if (ctx.props.column) params.column = ctx.props.column
        return ctx.props.render(h, params)
      }
    }
  },
  props: {
    total: {
      // 总条数
      type: Number,
      default: 1
    },
    currentPage: {
      // 当前页
      type: Number,
      default: 1
    },
    pageSize: {
      // 每页显示条数
      type: Number,
      default: 10
    },
    maxHeight: {
      // 最大高度
      type: [Number, String],
      default: 500
    },
    hasPage: {
      // 是否显示分页
      type: Boolean,
      default: true
    },
    hasSelect: {
      // 是否有选择框
      type: Boolean,
      default: false
    },
    // 是否单选
    singleChoice: {
      type: Boolean,
      default: false
    },
    tableData: {
      // table表单Object
      type: Array,
      default: () => {
        return []
      }
    },
    columns: {
      // table表头数据
      type: Array,
      default: () => {
        return []
      }
    },
    tableOption: {
      // 操作功能按钮数据
      type: Object,
      default: () => {
        return {}
      }
    },
    selectEnable: {
      type: Function,
      default: () => {}
    }
  },
  data() {
    return {}
  },
  created() {},
  methods: {
    handlerSelectAll(val) {
      this.$emit('handlerSelectAll', val)
    },
    handlerSelect(value, obj) {
      // 选中项
      this.$emit('handlerSelect', value)
    },
    handlerSelectChange(value) {
      if (value.length > 1 && this.singleChoice) {
        this.$refs.table.clearSelection()
        this.$refs.table.toggleRowSelection(value[value.length - 1])
      }
      if (this.singleChoice) {
        this.$emit('handlerSelectChange', value.slice(-1))
        return
      }
      this.$emit('handlerSelectChange', value)
    },
    handleButton(methods, row, index) {
      // 按钮事件
      this.$emit('handleButton', { methods: methods, row: row, index: index })
    },
    handleCurrentChange(val) {
      this.$emit('handlePageChange', val)
    },
    handleSizeChange(val) {
      this.$emit('handleSizeChange', val)
    },
    labelHead: function(h, { column, $index }) {
      let l = column.label.length
      let f = 16
      column.minWidth = f * (l + 2) //加上一个文字长度
      return h('div', { class: 'table-head', style: { width: '100%' } }, [column.label])
    },
    clearSelection() {
      this.$refs.table.clearSelection()
    }
  }
}
</script>
<style lang="less" scoped>
.Ab_tbale {
  .el-pagination {
    text-align: right;
  }
  th {
    background-color: #f5f5f5;
    font-weight: bold;
  }
  .el-table-column--selection div.cell {
    text-overflow: initial !important;
  }
}
</style>
<style scoped>
.center {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

全局引用方法

1. 在组件文件下创建个js 引入开发好的组件 并且抛出去

import xwxTable from './xwxComponents/xwxTable.vue'

function plugins(Vue) {
  Vue.component('xwxTable', xwxTable)
}

export default plugins

2. 在main.js 引入该js 并且使用

import plugins from './components/index'
Vue.use(plugins)

表格使用方法

<xwxTable
        :table-data="tableData"
        :columns="columns"
        :table-option="tableOption"
        :max-height="'600px'"
        :has-select="tableConfig.hasSelect"
        :singleChoice="tableConfig.singleChoice"
        :selectEnable="tableConfig.selectEnable"
        :total="total"
        :current-page="pageData.current"
        :page-size="pageData.size"
        @handlePageChange="handlePageChange"
        @handleSizeChange="handleSizeChange"
      ></xwxTable>

columns() {
      // 表头配置对象
      return [
          {
              label: '操作',
              param: 'value1',
              width: '190',
              render: (h, params) => {
                  const row = params.row
                  if(!commonFun.havePermission('10010104')){
                      return null;
                  }
                  let signButton = h(
                      'span',
                      {
                          attrs: { class: row.signFlag == "Y" ? "grey" : 'themeColor' },
                          style:"cursor:pointer",
                          on: {
                              click: () => {
                                  this.operation(row,1)
                              }
                          }
                      },
                      '1111'
                  );
                  let cancelButton = h(
                      'span',
                      {
                          attrs: { class: 'danger' },
                          style:"marginLeft:10px;cursor:pointer",
                          on: {
                              click: () => {
                                  this.operation(row,2)
                              }
                          }
                      },
                      '取消'
                  );
                  let closeButton = h(
                      'span',
                      {
                          attrs: { class: 'danger' },
                          style:"marginLeft:10px;cursor:pointer",
                          on: {
                              click: () => {
                                  this.operation(row,3)
                              }
                          }
                      },
                      '终止222'
                  );
                  let buttonArr = [];
                  if (row.status == "completed" || row.status == "cancel") {
                      return buttonArr;
                  }
                  if (row.signFlag == 'N') {
                      buttonArr.push(signButton);
                      buttonArr.push(cancelButton);

                      if(commonFun.havePermission('10010105')){
                          buttonArr.push(closeButton);
                      }
                  } else {
                      buttonArr.push(cancelButton);

                      if(commonFun.havePermission('10010105')){
                          buttonArr.push(closeButton);
                      }
                  }
                  return buttonArr;
              }
          },
        {
          label: '车222',
          param: 'plantNo',
          width: '130'
        },
        {
          label: '3333222',
          param: 'requestDate',
          width: '160'
        },
        {
          label: '444时444',
          param: 'timeSlot',
          width: '150'
        },
    
        {
          label: '签到43444',
          param: 'signFlag',
          render: (h, params) => {
            const row = params.row
            return h(
              'span',
              {
                Y: '已签到',
                N: '未签到'
              }[row.signFlag]
            )
          },
          width: '120'
        },
        {
          label: '444号',
          param: 'orderNo',
          width: '190'
        },
        {
          label: '4444来源',
          param: 'requestSource',
          width: '190',
          render: (h, params) => {
            const row = params.row
            return h(
              'span',
              {
                PC: '111',
                APP: '3333'
              }[row.requestSource]
            )
          }
        }
      ]
    },