vue2 elementUI 封装表格公共组件

1. 新建src\components\TablePagination\TablePagination.vue

<!-- element UI 表格分页组件 -->
<template>
  <div>
    <el-table
      ref="tableDataRef"
      :height="pagingConfiguration.tabH || tableHeight"
      :data="tableData"
      stripe
      border
      size="small"
      style="width: 100%;"
      @selection-change="selectionChange"
      :row-class-name="tableRowClassName"
      >
        <el-table-column v-if="pagingConfiguration.showIndex" width="50" type="index" align="center" :fixed="pagingConfiguration.indexFixed" label="序号"/>
        <el-table-column v-if="pagingConfiguration.selection" type="selection" width="50" align="center" :fixed="pagingConfiguration.selectionFixed"/>
        <el-table-column
          v-for="(item,index) in tableColumn"
          :key="index"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :show-overflow-tooltip="item.overflow"
          :align="item.align"
          :fixed="item.fixed"
        >
          <template slot-scope="scope">
            <el-switch v-if="item.type==='switch'" v-model="scope.row[item.prop]" @change="buttonClick(item.type,scope.row)" active-color="#3276FF" />
            <el-input v-else-if="item.type === 'input'" v-model="scope.row[item.prop]" :disabled="item.disabled" maxlength="100"  :clearable="item.clearable" :placeholder="`请输入${item.label}`" />
            <el-select
              v-else-if="item.type === 'select'"
              v-model="scope.row[item.prop]" 
              :placeholder="`请选择${item.label}`" 
              :clearable="item.clearable"
              :multiple="item.multiple"
              @change="item.event?selectChange(item.prop,scope.row):''"
            > 
              <el-option v-for="(item,index) in item.optionList" :key="index" :label="item.label" :value="item.value"/>
            </el-select>
            <div v-else-if="item.type==='operation'">
              <span class="table-func-btn" v-for="(value,index) in showButtonList(item.showButtonList,scope.row)" :key="index" @click="buttonClick(value.type,scope.row)">
                <span>{{ value.text }}</span>
              </span>
            </div>
            <!-- 可自行扩展组件 -->
            <span v-else>{{ scope.row[item.prop] }}</span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-if="pagingConfiguration.showPage"
        :page-sizes="pagingConfiguration.pageSizes"
        :page-size="searchForm.pageSize"
        :current-page="searchForm.pageNum"
        :layout="pagingConfiguration.layout"
        :total="pagingConfiguration.total"
        @size-change="pageCount"
        @current-change="handlePageChange"
      />
  </div>
</template>
<script>
export default {
  props: {
    // 分页配置
    pagingConfiguration: {
      type: Object,
      default: () => {
        return {}
      }
    },
    // 表格数据
    tableData: {
      type: Array,
      default: () => {
        return []
      }
    },
    // 分页参数
    searchForm: {
      type: Object,
      default: () => {
        return {}
      }
    },
    // 表头配置列
    tableColumn: {
      type: Array,
      default: () => {
        return []
      }
    },
  },
  data () {
    return {
      tableHeight:null
    }
  },
  mounted(){
    // 表格自适应高度
    this.tableHeight = $('.ass-container-main-sso').height() - 156
  },
  methods: {
    // 操作列按钮，包括启用、禁用互斥按钮
    showButtonList(list,row){
      const flagList = list.filter(o=> o.flag)
      if (flagList.length < 1) {
        return list
      } else {
        let buttonList = []
        let buttonObj = {}
        for (let i = 0; i < list.length; i++) {
          const element = list[i];
          if (element.flag) {
            if (element.flagValue == row[element.flag]) {
              buttonList.push(element)
            }
          } else {
            buttonObj = element
          }
        }
        return [...buttonList,buttonObj]
      }
    }, 
    // 操作列按钮点击事件
    buttonClick(type,row){
      this.$emit('change',type,row)
    },
    // 下拉框变化事件
    selectChange(type,row){
      console.log("type,row",type,row);
    },
    // 表格选择赋值
    selectionChange(row){
      this.$parent.rowList = row
    },
    // 表格分页切换
    handlePageChange(e) {
      this.searchForm.pageNum = e
      this.$emit('change')
    },
    // 表格分页切换
    pageCount(e) {
      this.searchForm.pageSize = e
      this.$emit('change')
    },
    // 表格行激活颜色
    tableRowClassName({row, rowIndex}) {
      if (this.pagingConfiguration.parentModuleName === 'materialList') {
        if (row.completedQty > 0 && row.completedQty < row.attribute8) {
          return 'warning-row';
        } else if (row.completedQty > 0 && row.completedQty == row.attribute8) {
          return 'success-row';
        }
      }
      return '';
    },
  },
}
</script> 
<style scoped lang="less">
  // 解决 最右侧定位列滚动错位问题
  th.el-table__cell.gutter{
      width: 10px !important;
      display: block !important;
      height: 33px !important;
  }

  body .el-table th.gutter {
      display: block !important;
  }

  /deep/.el-table {
    .warning-row {
      td {
        background: #fce2a3 !important;
      }
    }
    .success-row {
      td {
        background: #c8f6c2 !important;
      }
    }
  }
