vue项目中创建一个表格的公共组件

分享下项目中封装的表格组件，使用的element-ui里面的Table 表格进行的二次封装，里面加入了表格宽度自适应，自定义分页样式添加了首尾页的跳转

<template>
    <div style="height: 100%; display: flex; flex-direction: column">
        <div style="flex: 1; height: 0">
            <el-table
                ref="table"
                element-loading-text="Loading"
                stripe
                :data="tableData"
                :row-style="rowStyle"
                :cell-class-name="cellClassName"
                @cell-click="cellClick"
                border
                :span-method="objectSpanMethod"
                tooltip-effect="dark"
                style="font-size: 14px"
                height="100%"
            >
                <!-- 复选框前面有序号 -->
                <el-table-column
                    v-if="showSelection"
                    :selectable="checkSelectable"
                    width="80"
                    type="selection"
                    min-width="350"
                    max-width="100000"
                    align="center"
                ></el-table-column>
                <!-- 只是序号 -->
                <el-table-column type="index" label="序号" width="60" align="center" :index="indexMethod" v-if="indexShow">
                </el-table-column>
                <el-table-column
                    v-for="(item, index) in tableLabel"
                    :key="index"
                    :prop="item.field"
                    align="center"
                    :label="item.title"
                    :min-width="flexColumnWidth(item.field, item.title, tableData)"
                >
                    <!-- :width="flexColumnWidth(item.field,item.title, tableData)" -->
                </el-table-column>
            </el-table>
        </div>

        <!-- 分页 -->
        <div class="page-box">
          <el-pagination
            v-show="showPagination"
            style="text-align: center"
            :page-sizes="[5, 10, 15, 20]"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="pager.currentPage"
            :page-size.sync="pager.pageSize"
            :hide-on-single-page="false"
            layout="slot, prev, pager, next"
            :total="pager.total"
            background
          >
            <el-button type="text" @click="jumpPage('0')" class="firstPage"></el-button>
          </el-pagination>
          <el-pagination
            v-show="showPagination"
            style="text-align: center"
            :page-sizes="[5, 10, 15, 20]"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="pager.currentPage"
            :page-size.sync="pager.pageSize"
            :hide-on-single-page="false"
            layout=" slot, sizes, total"
            :total="pager.total"
            background
          >
            <el-button type="text" @click="jumpPage('1')" class="lastPage"></el-button>
          </el-pagination>
        </div>
    </div>
</template>

这个组件的分页，在element组件pagination分页的基础上加入插槽修改其原本的样式，添加了首页和尾页的跳转。如图所示：

js部分

