bri-components 1.0.0

package/src/components/list/easyTable/v-table/src/table.vue

@@ -0,0 +1,1565 @@
+<template>
+    <div
+        :class="['v-table-views', 'v-table-class',`${className}`]"
+        ref="table"
+        :style="{
+            'width': internalWidth + 'px',
+            'height': getTableHeight,
+            'background-color': tableBgColor
+        }"
+    >
+        <!-- 左列 -->
+        <template v-if="frozenCols.length > 0">
+            <div
+                class="v-table-leftview"
+                :style="{'width':leftViewWidth+'px'}"
+            >
+                <!-- 左列-头 -->
+                <div
+                    :class="{
+                        'v-table-header':true,
+                        'v-table-title-class':true,
+                        'v-table-header-notFixed':!fixTitle
+                    }"
+                    :style="{'width': leftViewWidth+'px','background-color':titleBgColor,'color':titleFontColor}"
+                >
+                    <div
+                        class="v-table-header-inner"
+                        style="display: block;"
+                    >
+                        <table
+                            class="v-table-htable"
+                            border="1"
+                            cellspacing="0"
+                            cellpadding="0"
+                            bordercolor="#E5E5E5"
+                        >
+                            <tbody>
+                                <template v-if="frozenTitleCols.length > 0">
+                                    <tr
+                                        v-for="(row, ridx) in frozenTitleCols"
+                                        :key="ridx"
+                                    >
+                                        <td
+                                            v-for="(col, cidx) in row"
+                                            :key="cidx"
+                                            :class="[col.titleCellClassName]"
+                                            :colspan="col.colspan"
+                                            :rowspan="col.rowspan"
+                                            @mousemove.stop="handleTitleMouseMove($event,col.fields)"
+                                            @mousedown.stop="handleTitleMouseDown($event)"
+                                            @mouseout.stop="handleTitleMouseOut()"
+                                            @click="titleCellClick(col.fields,col.title);"
+                                            @dblclick="titleCellDblClick(col.fields,col.title)"
+                                        >
+                                            <div
+                                                :class="['v-table-title-cell',showVerticalBorder?'vertical-border':'',showHorizontalBorder?'horizontal-border':'']"
+                                                :style="{'width':titleColumnWidth(col.fields)+'px','height':titleColumnHeight(col.rowspan)+'px','text-align':col.titleAlign}"
+                                            >
+                                                <span class="table-title">
+                                                    <span v-if="isSelectionCol(col.fields)">
+                                                        <v-checkbox
+                                                            @change="handleCheckAll"
+                                                            :indeterminate="indeterminate"
+                                                            v-model="isAllChecked"
+                                                            :show-slot="false"
+                                                            label="check-all"
+                                                        ></v-checkbox>
+                                                    </span>
+                                                    <span
+                                                        v-else
+                                                        v-html="col.title"
+                                                    ></span>
+                                                    <span
+                                                        @click="sortControl(col.fields[0])"
+                                                        class="v-table-sort-icon"
+                                                        v-if="enableSort(col.orderBy)"
+                                                    >
+                                                        <slot name="sort">
+                                                            <i :class='["v-icon-up-dir",getCurrentSort(col.fields[0]) ==="asc" ? "checked":""]'></i>
+                                                            <i :class='["v-icon-down-dir",getCurrentSort(col.fields[0]) ==="desc" ? "checked":""]'></i>
+                                                        </slot>
+                                                    </span>
+                                                </span>
+                                                <!--filters-->
+                                                <v-dropdown
+                                                    class="v-table-dropdown"
+                                                    v-if="enableFilters(col.filters,col.fields)"
+                                                    v-model="col.filters"
+                                                    :show-operation="col.filterMultiple"
+                                                    :is-multiple="col.filterMultiple"
+                                                    @on-filter-method="filterEvent"
+                                                    @change="filterConditionChange(col.filterMultiple)"
+                                                >
+                                                    <i :class="['v-table-filter-icon',vTableFiltersIcon(col.filters)]"></i>
+                                                </v-dropdown>
+                                            </div>
+                                        </td>
+                                    </tr>
+                                </template>
+
+                                <template v-else>
+                                    <tr class="v-table-header-row">
+                                        <td
+                                            v-for="(col, fcidx) in frozenCols"
+                                            :key="fcidx"
+                                            :class="[col.titleCellClassName]"
+                                            @mousemove.stop="handleTitleMouseMove($event,col.field)"
+                                            @mousedown.stop="handleTitleMouseDown($event)"
+                                            @mouseout.stop="handleTitleMouseOut()"
+                                            @click="titleCellClick(col.field,col.title);"
+                                            @dblclick="titleCellDblClick(col.field,col.title)"
+                                        >
+                                            <div
+                                                :class="['v-table-title-cell',showVerticalBorder?'vertical-border':'',showHorizontalBorder?'horizontal-border':'']"
+                                                :style="{'width':col.width+'px','height':titleRowHeight+'px','text-align':col.titleAlign}"
+                                            >
+                                                <span class="table-title">
+                                                    <span v-if="col.type === 'selection'">
+                                                        <v-checkbox
+                                                            @change="handleCheckAll"
+                                                            :indeterminate="indeterminate"
+                                                            v-model="isAllChecked"
+                                                            :show-slot="false"
+                                                            label="check-all"
+                                                        ></v-checkbox>
+                                                    </span>
+                                                    <span
+                                                        v-else
+                                                        v-html="col.title"
+                                                    ></span>
+                                                    <span
+                                                        @click="sortControl(col.field)"
+                                                        class="v-table-sort-icon"
+                                                        v-if="enableSort(col.orderBy)"
+                                                    >
+                                                        <slot name="sort">
+                                                            <i :class='["v-icon-up-dir",getCurrentSort(col.field) ==="asc" ? "checked":""]'></i>
+                                                            <i :class='["v-icon-down-dir",getCurrentSort(col.field) ==="desc" ? "checked":""]'></i>
+                                                        </slot>
+                                                    </span>
+                                                </span>
+                                                <!--filters-->
+                                                <v-dropdown
+                                                    class="v-table-dropdown"
+                                                    v-if="enableFilters(col.filters)"
+                                                    v-model="col.filters"
+                                                    :show-operation="col.filterMultiple"
+                                                    :is-multiple="col.filterMultiple"
+                                                    @on-filter-method="filterEvent"
+                                                    @change="filterConditionChange(col.filterMultiple)"
+                                                >
+                                                    <i :class="['v-table-filter-icon',vTableFiltersIcon(col.filters)]"></i>
+                                                </v-dropdown>
+                                            </div>
+                                        </td>
+                                    </tr>
+                                </template>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+
+                <!-- 左列-内容 -->
+                <div
+                    class="v-table-body v-table-body-class"
+                    :style="{'width': leftViewWidth+'px', 'height': bodyViewHeight+'px', 'margin-top': titleRowHeight+'px'}"
+                >
+                    <div :class="['v-table-body-inner',vTableBodyInner]">
+                        <v-checkbox-group
+                            v-model="checkboxGroupModel"
+                            @change="handleCheckGroupChange"
+                        >
+                            <table
+                                class="v-table-btable"
+                                border="1"
+                                cellspacing="0"
+                                cellpadding="0"
+                                bordercolor="#E5E5E5"
+                            >
+                                <tbody>
+                                    <tr
+                                        v-for="(item,rowIndex) in internalTableData"
+                                        class="v-table-row"
+                                        :key="rowIndex"
+                                        :style="[trBgColor(rowIndex+1)]"
+                                        @mouseenter.stop="handleMouseEnter(rowIndex)"
+                                        @mouseleave.stop="handleMouseOut(rowIndex)"
+                                    >
+                                        <td
+                                            v-if="cellMergeInit(rowIndex,col.field,item,true)"
+                                            v-for="(col,colIndex) in frozenCols"
+                                            :key="colIndex"
+                                            :colSpan="setColRowSpan(rowIndex,col.field,item).colSpan"
+                                            :rowSpan="setColRowSpan(rowIndex,col.field,item).rowSpan"
+                                            :class="[setColumnCellClassName(rowIndex,col.field,item)]"
+                                        >
+                                            <!--存在列合并-->
+                                            <div
+                                                v-if="isCellMergeRender(rowIndex,col.field,item)"
+                                                :class="['v-table-body-cell',showVerticalBorder ? 'vertical-border':'',showHorizontalBorder?'horizontal-border':'']"
+                                                :style="{'width':getRowWidthByColSpan(rowIndex,col.field,item)+'px','height': getRowHeightByRowSpan(rowIndex,col.field,item)+'px','line-height':getRowHeightByRowSpan(rowIndex,col.field,item)+'px','text-align':col.columnAlign}"
+                                                :title="col.overflowTitle ?  overflowTitle(item,rowIndex,col) :''"
+                                                @click="rowCellClick(rowIndex,item,col);cellEditClick($event,col.isEdit,item,col.field,rowIndex)"
+                                                @dblclick="rowCellDbClick(rowIndex,item,col)"
+                                            >
+                                                <span v-if="cellMergeContentType(rowIndex,col.field,item).isComponent">
+                                                    <component
+                                                        :render="col.render"
+                                                        :row="item"
+                                                        :rowData="item"
+                                                        :column="col"
+                                                        :field="col.field ? col.field : ''"
+                                                        :index="rowIndex"
+                                                        :is="cellMerge(rowIndex,item,col.field).componentName"
+                                                        @on-custom-comp="customCompFunc"
+                                                    ></component>
+                                                </span>
+                                                <span
+                                                    v-else
+                                                    v-html="cellMerge(rowIndex,item,col.field).content"
+                                                ></span>
+                                            </div>
+
+                                            <!--不存在列合并-->
+                                            <div
+                                                v-else
+                                                :class="['v-table-body-cell',showVerticalBorder ? 'vertical-border':'',showHorizontalBorder?'horizontal-border':'']"
+                                                :style="getCellStyle(col, item)"
+                                                :title="col.overflowTitle ?  overflowTitle(item,rowIndex,col) : ''"
+                                                @click="rowCellClick(rowIndex, item, col); cellEditClick($event, col.isEdit, item,col.field, rowIndex)"
+                                                @dblclick="rowCellDbClick(rowIndex, item, col)"
+                                            >
+                                                <span v-if="typeof col.componentName ==='string' && col.componentName.length > 0">
+                                                    <component
+                                                        :render="col.render"
+                                                        :row="item"
+                                                        :rowData="item"
+                                                        :column="col"
+                                                        :field="col.field ? col.field : ''"
+                                                        :index="rowIndex"
+                                                        :is="col.componentName"
+                                                        @on-custom-comp="customCompFunc"
+                                                    ></component>
+                                                </span>
+
+                                                <span
+                                                    v-else-if="typeof col.formatter==='function'"
+                                                    v-html="col.formatter(item,rowIndex,pagingIndex,col.field)"
+                                                ></span>
+
+                                                <span v-else-if="col.type === 'selection'">
+                                                    <v-checkbox
+                                                        @change="handleCheckChange(item)"
+                                                        :show-slot="false"
+                                                        :disabled="item._disabled"
+                                                        :label="rowIndex"
+                                                    ></v-checkbox>
+                                                </span>
+
+                                                <span v-else>
+                                                    {{item[col.field]}}
+                                                </span>
+                                            </div>
+                                        </td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </v-checkbox-group>
+                    </div>
+                </div>
+
+                <!-- 左列-底 -->
+                <div
+                    v-if="frozenFooterCols.length > 0"
+                    :class="['v-table-footer','v-table-footer-class']"
+                    :style="{'width': leftViewWidth+'px','height':footerTotalHeight}"
+                >
+                    <table
+                        class="v-table-ftable"
+                        border="1"
+                        cellspacing="0"
+                        cellpadding="0"
+                        bordercolor="#E5E5E5"
+                    >
+                        <tr
+                            class="v-table-row"
+                            v-for="(item,rowIndex) in frozenFooterCols"
+                            :key="rowIndex"
+                        >
+                            <td
+                                v-for="(col,colIndex) in item"
+                                :key="colIndex"
+                                :class="setFooterCellClassName(true,rowIndex,colIndex,col.content)"
+                            >
+                                <div
+                                    :style="{'height':footerRowHeight+'px','line-height':footerRowHeight+'px','width':col.width+'px','text-align':col.align}"
+                                    :class="['v-table-body-cell',vTableBodyCell]"
+                                    v-html="col.content"
+                                ></div>
+                            </td>
+                        </tr>
+                    </table>
+                </div>
+            </div>
+        </template>
+
+        <!-- 中列-->
+        <div
+            class="v-table-centerview"
+            :style="{
+                'width': centerViewWidth + 'px',
+                'height': getTableCenterViewHeight,
+                'margin-left': leftViewWidth + 'px',
+                'margin-right': rightViewWidth + 'px'
+            }"
+        >
+            <!-- 中列 头-->
+            <div
+                :class="{
+                    'v-table-header':true,
+                    'v-table-title-class':true,
+                    'v-table-header-notFixed':!fixTitle
+                }"
+                :style="{'width': centerViewWidth+'px', 'color':titleFontColor}"
+            >
+                <div
+                    class="v-table-header-inner"
+                    style="display: block;"
+                >
+                    <table
+                        class="v-table-htable"
+                        :style="{ 'background-color':titleBgColor }"
+                        border="1"
+                        cellspacing="0"
+                        cellpadding="0"
+                        bordercolor="#E5E5E5"
+                    >
+                        <tbody>
+                            <template v-if="noFrozenTitleCols.length > 0">
+                                <tr
+                                    v-for="(row, nfridx) in noFrozenTitleCols"
+                                    :key="nfridx"
+                                >
+                                    <td
+                                        v-for="(col, cidx) in row"
+                                        :key="cidx"
+                                        :class="[col.titleCellClassName]"
+                                        :colspan="col.colspan"
+                                        :rowspan="col.rowspan"
+                                        @mousemove.stop="handleTitleMouseMove($event,col.fields)"
+                                        @mousedown.stop="handleTitleMouseDown($event)"
+                                        @mouseout.stop="handleTitleMouseOut()"
+                                        @click="titleCellClick(col.fields,col.title);"
+                                        @dblclick="titleCellDblClick(col.fields,col.title)"
+                                    >
+                                        <div
+                                            :class="['v-table-title-cell',showVerticalBorder?'vertical-border':'',showHorizontalBorder?'horizontal-border':'']"
+                                            :style="{'width':titleColumnWidth(col.fields)+'px','height':titleColumnHeight(col.rowspan)+'px','text-align':col.titleAlign}"
+                                        >
+                                            <span class="table-title dsh-ellipsis">
+                                                <span v-if="isSelectionCol(col.fields)">
+                                                    <v-checkbox
+                                                        @change="handleCheckAll"
+                                                        :indeterminate="indeterminate"
+                                                        v-model="isAllChecked"
+                                                        :show-slot="false"
+                                                        label="check-all"
+                                                    ></v-checkbox>
+                                                </span>
+                                                <span
+                                                    v-else
+                                                    v-html="col.title"
+                                                ></span>
+                                            </span>
+
+                                            <span
+                                                v-if="enableSort(col.orderBy)"
+                                                @click="sortControl(col.fields[0])"
+                                                class="v-table-sort-icon"
+                                            >
+                                                <slot name="sort">
+                                                    <i :class='["v-icon-up-dir",getCurrentSort(col.fields[0]) ==="asc" ? "checked":""]'></i>
+                                                    <i :class='["v-icon-down-dir",getCurrentSort(col.fields[0]) ==="desc" ? "checked":""]'></i>
+                                                </slot>
+                                            </span>
+                                            <!--filters-->
+                                            <v-dropdown
+                                                class="v-table-dropdown"
+                                                v-if="enableFilters(col.filters,col.fields)"
+                                                v-model="col.filters"
+                                                :show-operation="col.filterMultiple"
+                                                :is-multiple="col.filterMultiple"
+                                                @on-filter-method="filterEvent"
+                                                @change="filterConditionChange(col.filterMultiple)"
+                                            >
+                                                <i :class="['v-table-filter-icon',vTableFiltersIcon(col.filters)]"></i>
+                                            </v-dropdown>
+                                        </div>
+                                    </td>
+                                </tr>
+                            </template>
+
+                            <template v-else>
+                                <tr class="v-table-header-row">
+                                    <td
+                                        v-for="(col,colIndex) in noFrozenCols"
+                                        :key="colIndex"
+                                        :class="[col.titleCellClassName]"
+                                        @mousemove.stop="handleTitleMouseMove($event,col.field)"
+                                        @mousedown.stop="handleTitleMouseDown($event)"
+                                        @mouseout.stop="handleTitleMouseOut()"
+                                        @click="titleCellClick(col.field,col.title);"
+                                        @dblclick="titleCellDblClick(col.field,col.title)"
+                                    >
+                                        <div
+                                            :class="['v-table-title-cell',showVerticalBorder?'vertical-border':'',showHorizontalBorder?'horizontal-border':'']"
+                                            :style="{'width':col.width+'px','height':titleRowHeight+'px','text-align':col.titleAlign}"
+                                        >
+                                            <Ctooltip
+                                                transfer
+                                                :content="col.title"
+                                                style="display:inline-block;width:100%;"
+                                            >
+                                                <span
+                                                    class="table-title dsh-ellipsis"
+                                                    style="width:100%"
+                                                >
+                                                    <span v-if="col.type === 'selection'">
+                                                        <v-checkbox
+                                                            @change="handleCheckAll"
+                                                            :indeterminate="indeterminate"
+                                                            v-model="isAllChecked"
+                                                            :show-slot="false"
+                                                            label="check-all"
+                                                        ></v-checkbox>
+                                                    </span>
+                                                    <span
+                                                        v-else
+                                                        v-html="col.title"
+                                                    ></span>
+                                                    <!--filters-->
+                                                    <v-dropdown
+                                                        class="v-table-dropdown"
+                                                        v-if="enableFilters(col.filters)"
+                                                        v-model="col.filters"
+                                                        :show-operation="col.filterMultiple"
+                                                        :is-multiple="col.filterMultiple"
+                                                        @on-filter-method="filterEvent"
+                                                        @change="filterConditionChange(col.filterMultiple)"
+                                                    >
+                                                        <i :class="['v-table-filter-icon',vTableFiltersIcon(col.filters)]"></i>
+                                                    </v-dropdown>
+                                                </span>
+                                                <span
+                                                    @click="sortControl(col.field)"
+                                                    class="v-table-sort-icon"
+                                                    v-if="enableSort(col.orderBy)"
+                                                >
+                                                    <slot name="sort">
+                                                        <i :class='["v-icon-up-dir",getCurrentSort(col.field) ==="asc" ? "checked":""]'></i>
+                                                        <i :class='["v-icon-down-dir",getCurrentSort(col.field) ==="desc" ? "checked":""]'></i>
+                                                    </slot>
+                                                </span>
+                                            </Ctooltip>
+                                        </div>
+                                    </td>
+                                </tr>
+                            </template>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+
+            <!-- 中列 内容-->
+            <div
+                :class="['v-table-body v-table-body-class',vTableRightBody]"
+                :style="{
+                    'width': centerViewWidth + 'px',
+                    'max-height': getTableCenterViewBodyHeight,
+                    'margin-top': titleRowHeight + 'px'
+                }"
+            >
+                <v-checkbox-group
+                    v-model="checkboxGroupModel"
+                    @change="handleCheckGroupChange"
+                >
+                    <table
+                        class="v-table-btable"
+                        border="1"
+                        cellspacing="0"
+                        cellpadding="0"
+                        bordercolor="#E5E5E5"
+                    >
+                        <tbody>
+                            <tr
+                                :key="rowIndex"
+                                v-for="(item,rowIndex) in internalTableData"
+                                class="v-table-row"
+                                :style="[trBgColor(rowIndex+1)]"
+                                @mouseenter.stop="handleMouseEnter(rowIndex)"
+                                @mouseleave.stop="handleMouseOut(rowIndex)"
+                                @click="$emit('click-row', item, rowIndex)"
+                            >
+                                <td
+                                    v-if="cellMergeInit(rowIndex,col.field,item,false)"
+                                    v-for="(col,colIndex) in noFrozenCols"
+                                    :key="colIndex"
+                                    :colSpan="setColRowSpan(rowIndex,col.field,item).colSpan"
+                                    :rowSpan="setColRowSpan(rowIndex,col.field,item).rowSpan"
+                                    :class="[setColumnCellClassName(rowIndex,col.field,item)]"
+                                    @click="clickTd($event, col)"
+                                >
+                                    <!--存在列合并-->
+                                    <div
+                                        v-if="isCellMergeRender(rowIndex,col.field,item)"
+                                        :class="['v-table-body-cell',showVerticalBorder ? 'vertical-border':'',showHorizontalBorder?'horizontal-border':'']"
+                                        :style="{
+                                            'width': getRowWidthByColSpan(rowIndex, col.field, item)+'px',
+                                            'height': getRowHeightByRowSpan(rowIndex, col.field, item)+'px',
+                                            'line-height': getRowHeightByRowSpan(rowIndex, col.field, item)+'px',
+                                            'text-align': col.columnAlign
+                                        }"
+                                        :title="col.overflowTitle ?  overflowTitle(item,rowIndex,col) :''"
+                                        @click="rowCellClick(rowIndex,item,col);cellEditClick($event,col.isEdit,item,col.field,rowIndex)"
+                                        @dblclick="rowCellDbClick(rowIndex,item,col)"
+                                    >
+                                        <span v-if="cellMergeContentType(rowIndex,col.field,item).isComponent">
+                                            <component
+                                                :render="col.render"
+                                                :row="item"
+                                                :rowData="item"
+                                                :column="col"
+                                                :field="col.field ? col.field : ''"
+                                                :index="rowIndex"
+                                                :is="cellMerge(rowIndex,item,col.field).componentName"
+                                                @on-custom-comp="customCompFunc"
+                                            ></component>
+                                        </span>
+                                        <span
+                                            v-else
+                                            v-html="cellMerge(rowIndex,item,col.field).content"
+                                        >
+                                        </span>
+                                    </div>
+
+                                    <!--不存在列合并-->
+                                    <div
+                                        v-else
+                                        :class="['v-table-body-cell',showVerticalBorder ? 'vertical-border':'',showHorizontalBorder?'horizontal-border':'']"
+                                        :style="getCellStyle(col, item)"
+                                        :title="col.overflowTitle ?  overflowTitle(item,rowIndex,col) :''"
+                                        @click="rowCellClick(rowIndex,item,col);cellEditClick($event,col.isEdit,item,col.field,rowIndex)"
+                                        @dblclick="rowCellDbClick(rowIndex,item,col)"
+                                    >
+                                        <span v-if="typeof col.componentName ==='string' && col.componentName.length > 0">
+                                            <component
+                                                :render="col.render"
+                                                :row="item"
+                                                :rowData="item"
+                                                :column="col"
+                                                :field="col.field ? col.field : ''"
+                                                :index="rowIndex"
+                                                :is="col.componentName"
+                                                @on-custom-comp="customCompFunc"
+                                            ></component>
+                                        </span>
+                                        <span
+                                            v-else-if="typeof col.formatter==='function'"
+                                            v-html="col.formatter(item,rowIndex,pagingIndex,col.field)"
+                                        >
+                                        </span>
+                                        <span v-else-if="col.type === 'selection'">
+                                            <v-checkbox
+                                                :show-slot="false"
+                                                :disabled="item._disabled"
+                                                :label="rowIndex"
+                                                @change="handleCheckChange(item)"
+                                            ></v-checkbox>
+                                        </span>
+                                        <span v-else>
+                                            {{item[col.field]}}
+                                        </span>
+                                    </div>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </v-checkbox-group>
+            </div>
+
+            <!-- 中列 footer-->
+            <div
+                v-if="noFrozenFooterCols.length > 0"
+                :class="['v-table-footer','v-table-footer-class',vTableFooter]"
+                :style="{'width': centerViewWidth+'px','height':footerTotalHeight}"
+            >
+                <table
+                    class="v-table-ftable"
+                    border="1"
+                    cellspacing="0"
+                    cellpadding="0"
+                    bordercolor="#E5E5E5"
+                >
+                    <tr
+                        class="v-table-row"
+                        v-for="(item,rowIndex) in noFrozenFooterCols"
+                        :key="rowIndex"
+                    >
+                        <td
+                            v-for="(col,colIndex) in item"
+                            :key="colIndex"
+                            :class="setFooterCellClassName(false,rowIndex,colIndex,col.content)"
+                        >
+                            <div
+                                :style="{'height':footerRowHeight+'px','line-height':footerRowHeight+'px','width':col.width+'px','text-align':col.align}"
+                                :class="['v-table-body-cell',vTableBodyCell]"
+                                v-html="col.content"
+                            ></div>
+                        </td>
+                    </tr>
+                </table>
+            </div>
+        </div>
+
+        <!--右列-->
+        <template v-if="frozenRightCols.length > 0">
+            <div
+                class="v-table-rightview"
+                :style="{'width':rightViewWidth+'px'}"
+            >
+                <!-- 右列-头 -->
+                <div
+                    :class="{
+                        'v-table-header':true,
+                        'v-table-title-class':true,
+                        'v-table-header-notFixed':!fixTitle
+                    }"
+                    :style="{'width': rightViewWidth+'px','background-color':titleBgColor,'color':titleFontColor}"
+                >
+                    <div
+                        class="v-table-header-inner"
+                        style="display: block;"
+                    >
+                        <table
+                            class="v-table-htable"
+                            border="1"
+                            cellspacing="0"
+                            cellpadding="0"
+                            bordercolor="#E5E5E5"
+                        >
+                            <tbody>
+
+                                <template v-if="frozenRightTitleCols.length > 0">
+                                    <tr
+                                        v-for="(row, ridx) in frozenRightTitleCols"
+                                        :key="ridx"
+                                    >
+                                        <td
+                                            v-for="(col, cidx) in row"
+                                            :key="cidx"
+                                            :class="[col.titleCellClassName]"
+                                            :colspan="col.colspan"
+                                            :rowspan="col.rowspan"
+                                            @mousemove.stop="handleTitleMouseMove($event,col.fields)"
+                                            @mousedown.stop="handleTitleMouseDown($event)"
+                                            @mouseout.stop="handleTitleMouseOut()"
+                                            @click="titleCellClick(col.fields,col.title);"
+                                            @dblclick="titleCellDblClick(col.fields,col.title)"
+                                        >
+                                            <div
+                                                :class="['v-table-title-cell',showVerticalBorder?'vertical-border':'',showHorizontalBorder?'horizontal-border':'']"
+                                                :style="{'width':titleColumnWidth(col.fields)+'px','height':titleColumnHeight(col.rowspan)+'px','text-align':col.titleAlign}"
+                                            >
+                                                <span class="table-title">
+                                                    <span v-if="isSelectionCol(col.fields)">
+                                                        <v-checkbox
+                                                            @change="handleCheckAll"
+                                                            :indeterminate="indeterminate"
+                                                            v-model="isAllChecked"
+                                                            :show-slot="false"
+                                                            label="check-all"
+                                                        ></v-checkbox>
+                                                    </span>
+                                                    <span
+                                                        v-else
+                                                        v-html="col.title"
+                                                    ></span>
+                                                    <span
+                                                        @click="sortControl(col.fields[0])"
+                                                        class="v-table-sort-icon"
+                                                        v-if="enableSort(col.orderBy)"
+                                                    >
+                                                        <slot name="sort">
+                                                            <i :class='["v-icon-up-dir",getCurrentSort(col.fields[0]) ==="asc" ? "checked":""]'></i>
+                                                            <i :class='["v-icon-down-dir",getCurrentSort(col.fields[0]) ==="desc" ? "checked":""]'></i>
+                                                        </slot>
+                                                    </span>
+                                                </span>
+                                                <!--filters-->
+                                                <v-dropdown
+                                                    class="v-table-dropdown"
+                                                    v-if="enableFilters(col.filters,col.fields)"
+                                                    v-model="col.filters"
+                                                    :show-operation="col.filterMultiple"
+                                                    :is-multiple="col.filterMultiple"
+                                                    @on-filter-method="filterEvent"
+                                                    @change="filterConditionChange(col.filterMultiple)"
+                                                >
+                                                    <i :class="['v-table-filter-icon',vTableFiltersIcon(col.filters)]"></i>
+                                                </v-dropdown>
+                                            </div>
+                                        </td>
+                                    </tr>
+                                </template>
+
+                                <template v-else>
+                                    <tr class="v-table-header-row">
+                                        <td
+                                            v-for="(col, fcidx) in frozenRightCols"
+                                            :key="fcidx"
+                                            :class="[col.titleCellClassName]"
+                                            @mousemove.stop="handleTitleMouseMove($event,col.field)"
+                                            @mousedown.stop="handleTitleMouseDown($event)"
+                                            @mouseout.stop="handleTitleMouseOut()"
+                                            @click="titleCellClick(col.field,col.title);"
+                                            @dblclick="titleCellDblClick(col.field,col.title)"
+                                        >
+                                            <div
+                                                :class="['v-table-title-cell',showVerticalBorder?'vertical-border':'',showHorizontalBorder?'horizontal-border':'']"
+                                                :style="{'width':col.width+'px','height':titleRowHeight+'px','text-align':col.titleAlign}"
+                                            >
+                                                <span class="table-title">
+                                                    <span v-if="col.type === 'selection'">
+                                                        <v-checkbox
+                                                            @change="handleCheckAll"
+                                                            :indeterminate="indeterminate"
+                                                            v-model="isAllChecked"
+                                                            :show-slot="false"
+                                                            label="check-all"
+                                                        ></v-checkbox>
+                                                    </span>
+                                                    <span
+                                                        v-else
+                                                        v-html="col.title"
+                                                    ></span>
+                                                    <span
+                                                        @click="sortControl(col.field)"
+                                                        class="v-table-sort-icon"
+                                                        v-if="enableSort(col.orderBy)"
+                                                    >
+                                                        <slot name="sort">
+                                                            <i :class='["v-icon-up-dir",getCurrentSort(col.field) ==="asc" ? "checked":""]'></i>
+                                                            <i :class='["v-icon-down-dir",getCurrentSort(col.field) ==="desc" ? "checked":""]'></i>
+                                                        </slot>
+                                                    </span>
+                                                </span>
+                                                <!--filters-->
+                                                <v-dropdown
+                                                    class="v-table-dropdown"
+                                                    v-if="enableFilters(col.filters)"
+                                                    v-model="col.filters"
+                                                    :show-operation="col.filterMultiple"
+                                                    :is-multiple="col.filterMultiple"
+                                                    @on-filter-method="filterEvent"
+                                                    @change="filterConditionChange(col.filterMultiple)"
+                                                >
+                                                    <i :class="['v-table-filter-icon',vTableFiltersIcon(col.filters)]"></i>
+                                                </v-dropdown>
+                                            </div>
+                                        </td>
+                                    </tr>
+                                </template>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+
+                <!-- 右列-内容 -->
+                <div
+                    class="v-table-body v-table-body-class"
+                    :style="{'width': rightViewWidth+'px', 'height': bodyViewHeight+'px', 'margin-top': titleRowHeight+'px'}"
+                >
+                    <div :class="['v-table-body-inner',vTableBodyInner]">
+                        <v-checkbox-group
+                            v-model="checkboxGroupModel"
+                            @change="handleCheckGroupChange"
+                        >
+                            <table
+                                class="v-table-btable"
+                                border="1"
+                                cellspacing="0"
+                                cellpadding="0"
+                                bordercolor="#E5E5E5"
+                            >
+                                <tbody>
+                                    <tr
+                                        v-for="(item,rowIndex) in internalTableData"
+                                        class="v-table-row"
+                                        :key="rowIndex"
+                                        :style="[trBgColor(rowIndex+1)]"
+                                        @mouseenter.stop="handleMouseEnter(rowIndex)"
+                                        @mouseleave.stop="handleMouseOut(rowIndex)"
+                                    >
+                                        <td
+                                            v-if="cellMergeInit(rowIndex,col.field,item,true)"
+                                            v-for="(col,colIndex) in frozenRightCols"
+                                            :key="colIndex"
+                                            :colSpan="setColRowSpan(rowIndex,col.field,item).colSpan"
+                                            :rowSpan="setColRowSpan(rowIndex,col.field,item).rowSpan"
+                                            :class="[setColumnCellClassName(rowIndex,col.field,item)]"
+                                        >
+                                            <!--存在列合并-->
+                                            <div
+                                                v-if="isCellMergeRender(rowIndex,col.field,item)"
+                                                :class="['v-table-body-cell',showVerticalBorder ? 'vertical-border':'',showHorizontalBorder?'horizontal-border':'']"
+                                                :style="{'width':getRowWidthByColSpan(rowIndex,col.field,item)+'px','height': getRowHeightByRowSpan(rowIndex,col.field,item)+'px','line-height':getRowHeightByRowSpan(rowIndex,col.field,item)+'px','text-align':col.columnAlign}"
+                                                :title="col.overflowTitle ?  overflowTitle(item,rowIndex,col) :''"
+                                                @click="rowCellClick(rowIndex,item,col);cellEditClick($event,col.isEdit,item,col.field,rowIndex)"
+                                                @dblclick="rowCellDbClick(rowIndex,item,col)"
+                                            >
+                                                <span v-if="cellMergeContentType(rowIndex,col.field,item).isComponent">
+                                                    <component
+                                                        :render="col.render"
+                                                        :row="item"
+                                                        :rowData="item"
+                                                        :column="col"
+                                                        :field="col.field ? col.field : ''"
+                                                        :index="rowIndex"
+                                                        :is="cellMerge(rowIndex,item,col.field).componentName"
+                                                        @on-custom-comp="customCompFunc"
+                                                    ></component>
+                                                </span>
+                                                <span
+                                                    v-else
+                                                    v-html="cellMerge(rowIndex,item,col.field).content"
+                                                ></span>
+                                            </div>
+
+                                            <!--不存在列合并-->
+                                            <div
+                                                v-else
+                                                :class="['v-table-body-cell',showVerticalBorder ? 'vertical-border':'',showHorizontalBorder?'horizontal-border':'']"
+                                                :style="getCellStyle(col, item)"
+                                                :title="col.overflowTitle ?  overflowTitle(item,rowIndex,col) :''"
+                                                @click="rowCellClick(rowIndex,item,col);cellEditClick($event,col.isEdit,item,col.field,rowIndex)"
+                                                @dblclick="rowCellDbClick(rowIndex,item,col)"
+                                            >
+                                                <span v-if="typeof col.componentName ==='string' && col.componentName.length > 0">
+                                                    <component
+                                                        :render="col.render"
+                                                        :row="item"
+                                                        :rowData="item"
+                                                        :column="col"
+                                                        :field="col.field ? col.field : ''"
+                                                        :index="rowIndex"
+                                                        :is="col.componentName"
+                                                        @on-custom-comp="customCompFunc"
+                                                    ></component>
+                                                </span>
+                                                <span
+                                                    v-else-if="typeof col.formatter==='function'"
+                                                    v-html="col.formatter(item,rowIndex,pagingIndex,col.field)"
+                                                ></span>
+                                                <span v-else-if="col.type === 'selection'">
+                                                    <v-checkbox
+                                                        @change="handleCheckChange(item)"
+                                                        :show-slot="false"
+                                                        :disabled="item._disabled"
+                                                        :label="rowIndex"
+                                                    ></v-checkbox>
+                                                </span>
+                                                <span v-else>
+                                                    {{item[col.field]}}
+                                                </span>
+                                            </div>
+                                        </td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </v-checkbox-group>
+                    </div>
+                </div>
+
+                <!-- 右列-底 -->
+                <div
+                    v-if="frozenRightFooterCols.length > 0"
+                    :class="['v-table-footer','v-table-footer-class']"
+                    :style="{'width': leftViewWidth+'px','height':footerTotalHeight}"
+                >
+                    <table
+                        class="v-table-ftable"
+                        border="1"
+                        cellspacing="0"
+                        cellpadding="0"
+                        bordercolor="#E5E5E5"
+                    >
+                        <tr
+                            class="v-table-row"
+                            v-for="(item,rowIndex) in frozenFooterCols"
+                            :key="rowIndex"
+                        >
+                            <td
+                                v-for="(col,colIndex) in item"
+                                :key="colIndex"
+                                :class="setFooterCellClassName(true,rowIndex,colIndex,col.content)"
+                            >
+                                <div
+                                    v-html="col.content"
+                                    :class="['v-table-body-cell',vTableBodyCell]"
+                                    :style="{'height':footerRowHeight+'px','line-height':footerRowHeight+'px','width':col.width+'px','text-align':col.align}"
+                                ></div>
+                            </td>
+                        </tr>
+                    </table>
+                </div>
+            </div>
+        </template>
+
+        <table-empty
+            v-if="!isLoading && isTableEmpty"
+            :width="internalWidth"
+            :total-columns-width="totalColumnsWidth"
+            :content-height="errorContentHeight"
+            :title-height="getTotalColumnsHeight()"
+            :error-content="tipContent"
+            :is-loading="isLoading"
+        ></table-empty>
+
+        <loading
+            v-if="isLoading"
+            :loading-content="loadingContent"
+            :title-rows="internalTitleRows"
+            :title-row-height="titleRowHeight"
+            :columns="internalColumns"
+            :loading-opacity="loadingOpacity"
+        ></loading>
+
+        <!--列拖动时的线条-->
+        <div
+            v-show="isDragging"
+            class="v-table-drag-line"
+        ></div>
+    </div>
+</template>
+
+<script>
+
+    import classesMixin from "./classes-mixin.js";
+    import scrollControlMixin from "./scroll-control-mixin.js";
+    import frozenColumnsMixin from "./frozen-columns-mixin.js";
+    import tableResizeMixin from "./table-resize-mixin.js";
+    import sortControlMixin from "./sort-control-mixin.js";
+    import tableEmptyMixin from "./table-empty-mixin.js";
+    import dragWidthMixin from "./drag-width-mixin.js";
+    import cellEditMixin from "./cell-edit-mixin.js";
+    import bodyCellMergeMixin from "./body-cell-merge-mixin.js";
+    import titleCellMergeMixin from "./title-cell-merge-mixin.js";
+    import checkboxSelectionMixin from "./checkbox-selection-mixin.js";
+    import tableFooterMixin from "./table-footer-mixin.js";
+    import scrollBarControlMixin from "./scroll-bar-control-mixin.js";
+    import tableRowMouseEventsMixin from "./table-row-mouse-events-mixin";
+    import tableFiltersMixin from "./table-filters-mixin";
+
+    import utils from "../../src/utils/utils.js";
+    import deepClone from "../../src/utils/deepClone.js";
+
+    import tableEmpty from "./table-empty.vue";
+    import loading from "./loading.vue";
+    import VCheckboxGroup from "../../v-checkbox-group/index.js";
+    import VCheckbox from "../../v-checkbox/index.js";
+    import VDropdown from "../../v-dropdown/index.js";
+
+    export default {
+        name: "v-table",
+        mixins: [classesMixin, tableResizeMixin, frozenColumnsMixin, scrollControlMixin, sortControlMixin, tableEmptyMixin, dragWidthMixin, cellEditMixin, bodyCellMergeMixin, titleCellMergeMixin, checkboxSelectionMixin, tableFooterMixin, scrollBarControlMixin, tableRowMouseEventsMixin, tableFiltersMixin],
+        components: {tableEmpty, loading, VCheckboxGroup, VCheckbox, VDropdown},
+        data () {
+            return {
+                // 本地列表数据
+                internalTableData: [],
+                // 本地宽度
+                internalWidth: 0,
+                // 本地高度
+                internalHeight: 0,
+                // 本地列数据
+                internalColumns: [],
+                // 本地复杂表头数据
+                internalTitleRows: [],
+                errorMsg: " V-Table error: ",
+                // 最大宽度（当width:'max'时）
+                maxWidth: 5000,
+                hasFrozenColumn: false, // 是否拥有固定列（false时最后一列的右边border无边框）
+                hasFrozenRightColumn: false,
+                resizeTimer: null,
+                firstLoad: true, // 表格首次初始化加载，用于区分显示”数据加载中“还是”暂无数据“
+                tipContent: ""
+            };
+        },
+        props: {
+            // 表格自定义class
+            className: {
+                type: String,
+                default: ""
+            },
+
+            width: [Number, String],
+            minWidth: {
+                type: Number,
+                default: 50
+            },
+            height: {
+                type: Number,
+                require: false
+            },
+            minHeight: {
+                type: Number,
+                default: 50
+            },
+            titleRowHeight: {
+                type: Number,
+                default: 38
+            },
+            // 随着浏览器窗口改变，横向自适应
+            isHorizontalResize: {
+                type: Boolean,
+                default: false
+            },
+            // 随着浏览器窗口改变，垂直自适应
+            isVerticalResize: {
+                type: Boolean,
+                default: false
+            },
+
+            // 垂直自适应偏移量
+            verticalResizeOffset: {
+                type: Number,
+                default: 0
+            },
+
+            tableBgColor: {
+                type: String,
+                default: "#fff"
+            },
+
+            // 表头背景颜色
+            titleBgColor: {
+                type: String,
+                default: "#F0F0F0"
+            },
+
+            // 表头字体颜色
+            titleFontColor: {
+                type: String,
+                default: "#5d5d5d"
+            },
+
+            // 奇数行颜色
+            oddBgColor: {
+                type: String,
+                default: ""
+            },
+            // 偶数行颜色
+            evenBgColor: {
+                type: String,
+                default: ""
+            },
+            // 内容行高
+            rowHeight: {
+                type: Number,
+                default: 40
+            },
+            // 多列排序
+            multipleSort: {
+                type: Boolean,
+                default: true
+            },
+            // 是否展示排序
+            showSort: {
+                type: Boolean,
+                default: false
+            },
+            // 只在 升序和倒序切换
+            sortAlways: {
+                type: Boolean,
+                default: false
+            },
+            columns: {
+                type: Array,
+                require: true
+            },
+            fixTitle: {
+                type: Boolean,
+                default: true
+            },
+
+            // 特殊表头
+            titleRows: {
+                type: Array,
+                require: true,
+                default: function () {
+                    return [];
+                }
+            },
+            tableData: {
+                type: Array,
+                require: true,
+                default: function () {
+                    return [];
+                }
+            },
+            // 分页序号
+            pagingIndex: Number,
+            // 没数据时的html
+            errorContent: {
+                type: String,
+                default: "暂无数据..."
+            },
+            // 没数据时内容区域高度
+            errorContentHeight: {
+                type: Number,
+                default: 50
+            },
+            // 是否正在加载,为false 则会显示错误信息（如果加载时间较长，最好设置为true,数据返回后设置为false）
+            isLoading: {
+                type: Boolean,
+                default: false
+            },
+            loadingContent: {
+                type: String,
+                default: '<span><i class="v-icon-spin5 animate-loading-23" style="font-size: 28px;opacity:0.6;"></i></span>'
+            },
+            // 不设置则没有hover效果
+            rowHoverColor: {
+                type: String
+            },
+            rowClickColor: {
+                type: String
+            },
+            showVerticalBorder: {
+                type: Boolean,
+                default: true
+            },
+            showHorizontalBorder: {
+                type: Boolean,
+                default: true
+            },
+            footer: {
+                type: Array,
+                default: function () {
+                    return [
+                        // ["本页总计", "--", "--", 1000, 2000, "--"],
+                        // ["总计", "--", "--", 434784953450, 8858459488458, "--"]
+                    ];
+                }
+            },
+            footerRowHeight: {
+                type: Number,
+                default: 40
+            },
+            columnWidthDrag: {
+                type: Boolean,
+                default: false
+            },
+            loadingOpacity: {
+                type: Number,
+                default: 0.6
+            },
+            // 表体单元格样式回调
+            columnCellClassName: Function,
+            // footer单元格样式回调
+            footerCellClassName: Function,
+            // 行单击回调
+            rowClick: Function,
+            // 行双击回调
+            rowDblclick: Function,
+            // 表头单元格单击回调
+            titleClick: Function,
+            // 表头单元格双击回调
+            titleDblclick: Function,
+            // 鼠标进入行的回调
+            rowMouseEnter: Function,
+            // 鼠标离开行的回调
+            rowMouseLeave: Function,
+            // 单元格编辑完成回调
+            cellEditDone: Function,
+            // 单元格合并
+            cellMerge: Function,
+            // select all
+            selectAll: Function,
+            // 单个checkbox change event
+            selectChange: Function,
+            // checkbox-group change event
+            selectGroupChange: Function,
+            // filter event
+            filterMethod: Function,
+            //
+            columnWidthDragResize: Function
+        },
+        computed: {
+            // 是否是复杂表头
+            isComplexTitle () {
+                return (Array.isArray(this.internalTitleRows) && this.internalTitleRows.length > 0);
+            },
+            // 获取表格高度
+            getTableHeight () {
+                // return `${this.isTableEmpty ? this.tableEmptyHeight : this.internalHeight}px`;
+                return "100%";
+            },
+            getTableCenterViewHeight () {
+                // return undefined;
+                return "100%";
+            },
+            getTableCenterViewBodyHeight () {
+                // return `${this.bodyViewHeight}px`;
+                return "calc(100% - 52px)";
+            },
+
+            // 左侧区域宽度
+            leftViewWidth () {
+                let result = 0;
+                if (this.hasFrozenColumn) {
+                    result = this.frozenCols.reduce((total, curr) => total + curr.width, 0);
+                }
+                return result;
+            },
+            // 左侧区域宽度
+            rightViewWidth () {
+                let result = 0;
+                if (this.hasFrozenRightColumn) {
+                    result = this.frozenRightCols.reduce((total, curr) => total + curr.width, 0);
+                }
+                return result;
+            },
+            // 中侧区域宽度
+            centerViewWidth () {
+                // let width = 5000;
+                // if (this.$refs.table) {
+                //     width = this.$refs.table.clientWidth;
+                // }
+                // let result = width - this.leftViewWidth - this.rightViewWidth;
+                let result = this.internalWidth - this.leftViewWidth - this.rightViewWidth;
+                return this.hasFrozenColumn ? result : result;
+            },
+
+            // 左侧、右侧区域高度
+            bodyViewHeight () {
+                let result;
+                if (this.internalTitleRows.length > 0) {
+                    result = this.internalHeight - this.titleRowHeight * (this.internalTitleRows.length + this.getTitleRowspanTotalCount);
+                } else {
+                    result = this.internalHeight - this.titleRowHeight;
+                }
+
+                // 1px: 当有滚动条时，使滚动条显示全
+                result -= (this.footerTotalHeight + 1);
+
+                return result;
+            },
+
+            // 所有列的总宽度
+            totalColumnsWidth () {
+                return this.internalColumns.reduce(function (total, curr) {
+                    return curr.width ? (total + curr.width + 1) : total;
+                }, 7); // 7代表1px边线+6px滚动条
+            },
+
+            // 获取未固定列的总宽度
+            totalNoFrozenColumnsWidth () {
+
+                return this.noFrozenCols.reduce(function (total, curr) {
+                    return curr.width ? (total + curr.width) : total;
+                }, 0);
+            },
+
+            // 获取所有的字段
+            getColumnsFields () {
+                return this.internalColumns.map((item) => {
+                    return item.field;
+                });
+            },
+
+            // 获取非固定列的字段集合
+            getNoFrozenColumnsFields () {
+                return this.internalColumns.filter(x => !x.isFrozen && !x.isFrozenRight).map((item) => {
+                    return item.field;
+                });
+            },
+
+            // 获取固定左列的字段集合
+            getFrozenColumnsFields () {
+                return this.internalColumns.filter(x => x.isFrozen).map((item) => {
+                    return item.field;
+                });
+            },
+            // 获取固定右列的字段集合
+            getFrozenRightColumnsFields () {
+                return this.internalColumns.filter(x => x.isFrozenRight).map((item) => {
+                    return item.field;
+                });
+            }
+        },
+        created () {
+            this.internalTableData = this.initInternalTableData(this.tableData);
+            this.tipContent = this.errorContent;
+
+            if (Array.isArray(this.columns) && this.columns.length > 0) {
+                this.initColumns();
+            }
+
+            this.updateCheckboxGroupModel();
+            this.initView();
+        },
+        mounted () {
+            this.setScrollbarWidth();
+            this.tableEmpty();
+            this.tableResize();
+
+            if (Array.isArray(this.tableData) && this.tableData.length > 0) {
+
+                this.scrollControl();
+            }
+
+            this.controlScrollBar();
+        },
+        methods: {
+            // 当宽度设置 && 非固定列未设置宽度时（列自适应）初始化列集合
+            initColumns () {
+                this.internalHeight = this.height;
+
+                this.footerTotalHeight = this.getFooterTotalRowHeight;
+
+                this.internalColumns = Array.isArray(this.columns) ? deepClone(this.columns) : [];
+
+                this.internalTitleRows = Array.isArray(this.titleRows) ? deepClone(this.titleRows) : [];
+
+                this.initColumnsFilters();
+
+                this.initResizeColumns();
+
+                this.hasFrozenColumn = this.internalColumns.some(x => x.isFrozen);
+                this.hasFrozenRightColumn = this.internalColumns.some(x => x.isFrozenRight);
+
+                this.initTableWidth();
+                this.setSortColumns();
+
+                let self = this;
+                let widthCountCheck = 0;
+
+                if (self.internalWidth && self.internalWidth > 0) {
+                    self.internalColumns.map(function (item) {
+                        if (!(item.width && item.width > 0)) {
+
+                            widthCountCheck++;
+                            if (self.isHorizontalResize) {
+                                console.error(self.errorMsg + "If you are using the isHorizontalResize property,Please set the value for each column's width");
+                            } else {
+                                item.width = self.internalWidth - self.totalColumnsWidth;
+                            }
+
+                        }
+                    });
+                }
+
+                if (widthCountCheck > 1) {
+                    console.error(this.errorMsg + "Only allow one column is not set width");
+                }
+            },
+
+            // 初始化width
+            initTableWidth () {
+                this.internalWidth = this.isHorizontalResize ? this.maxWidth : this.width;
+            },
+            getCellStyle (col, item) {
+                return {
+                    "width": col.width + "px",
+                    // "height": `${this.rowHeight}px`,
+                    // "line-height": `${this.rowHeight}px`,
+                    "height": undefined,
+                    "padding": "10px 15px",
+                    "line-height": undefined,
+                    "text-align": col.columnAlign
+                };
+            },
+            // // 获取所有列的总高度
+            // getTotalColumnsHeight () {
+            //     return this.titleRowHeight * (this.internalTitleRows ? this.internalTitleRows.length : 1) +
+            //         this.internalTableData.length * (this.rowHeight + 1) +
+            //         this.footerTotalHeight + 1;
+            // },
+            // 获取所有列的总高度
+            getTotalColumnsHeight () {
+                let titleTotalHeight = (this.internalTitleRows && this.internalTitleRows.length > 0) ? this.titleRowHeight * this.internalTitleRows.length : this.titleRowHeight;
+
+                titleTotalHeight += this.footerTotalHeight;
+
+                return titleTotalHeight + this.internalTableData.length * this.rowHeight + 1;
+            },
+            clickTd (e, col) {
+                if (["selection", "expane", "expend"].includes(col.type) || ["操作"].includes(col._name) || ["操作"].includes(col.title)) {
+                    e.stopPropagation();
+                }
+            },
+
+            // custom columns component event
+            customCompFunc (params) {
+                this.$emit("on-custom-comp", params);
+            },
+            // 行颜色
+            trBgColor (num) {
+                return {
+                    "background-color": num % 2 === 0 ? this.oddBgColor : this.evenBgColor
+                };
+            },
+            // 设置 column 列的样式
+            setColumnCellClassName (rowIndex, field, rowData) {
+                return this.columnCellClassName && this.columnCellClassName(rowIndex, field, rowData);
+            },
+
+            // 获取每个表头列的宽度
+            titleColumnWidth (fields) {
+                let result = 0;
+                if (Array.isArray(fields)) {
+                    let matchItems = this.internalColumns.filter((item, index) => {
+                        return fields.some(x => x === item.field);
+                    });
+
+                    result = matchItems.reduce((total, curr) => total + curr.width, 0);
+                } else {
+                    console.error(this.errorMsg + "the fields attribute must be a array in titleRows");
+                }
+                return result;
+            },
+            // 获取每个表头列的高度
+            titleColumnHeight (rowspan) {
+                if (rowspan && rowspan > 0) {
+                    return this.titleRowHeight * rowspan;
+                } else {
+                    return this.titleRowHeight;
+                }
+            },
+            // 超出的title提示
+            overflowTitle (row, rowIndex, col) {
+                let result = "";
+                if (typeof col.formatter === "function") {
+                    let val = col.formatter(row, rowIndex, this.pagingIndex, col.field);
+                    // 如果是html 不处理
+                    if (utils.isHtml(val)) {
+                        result = "";
+                    } else {
+                        result = val;
+                    }
+                } else {
+                    result = row[col.field];
+                }
+                return result;
+            },
+
+            // 当没设置宽度和高度时动态计算
+            initView () {
+                // 当没有设置宽度计算总宽度
+                if (!(this.internalWidth && this.internalWidth > 0)) {
+
+                    if (this.columns && this.columns.length > 0) {
+                        this.internalWidth = this.columns.reduce((total, curr) => total + curr.width, 0);
+
+                    }
+                }
+
+                let totalColumnsHeight = this.getTotalColumnsHeight();
+
+                // 当没有设置高度时计算总高度 || 设置的高度大于所有列高度之和时
+                if (!(this.height && this.height > 0) || this.height > totalColumnsHeight) {
+
+                    if (!this.isVerticalResize) {
+
+                        this.internalHeight = totalColumnsHeight;
+                    }
+
+                } else if (this.height <= totalColumnsHeight) {
+
+                    this.internalHeight = this.height;
+                }
+            },
+
+            initInternalTableData () {
+                return Array.isArray(this.tableData) ? deepClone(this.tableData) : [];
+            },
+            updateErrorContent () {
+                if (!this.firstLoad) {
+                    if (!(this.internalTableData && this.internalTableData.length)) {
+                        this.tipContent = "暂无数据";
+                    }
+                }
+                this.firstLoad = false;
+            },
+            // 对外暴露（隐藏显示切换时）
+            resize () {
+                // fixed bug in IE9 #17
+                this.resizeTimer = setTimeout(x => {
+
+                    this.tableResize();
+                });
+            }
+        },
+        watch: {
+
+            // 重新跟新列信息
+            "columns": {
+                handler: function (newVal) {
+
+                    this.initColumns();
+                    // fix issue #261
+                    this.tableResize();
+                },
+                deep: true
+            },
+            // 重新覆盖复杂表头信息
+            "titleRows": {
+                handler: function (newVal) {
+
+                    this.initColumns();
+                },
+                deep: true
+            },
+
+            // deep watch
+            "tableData": {
+
+                handler: function (newVal) {
+
+                    this.skipRenderCells = [];
+
+                    this.internalTableData = this.initInternalTableData(newVal);
+
+                    this.updateCheckboxGroupModel();
+
+                    this.tableEmpty();
+
+                    if (Array.isArray(newVal) && newVal.length > 0) {
+
+                        this.initView();
+
+                        this.scrollControl();
+                    }
+
+                    this.resize();
+                },
+                deep: true
+            },
+            "pagingIndex": {
+
+                handler: function () {
+
+                    this.clearCurrentRow();
+
+                    this.bodyScrollTop();
+                }
+            }
+        },
+        beforeDestroy () {
+
+            clearTimeout(this.resizeTimer);
+        }
+    };
+</script>