Vue 实现封装combogrid表格网格（Easyui框架有类似的）（二）

一、i-table.vue组件的封装

table表格组件的封装很有必要，毕竟有的系统基本上每个页面都会有表格组件，封装起来不会让单页面的代码看起来很臃肿，使用起来也很方便。
template

<template>
    <div style="height: 100%;" class="table-div">
        <itoolbar :toolbar="toolbar" :toolbarId="toolbarId"></itoolbar>
        <div class="i-table">
            <div class="table-container">
                <el-table ref="table" :id="'table_'+toolbarId" :data="tableData" border :height="height" row-key="id"
                @selection-change="handleSelectionChange" 
                @row-click="rowclick" :row-class-name="tableRowClassName" :row-style="selectHignLiaght"
                :highlight-current-row="highlightCurrentRow" @current-change="handleChange">
                    <el-table-column v-if="showSelection" type="selection" width="55" align="center">
                    </el-table-column>
                    <el-table-column v-if="highlightCurrentRow" width="55" align="center">
                        <template slot-scope="scope">
                            <el-radio v-model="radiovlaue" :label="scope.$index+''">{
   {
   &nbsp;}}</el-radio>
                        </template>
                    </el-table-column>
                    <slot></slot>
                </el-table>
            </div>
            <div class="pagination-container" v-if="showPagination">
                <el-pagination @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="pageInfo.pageIndex"
                            :page-sizes="[10, 20, 30, 50, 60, 70, 80, 90]"
                            :page-size="pageInfo.pageSize"
                            :pager-count="5"
                            background
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="pageInfo.pageTotal">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

script

<script>
import debounce from '../modules/debounce.js';
import Itoolbar from './i-toolBar.vue';
import {
    EventBus } from '../modules/event-bus';
import Sortable from 'sortablejs';
export default {
   
        name: 'i-table',
        components: {
   Itoolbar},
        props: {
   
            toolbarId: {
    // 绑定的id
                type: String,
                default: ''
            },
            showSelection: {
    // 是否多选
                type: Boolean,
                default: true
            },
            showPagination: {
    // 是否显示分页
                type: Boolean,
                default: true
            },
            highlightCurrentRow: {
    // 是否单选
                type: Boolean,
                default: false
            },
            itemList: {
    // 表头数据
                type: Array,
                default: () => {
   
                    return []
                }
            },
            toolbar: {
    // 表头按钮
                type: Array,
                default: () => {
   
                    return []
                }
            },
            searchList: {
    // 表头查询数据集
                type: Array,
                default: () => {
   
                    return []
                }
            },
            pageInfo: {
    // 表格分页
                type: Object,
                default: () => {
   
                    return {
   
                        pageIndex: 1, // 当前页
                        pageSize: 10, // 每页行数
                        pageTotal: 0 // 页总数
                    }
                }
            },
            // tableData: { // 表格数据
            //     type: Array,
            //     default: () => {
   
            //         return []
            //     }
            // },
            selectHignLiaght: {
    // style
                type: Function,