<script>
export default {
    data() {
        return {};
    },
    props: {
        indexInfoList: {
            type: Array,
            default: () => {
                return [];
            }
        },
        tableData: {
            // 表格数据
            type: Array,
            default: () => {
                return [];
            }
        },
        tableLabel: {
            // label信息
            type: Array,
            default: () => {
                return [];
            }
        },
        tableOption: {
            // 操作数据
            type: Object,
            default: () => {
                return {};
            }
        },
        showSelection: {
            // 是否显示复选框
            type: Boolean,
            default: true
        },
        showPagination: {
            // 是否显示分页插件
            type: Boolean,
            default: true
        },
        indexShow: {
            type: Boolean,
            default: false
        },
        pager: {
            // 分页信息
            type: Object,
            default: function () {
                return {
                    currentPage: 1,
                    pageSize: 5,
                    total: 0
                };
            }
        }
    },
    created() {
     
    },
    mounted() {
      // this.UpdatePage()
    },
    updated() {
      // dom添加序列号
      this.UpdateTableHeader()
      this.UpdateTableBody()
    },
    methods: {
        checkSelectable(row) {
            return true;
            // console.log(row)
            // return row.isDelete != '0';
        },
        // 触发自定义按钮操作
        handleButton(method, row) {
            this.$emit('handleButton', method, row);
        },
        // 获取所有的复选框选项
        getAllSelections() {
            return this.$refs.table.selection;
        },
        // size发生变化时，令currentPgae为1，并发送自定义事件
        handleSizeChange(val) {
            this.pager.currentPage = 1;
            this.$emit('sizeChange', val);
        },
        // currentPage发生变化时，发送自定义事件
        handleCurrentChange(val) {
            this.$emit('currentPageChange', val);
        },
        cellClick(row, column, cell, event) {
            this.$emit('cellClick', row, column, cell, event);
        },
        cellClassName({ row, column, rowIndex, columnIndex }) {
            this.$emit('cellClassName', { row, column, rowIndex, columnIndex });
        },
        //列表序号修改
        indexMethod(index) {
            index = index + 1 + (this.pager.currentPage - 1) * this.pager.pageSize;
            return index;
        },
        // 自适应表格列宽
        flexColumnWidth(str, title, tableData) {
            // console.log(str);
            // console.log(title);
            // console.log(this.tableData);
            this.tableData.forEach((item) => {
                for (let j in item) {
                    item[j] = item[j].toString();
                }
            });
            // if (!tableData || !tableData.length || tableData.length === 0 || tableData === undefined) return false;
            if (!str || !str.length || str.length === 0 || str === undefined) return false;
            let columnLength = 0,
                temp = 0;
            for (let i = 0; i < tableData.length; i++) {
                if (!tableData[i][str]) {
                    tableData[i][str] = '';
                }
                let tCount = 0,
                    lCount = 0;
                for (let j = 0; j < tableData[i][str].length; j++) {
                    if (/^[\u4e00-\u9fa5]{0,}$/.test(tableData[i][str][j])) {
                        tCount += 4;
                    } else if (/^[A-Za-z0-9]+$/.test(tableData[i][str][j])) {
                        tCount += 2;
                    } else {
                        tCount += 0.5;
                    }
                }
                for (let k = 0; k < title.length; k++) {
                    if (/^[\u4e00-\u9fa5]{0,}$/.test(title[k])) {
                        lCount += 4;
                    } else if (/^[A-Za-z0-9]+$/.test(title[k])) {
                        lCount += 2;
                    } else {
                        tCount += 0.5;
                    }
                }
                temp = columnLength > tCount ? columnLength : tCount;
                columnLength = lCount > temp ? lCount : temp;
            }
            if (columnLength < 25) {
                columnLength = 25;
            }
            return columnLength * 6.2 + 'px';
        },

        // 给表头复选框添加序号
        UpdateTableHeader() {
          let tableHeader = document.querySelector(".el-table__header-wrapper")
          let tableHeaderSelect = tableHeader.querySelector(".el-table-column--selection")
          if (tableHeaderSelect) {
            let tableHeaderSelectCell = tableHeaderSelect.getElementsByClassName("cell")
            if (tableHeaderSelectCell[0].childNodes.length == 1) {
              // console.log(tableHeader);
              let span = document.createElement("span")
              span.innerHTML = `<span style="padding-left: 5px">序号</span>`
              // console.log(span);
              tableHeaderSelectCell[0].appendChild(span);
            }
          }
        },

        // 添加序列号
        UpdateTableBody() {
          let tableBody = document.querySelector(".el-table__body-wrapper")
          let tableBodySelect = tableBody.getElementsByClassName("el-table-column--selection")
          if (tableBodySelect) {
            var arr = Array.from(tableBodySelect)
            arr.forEach((item, index) => {
            let tableSelectCell = item.getElementsByClassName("cell")
            if (tableSelectCell[0].childNodes.length == 2) {
              tableSelectCell[0].removeChild(tableSelectCell[0].lastChild);
            }
            let span = document.createElement("span")
            span.innerHTML =`<span style="flex:1; padding-left: 5px">${this.indexMethod(index)}</span>` 
            tableSelectCell[0].appendChild(span);
          })
          }
        },

        // 首页尾页跳转
        jumpPage(value) {
          if (value === '0') {
            this.pager.currentPage = 1
            this.handleCurrentChange(this.pager.currentPage)
          } else {
            this.pager.currentPage = Math.ceil(this.pager.total/this.pager.pageSize)
            console.log(this.pager.currentPage);
            this.handleCurrentChange(this.pager.currentPage)
          }
        }
    }
};
</script>

 css部分

<style scoped>
div /deep/.location {
    color: #0000ee ;
    text-decoration: underline;
}
div /deep/.location:hover {
  cursor: pointer;
}
div /deep/.el-table,
.el-table__expanded-cell {
    background-color: rgb(255, 255, 255);
}
div /deep/.el-table th {
    background-color: #01c9db !important;
    color: #fff;
}
div /deep/.el-table--enable-row-hover .el-table__body tr:hover > td {
    background-color: rgba(217, 219, 223, 0.904);
}
div /deep/.el-pagination__total {
    color: #fff;
}
div /deep/.el-table--striped .el-table__body tr.el-table__row--striped.el-table__row--striped.el-table__row--striped td {
    background-color: #bfebed; /*替换为你需要的颜色，觉得优先级不够就加!important*/
}
div /deep/.el-pagination {
    padding: 10px 0;
}
div /deep/ .el-table-column--selection .cell{
    display: flex;
    justify-content:center;
    align-items: center;
}


div /deep/ .el-icon-arrow-left:before,
div /deep/ .el-icon-arrow-right:before{
  content: '';
}
div /deep/ .el-icon-arrow-left {
  background: url('../../assets/img/pageBreaks/advance.png') center center no-repeat;  /* 项目中的icon */
  width: 100%;
  height: 100%;
}
div /deep/ .el-icon-arrow-right {
  background: url('../../assets/img/pageBreaks/retreat.png') center center no-repeat; /* 项目中的icon */
  width: 100%;
  height: 100%;
}
div /deep/ .el-pager li:not(.disabled).active {
  background-color:transparent !important;
  color: #409eff !important;
}
div /deep/ .el-pagination.is-background .btn-next, 
div /deep/ .el-pagination.is-background .btn-prev, 
div /deep/ .el-pagination.is-background .el-pager li {
    margin: 0 5px;
    background-color:transparent;
    color: #fff;
    min-width: 30px;
    border-radius: 2px;
}
div /deep/ .el-pagination.is-background .el-pager li {
    border: 1px #fff solid;
}

.page-box {
  display: flex;
  justify-content: center;
}
.firstPage {
  padding: 0;
  background: url('../../assets/img/pageBreaks/firstPage.png') right center no-repeat; /* 项目中的icon */
}
.lastPage {
  padding: 0;
  background: url('../../assets/img/pageBreaks/lastPage.png') left center no-repeat; /* 项目中的icon */
}
</style>

以上就是组件的所有代码。