</style>

2，在业务组件使用

<template>
  <div v-loading="loading" class="assembly modifynewCss">
      <TablePagination 
        :table-column="tableColumn" 
        :table-data="tableData"
        :search-form="searchForm"
        :paging-configuration="pagingConfiguration"
        @change="tablePaginationChange" /> 
    </div>
  </div>
</template>

<script>
  import { tableColumn } from './config'
  import TablePagination from '@/components/TablePagination/TablePagination'
  export default {
    name: 'SpareListDistribution',
    components: {
      TablePagination
    },
    data() {
      return {
        pagingConfiguration:{
          total: 0,
          pageSizes :[30, 50, 100],
          layout: "total, sizes, prev, pager, next, jumper",
          showIndex: true,
          showPage: true,
          selection: false,
        },
        tableColumn, // 表格列数据
        loading: false,
        tableData: [], // 表格数据
        searchForm: { // 表单数据
          endUpdateDate: '',
          startUpdateDate: '',
          printStatus: '',
          lotNo: '',
          workOrder: '',
          workShop:'',
          qrCode:'',
          pageNum: 1, // 页码
          pageSize: 30 // 数量
        },
      }
    },
    mounted() {
      this.searchPage()
    },
    methods: {
      tablePaginationChange(type,value){
        console.log("type,value",type,value);
        if (type === 'reprint') {
          this.reprint(value)
        } else {
          this.searchPage()
        }
      },
      // 查询
      searchPage() {

      },
      reprint() {

      },
    }
  }
</script>

3. 新建cofing.js 配置表头文件

const printStatusList = [
  {label:"是",value:"Y"},
  {label:"否",value:"N"},
]
export const tableColumn = [
  {
    prop: 'id',
    label: 'ID',
    checked: true,
    width: 80,
    overflow: true
  },
  {
    prop: 'printerCode',
    label: '打印机编号',
    checked: true,
    width: 140,
    overflow: true
  },
  {
    prop: 'locationCode',
    label: '工作站',
    checked: true,
    width: 140,
    overflow: true
  },
  {
    prop: 'itemNo',
    label: '物料代码',
    checked: true,
    // width: 100,
    overflow: true
  },
  {
    prop: 'barCode',
    label: '条码',
    checked: true,
    // width: 140,
    overflow: true
  },
  {
    prop: 'qrCode',
    label: '二维码',
    checked: true,
    width: 100,
    overflow: true
  },
  {
    prop: 'qty',
    label: '数量',
    checked: true,
    width: 120,
    align:"right",
    overflow: true
  },
  {
    prop: 'workShop',
    label: 'WS',
    checked: true,
    width: 100,
    overflow: true
  },
  {
    prop: 'workOrder',
    label: 'WO',
    checked: true,
    width: 100,
    overflow: true
  },
  {
    prop: 'sortOrderId',
    label: '备料单id',
    checked: true,
    align:"center",
    width: 120,
    overflow: true
  },
  {
    prop: 'lotNo',
    label: 'LOT_NO',
    checked: true,
    align:"center",
    width: 120,
    overflow: true
  },  
  {
    prop: 'printStatusCopy',
    label: '是否打印',
    checked: true,
    type: select,
    optionList: printStatusList,
    width: 120,
    overflow: true
  },  
  {
    prop: 'lastUpdateDate',
    label: '更新时间',
    checked: true,
    width: 140,
    overflow: true
  },
  {
    prop: 'operation',
    label: '操作',
    type:'operation',
    width: 100,
    fixed:'right',
    checked: true,
    align:'center',
    showButtonList:[
      {type:'enable',text:'启用',flag:'enableFlag',flagValue:'失效'},
      {type:'enable',text:'禁用',flag:'enableFlag',flagValue:'有效'},
      {type:'emptyBox',text:'空箱补充'},
    ]
  },
]