sone-ui-component-3.2.4 2.1.33 → 2.1.35

package/packages/table/src/mainNew.vue

@@ -0,0 +1,1369 @@
+<!--
+ * @Description:
+ * @Author:xjl
+ * @Date:2021-09-10 11:03
+-->
+<template>
+	<div class="sone_table_box" >
+		<div
+			class="table-menu-left"
+			v-if="showMenuLeft"
+		>
+			<slot name="menuLeft"></slot>
+		</div>
+		<div
+			class="table-menu-right"
+			v-if="showMenuRight"
+		>
+			<slot name="menuRight"></slot>
+			<el-dropdown
+				:hide-on-click="false"
+				v-if="showColumnHandleBtn"
+				@visible-change="onColumnVisibleMenu"
+			>
+				<icon-button
+					:iconfont="false"
+				  :tooltipDisabled="tooltipDisabled"
+					class="sort-btn"
+					content="列展示"
+					icon="el-icon-s-operation"
+				>
+				</icon-button>
+				<column-transfer
+					ref="column-transfer"
+					:columns.sync="internalColumns"
+					@save="save"
+					@dropdownList="dropdownList"
+					@handleCheckedColumnChange="handleCheckedColumnChange"
+					@selectFixed="selectFixed"
+					@resetColumnTransfer="$emit('resetColumnTransfer')"
+				></column-transfer>
+			</el-dropdown>
+			<slot name="transferRight"></slot>
+		</div>
+		<el-table
+			:cell-class-name="option.cellClassName"
+			:cell-style="option.cellStyle"
+			:data="tableData"
+			:header-cell-class-name="option.headerCellClassName"
+			:header-cell-style="option.headerCellStyle"
+			:header-row-class-name="option.headerRowClassName"
+			:header-row-style="option.headerRowStyle"
+			:height="option.height"
+			:highlight-current-row="option.highlightRow"
+			:max-height="option.maxHeight"
+			:default-expand-all="option.defaultExpandAll"
+			:expand-row-keys="option.expandRowKeys"
+			:ref="tabelRef"
+			:row-class-name="tableRowClassName"
+			:row-key="option.rowKey"
+			:row-style="option.rowStyle"
+			:show-summary="option.showSummary"
+			:render-header="option.renderHeader"
+			:span-method="spanMethod"
+			:show-header="showHeader"
+			:stripe="stripe"
+			:border="border"
+			:sum-text="option.sumText"
+			:summary-method="summaryMethod"
+			:lazy="lazy"
+			:load="load"
+			@cell-mouse-enter="cellMouseEnter"
+			@cell-mouse-leave="cellMouseLeave"
+			@filter-change="filterChange"
+			@header-click="headerClick"
+			@header-contextmenu="headerContextmenu"
+			@row-click="rowClick"
+			@row-contextmenu="rowContextmenu"
+			@row-dblclick="rowDblclick"
+			style="width: 100%"
+			:class="'sone-table ' + className"
+			v-if="isTable"
+			v-loading="loading"
+			@header-dragend="onHeaderDragend"
+			@expand-change="expandChange"
+		>
+			<el-table-column
+				:width="operation.width"
+				fixed
+				:label="operation.label ? operation.label : '操作'"
+				type="index"
+				v-if="operation"
+				:resizable="operation.hasOwnProperty('resizable') ? operation.resizable : true"
+			>
+				<template slot-scope="scope">
+					<template v-if="!hideButtonMode">
+						<div
+							class="sone-table-buttonList"
+							v-if="scope.row.buttonShow&&scope.row.buttonShow.filter(d=>d.isShow).length<=3"
+						>
+							<template v-for="(item,index) in operation.buttonList">
+								<el-tooltip
+									:content="item.label"
+									:key="index"
+									effect="light"
+									placement="top"
+									v-show="scope.row.buttonShow.find(i=>i.id===item.id).isShow"
+								>
+									<el-button
+										:icon="item.icon"
+										:style="{color:item.color}"
+										:disabled="scope.row.buttonShow.find(i=>i.id===item.id).isDisabled || false"
+										@click.native.stop="handButton(item.function, scope, item.id)"
+										circle
+										type="text"
+									></el-button>
+								</el-tooltip>
+							</template>
+						</div>
+
+						<div
+							class="sone-table-buttonList"
+							v-if="scope.row.buttonShow&&scope.row.buttonShow.filter(d=>d.isShow).length>3"
+						>
+							<template v-for="(item,index) in scope.row.buttonShow.filter(d=>d.isShow).slice(0,2)">
+								<el-tooltip
+									:content="operation.buttonList.find(d=>d.id===item.id).label"
+									:key="index"
+									effect="light"
+									placement="top"
+								>
+									<el-button
+										:icon="operation.buttonList.find(d=>d.id===item.id).icon"
+										:style="{color:operation.buttonList.find(d=>d.id===item.id).color}"
+										:disabled="item.hasOwnProperty('isDisabled') ? item.isDisabled : false"
+										@click.native.stop="handButton(operation.buttonList.find(d=>d.id===item.id).function, scope, item.id)"
+										circle
+										type="text"
+									></el-button>
+								</el-tooltip>
+							</template>
+
+							<el-dropdown class="dropdown_box_button">
+								<span class="el-dropdown-link color-span menu-more">
+									<el-button type="text">
+										<i
+											:style="{color:operation.moreIconColor}"
+											class="el-icon-more more-handel"
+										></i>
+									</el-button>
+								</span>
+								<el-dropdown-menu slot="dropdown">
+									<el-dropdown-item
+										class="sone-table-dropdown"
+										command="copy"
+										v-for="(item, i) in scope.row.buttonShow.filter(d=>d.isShow).slice(2,scope.row.buttonShow.filter(d=>d.isShow).length)"
+										:key="i"
+									>
+										<el-button
+											:icon="operation.buttonList.find(d=>d.id===item.id).icon"
+											:disabled="item.hasOwnProperty('isDisabled') ? item.isDisabled : false"
+											:style="{color:operation.buttonList.find(d=>d.id===item.id).color}"
+											:title="operation.buttonList.find(d=>d.id===item.id).label"
+											type="text"
+											@click.native.stop="handButton(operation.buttonList.find(d=>d.id===item.id).function, scope, item.id)"
+										>
+											{{operation.buttonList.find(d=>d.id===item.id).label}}
+										</el-button>
+									</el-dropdown-item>
+								</el-dropdown-menu>
+							</el-dropdown>
+						</div>
+
+						<div
+							class="sone-table-buttonList"
+							v-if="!scope.row.buttonShow&&operation.buttonList.length<=3"
+						>
+							<template v-for="(item,index) in operation.buttonList">
+								<el-tooltip
+									:content="item.label"
+									:key="index"
+									effect="light"
+									placement="top"
+								>
+									<el-button
+										:icon="item.icon"
+										:style="{color:item.color}"
+										@click.native.stop="handButton(item.function,scope, item.id)"
+										circle
+										type="text"
+									></el-button>
+								</el-tooltip>
+							</template>
+						</div>
+
+						<div
+							class="sone-table-buttonList"
+							v-if="!scope.row.buttonShow&&operation.buttonList.length>3"
+						>
+							<template v-for="(item,index) in operation.buttonList.slice(0,2)">
+								<el-tooltip
+									:content="item.label"
+									:key="index"
+									effect="light"
+									placement="top"
+								>
+									<el-button
+										:icon="item.icon"
+										:style="{color:item.color}"
+										@click.native.stop="handButton(item.function, scope, item.id)"
+										circle
+										type="text"
+									></el-button>
+								</el-tooltip>
+							</template>
+							<el-dropdown
+								@command.stop="(command)=>{handleCommand(command,row)}"
+								class="dropdown_box_button"
+							>
+								<span class="el-dropdown-link color-span menu-more">
+									<el-button type="text">
+										<i
+											:style="{color:operation.moreIconColor}"
+											class="el-icon-more more-handel"
+										></i>
+									</el-button>
+								</span>
+								<el-dropdown-menu slot="dropdown">
+									<el-dropdown-item
+										class="sone-table-dropdown"
+										command="copy"
+										v-for="(item, i) in operation.buttonList.slice(2,operation.buttonList.length)"
+										:key="i"
+									>
+										<el-button
+											:icon="item.icon"
+											:style="{color:item.color}"
+											:title="operation.buttonList.find(d=>d.id===item.id).label"
+											type="text"
+											@click.native.stop="handButton(operation.buttonList.find(d=>d.id===item.id).function, scope, item.id)"
+										>
+											{{item.label}}
+										</el-button>
+									</el-dropdown-item>
+								</el-dropdown-menu>
+							</el-dropdown>
+						</div>
+					</template>
+
+					<template v-else>
+						<el-dropdown
+							v-if="scope.row.buttonShow"
+							class="dropdown_box_button sone-table-buttonList"
+						>
+							<span
+								class="el-dropdown-link color-span menu-more"
+								v-show="scope.row.buttonShow.filter(d=>d.isShow).length > 0"
+							>
+								<el-button type="text">
+									<i
+										:style="{color:operation.moreIconColor}"
+										class="el-icon-more more-handel"
+									></i>
+								</el-button>
+							</span>
+							<el-dropdown-menu slot="dropdown">
+								<el-dropdown-item
+									class="sone-table-dropdown"
+									command="copy"
+									v-for="(item, i) in scope.row.buttonShow.filter(d=>d.isShow)"
+									:key="i"
+								>
+									<el-button
+										:icon="operation.buttonList.find(d=>d.id===item.id).icon"
+										:disabled="item.hasOwnProperty('isDisabled') ? item.isDisabled : false"
+										:style="{color:operation.buttonList.find(d=>d.id===item.id).color}"
+										type="text"
+										:title="operation.buttonList.find(d=>d.id === item.id).label"
+										@click.native.stop="handButton(operation.buttonList.find(d=>d.id===item.id).function, scope, item.id)"
+									>
+										{{operation.buttonList.find(d=>d.id===item.id).label}}
+									</el-button>
+								</el-dropdown-item>
+							</el-dropdown-menu>
+						</el-dropdown>
+						<el-dropdown
+							v-else
+							@command.stop="(command)=>{handleCommand(command,row)}"
+							class="dropdown_box_button sone-table-buttonList"
+						>
+							<span
+								class="el-dropdown-link color-span menu-more"
+								v-show="operation.buttonList.length > 0"
+							>
+								<el-button type="text">
+									<i
+										:style="{color:operation.moreIconColor}"
+										class="el-icon-more more-handel"
+									></i>
+								</el-button>
+							</span>
+							<el-dropdown-menu slot="dropdown">
+								<el-dropdown-item
+									class="sone-table-dropdown"
+									command="copy"
+									v-for="(item, i) in operation.buttonList"
+									:key="i"
+								>
+									<el-button
+										:icon="item.icon"
+										:style="{color:item.color}"
+										:title="item.label"
+										type="text"
+										@click.native.stop="handButton(item.function, scope, item.id)"
+									>
+										{{item.label}}
+									</el-button>
+								</el-dropdown-item>
+							</el-dropdown-menu>
+						</el-dropdown>
+					</template>
+				</template>
+			</el-table-column>
+			<!--只显示序号-->
+			<el-table-column
+				:width="option.indexWidth||70"
+				fixed
+				:label="option.indexLabel ? option.indexLabel : '序号'"
+				type="index"
+				:index="indexMethod"
+				:resizable="option.hasOwnProperty('indexResizable') ? option.indexResizable : true"
+				v-if="option.index"
+			></el-table-column>
+			<!-- 序号+单选 -->
+			<el-table-column
+				:width="option.indexRadioWidth||70"
+				fixed
+				:label="option.indexLabel ? option.indexLabel : '序号'"
+				type="index"
+				v-else-if="option.indexRadio"
+				:resizable="option.hasOwnProperty('indexResizable') ? option.indexResizable : true"
+			>
+				<template slot-scope="scope">
+					<div class="index-check-box">
+						<el-radio
+							:class="{ 'in-block': radioRow && radioRow === scope.row[option.rowKey] }"
+							:label="scope.row[option.rowKey]"
+							@change="handleRadioChange(scope.row, scope.$index)"
+							v-model="scope.row[option.rowKey]"
+							class="table-checked"
+						></el-radio>
+						<!--&lt;!&ndash; 有分页时，序号显示 &ndash;&gt;-->
+						<span
+							class="table-index"
+							v-if="page"
+							v-show="!radioRow || radioRow !== scope.row[option.rowKey]"
+						>{{ indexMethod ? indexMethod(scope.$index) : (page.current - 1) * page.size + scope.$index + 1 }}</span>
+						<!-- 无分页时，序号显示 -->
+						<span
+							class="table-index"
+							v-else
+							v-show="!radioRow || radioRow !== scope.row[option.rowKey]"
+						>{{ (indexMethod ? indexMethod(scope.$index) : scope.$index + 1) }}</span>
+					</div>
+				</template>
+			</el-table-column>
+			<!-- 序号+复选 -->
+			<el-table-column
+				:width="option.indexCheckWidth||70"
+				fixed
+				:label="option.indexLabel ? option.indexLabel : '序号'"
+				type="index"
+				v-else-if="option.indexCheck"
+				:resizable="option.hasOwnProperty('indexResizable') ? option.indexResizable : true"
+			>
+				<!--全选 -->
+				<!--重新slot头部 如果没有选择的时候是出现序号，全选的时候所有全选框出现-->
+				<template
+					slot="header"
+					slot-scope="{}"
+				>
+					<div
+						@click.stop=""
+						class="index-check-box"
+					>
+						<span
+							class="table-index"
+							v-show="!checkList || checkList.length < 1"
+						>{{ option.indexLabel ? option.indexLabel : '序号' }}</span>
+						<!--自定义全选表头-->
+						<label
+							:class="{ 'is-checked': checkAll, 'in-block': checkList && checkList.length > 0 }"
+							class="el-checkbox table-checked"
+						>
+							<!--is-indeterminate半选 is-checked全选-->
+							<span
+								:class="{ 'is-checked': checkAll, 'is-indeterminate': checkIndeterminate }"
+								class="el-checkbox__input"
+							>
+								<!--全选和半选点击-->
+								<span
+									@click.stop="handleCheckAllChange(!checkAll)"
+									class="el-checkbox__inner"
+								></span>
+							</span>
+						</label>
+					</div>
+				</template>
+
+				<template slot-scope="scope">
+					<div
+						@click.stop=""
+						class="index-check-box"
+					>
+						<label
+							:class="{ 'is-checked': scope.row.checked, 'in-block': scope.row.checked }"
+							class="el-checkbox table-checked"
+						>
+							<!--is-indeterminate半选 is-checked全选-->
+							<span
+								:class="{ 'is-checked': scope.row.checked, 'is-indeterminate': scope.row.indeterminate }"
+								class="el-checkbox__input"
+							>
+								<!--全选和半选点击-->
+								<span
+									@click.stop="handleCheckedChange(scope.row.checked, scope.row, scope.$index)"
+									class="el-checkbox__inner"
+								></span>
+							</span>
+						</label>
+
+						<!-- <el-checkbox
+							:class="{ 'in-block': checkList && checkList.indexOf(scope.row[option.rowKey]) > -1 }"
+							:label="scope.row[option.rowKey]"
+							@change="handleCheckedChange(scope.row.checked, scope.row, scope.$index)"
+							class="table-checked"
+							:indeterminate="scope.row.indeterminate"
+						></el-checkbox> -->
+						<!-- 有分页时，序号显示 -->
+						<span
+							class="table-index"
+							v-if="page"
+							v-show="!scope.row.checked"
+						>{{ indexMethod ? indexMethod(scope.$index) : (page.current - 1) * page.size + scope.$index + 1 }}</span>
+						<!-- 无分页时，序号显示 -->
+						<span
+							class="table-index"
+							v-else
+							v-show="!scope.row.checked"
+						>{{ (indexMethod ? indexMethod(scope.$index) : scope.$index + 1) }}</span>
+						<!-- {{scope.row.indeterminate ? scope.row.indeterminate : false}} -->
+					</div>
+				</template>
+			</el-table-column>
+
+			<template v-for="(column, index) in internalColumns">
+				<!-- 自定义列 -->
+				<slot v-if="column.slot && column.istrue" :name="column.slot"></slot>
+				<el-table-column
+					:filter-method="column.filters ? filterHandler : null"
+					:filters="column.filters"
+					:fixed="column.fixed"
+					:key="`col_${column.prop}_${column.label}`"
+					:label="column.label"
+					:min-width="column.minWidth"
+					:prop="column.prop"
+					:width="column.width"
+					:align="column.hasOwnProperty('align') ? column.align : 'left'"
+					:show-overflow-tooltip="false"
+					filter-placement="bottom-end"
+					:header-align="column.hasOwnProperty('headerAlign') ? column.headerAlign : 'left'"
+					v-else-if="column.hasOwnProperty('istrue')?column.istrue:true"
+					:column-key="column.hasOwnProperty('elementId')? column.elementId:column.prop"
+					:resizable="column.hasOwnProperty('resizable') ? column.resizable : true"
+				>
+					<template v-if="isMultipleHeader">
+						<template v-for="(childColumn, childIdx) in column.children">
+							<el-table-column
+								:filter-method="childColumn.filters ? filterHandler : null"
+								:filters="childColumn.filters"
+								:fixed="childColumn.fixed"
+								:key="`col_${index}_${childIdx}`"
+								:label="childColumn.label"
+								:min-width="childColumn.minWidth"
+								:prop="childColumn.prop"
+								:width="childColumn.width"
+								:show-overflow-tooltip="false"
+								:align="childColumn.hasOwnProperty('align') ? childColumn.align : 'left'"
+								filter-placement="bottom-end"
+								:header-align="childColumn.hasOwnProperty('headerAlign') ? childColumn.headerAlign : 'left'"
+								v-if="childColumn.hasOwnProperty('istrue')?childColumn.istrue:true"
+								:column-key="childColumn.prop"
+								:resizable="childColumn.hasOwnProperty('resizable') ? childColumn.resizable : true"
+							>
+								<!-- 表头 -->
+								<template
+									slot="header"
+									slot-scope="scope"
+								>
+									<slot
+										:header="scope"
+										:name="childColumn.slotColumnHeader"
+										v-if="childColumn.slotColumnHeader && isShow"
+									></slot>
+									<template v-if="!childColumn.slotColumnHeader && isShow">
+										<div
+											class="slot_header_class"
+										>
+											<!-- style="display: flex;" -->
+											<span
+												class="table-header-isRequire"
+												v-if="childColumn.isRequire"
+											>*</span>
+											<span>{{ childColumn.label }}</span>
+											<span class="hide">
+												<i
+													class="iconfont icon-help icon_describe"
+													:title="childColumn.headerDescribe"
+													v-if="childColumn.headerDescribe"
+												></i>
+												<span
+													:class="{ 'ascending': sortVal === childColumn.prop + 'ascending', 'descending': sortVal === childColumn.prop + 'descending' }"
+													class="caret-wrapper"
+													v-if="childColumn.headerFilterSort"
+												>
+													<i
+														@click="handleCommand(childColumn.prop, childIdx, { command: 'ascending' })"
+														class="sort-caret ascending"
+														title="升序"
+													></i>
+													<i
+														@click="handleCommand(childColumn.prop, childIdx, { command: 'descending' })"
+														class="sort-caret descending"
+														title="降序"
+													></i>
+												</span>
+											</span>
+										</div>
+									</template>
+								</template>
+								<!--表体-->
+								<template slot-scope="scope">
+									<slot
+										:index="scope.$index"
+										:name="childColumn.slotCell"
+										:row="scope.row"
+										v-if="childColumn.slotCell"
+									></slot>
+									<template v-else>
+										<el-tooltip :content="scope.row[childColumn.prop]" placement="top" effect="light" popper-class="over_popper">
+												<span class="over_title">{{ scope.row[childColumn.prop] }}</span>
+										</el-tooltip>
+									</template>
+								</template>
+							</el-table-column>
+						</template>
+					</template>
+					<!-- 表头 -->
+					<template
+						slot="header"
+						slot-scope="scope"
+					>
+						<slot
+							:header="{column: scope.column, $index:scope.$index }"
+							:name="column.slotColumnHeader"
+							v-if="column.slotColumnHeader && isShow"
+						></slot>
+						<template v-if="!column.slotColumnHeader && isShow">
+							<div
+								class="slot_header_class"
+							>
+								<!-- style="display: flex;" -->
+								<span
+									class="table-header-isRequire"
+									v-if="column.isRequire"
+								>*</span>
+								<span>{{ column.label }}</span>
+								<span class="hide">
+									<i
+										class="iconfont icon-help icon_describe"
+										:title="column.headerDescribe"
+										v-if="column.headerDescribe"
+									></i>
+									<!--<span  v-if="column.headerFilterSort">-->
+									<!--<i class="el-icon-sort-up" title="升序"   @click="handleCommand(column.prop, index, {command: 'ascending'})"></i>-->
+									<!--<i class="el-icon-sort-down" title="降序"  @click="handleCommand(column.prop, index, {command: 'descending'})"></i>-->
+									<!--</span>-->
+									<span
+										:class="{ 'ascending': sortVal === column.prop + 'ascending', 'descending': sortVal === column.prop + 'descending' }"
+										class="caret-wrapper"
+										v-if="column.headerFilterSort"
+									>
+										<i
+											@click="handleCommand(column.prop, index, { command: 'ascending' })"
+											class="sort-caret ascending"
+											title="升序"
+										></i>
+										<i
+											@click="handleCommand(column.prop, index, { command: 'descending' })"
+											class="sort-caret descending"
+											title="降序"
+										></i>
+									</span>
+								</span>
+							</div>
+						</template>
+					</template>
+					<!--表体-->
+					<template slot-scope="scope">
+						<slot
+							:index="scope.$index"
+							:name="column.slotCell"
+							:row="scope.row"
+							v-if="column.slotCell"
+						></slot>
+						<template v-else>
+							<el-tooltip :content="scope.row[column.prop]" placement="top" effect="light" popper-class="over_popper">
+												<span class="over_title">{{ scope.row[column.prop] }}</span>
+										</el-tooltip>
+										</template>
+					</template>
+				</el-table-column>
+			</template>
+		</el-table>
+		<div
+			class="pagination-box"
+			v-if="page && page.total > 0"
+		>
+			<!-- 是否调用分页 -->
+			<el-pagination
+				:current-page="page.current"
+				:layout="page.layout ? page.layout : 'total, sizes, prev, pager, next, jumper'"
+				:page-size="page.size"
+				:page-sizes="page.pageSizes"
+				:total="page.total"
+				:page-count="page.pageCount"
+				:pager-count="page.pagerCount"
+				@current-change="currentChange"
+				@size-change="sizeChange"
+				background
+			></el-pagination>
+		</div>
+		<!-- 显示/隐藏列 -->
+	</div>
+</template>
+
+<script>
+	import { deepClone } from 'sone-ui-component/src/utils/util'
+	import columnTransfer from './columnTransferNew.vue'
+	import Sortable from 'sortablejs'
+import IconButton from "sone-ui-component/packages/IconButton/index.vue";
+	export default {
+		name: "SoneTable",
+		components: { columnTransfer,IconButton },
+		props: {
+			showMenuLeft: {
+				type: Boolean,
+				default: false
+			},
+			showMenuRight: {
+				type: Boolean,
+				default: true
+			},
+			showColumnHandleBtn: {
+				type: Boolean,
+				default: true
+			},
+			hideButtonMode: {
+				type: Boolean,
+				default: false 
+			},
+			tabelRef: {
+				type: String,
+				default: 'tableDataRef'
+			},
+			loading: {
+				type: Boolean,
+				default: false,
+			},
+			showHeader: {
+				type: Boolean,
+				default: true,
+			},
+			stripe: {
+				type: Boolean,
+				default: true,
+			},
+			border: {
+				type: Boolean,
+				default: true,
+			},
+			onlyLeaf:  {
+				type: Boolean,
+				default: false,
+			},
+			onlyCur: {
+				type: Boolean,
+				default: false,
+			},
+			lazy: {
+				type: Boolean,
+				default: false,
+			},
+			option: {
+				type: Object,
+				default: () => {
+					return {
+						index: true,
+						indexWidth: 70,
+						height: 'auto',
+						maxHeight: 'auto',
+
+					}
+				}
+			},
+			operation: {
+				type: [Object, Boolean],
+				default: () => {
+					return {
+						width: 82,
+						label: '操作',
+						buttonList: [
+							{
+								label: '删除',
+								icon: 'el-icon-remove-outline',
+								function: 'handDetele',
+								tooltipContent: '删除',
+								color: 'red'
+							}, {
+								label: '添加',
+								icon: 'el-icon-circle-plus-outline',
+								function: 'hand',
+								tooltipContent: '删除',
+								color: 'red'
+							}
+						]
+					}
+				}
+			},
+			page: {
+				type: Object,
+			},
+			columns: {
+				type: Array,
+				default: () => []
+			},
+			tableData: {
+				type: Array,
+				default: () => []
+			},
+			// 默认选中的复选值
+			defaultCheckedList: {
+				type: Array,
+				default: () => []
+			},
+			// 是否开启行拖拽
+			isRowDrop: {
+				type: Boolean,
+				default: false
+			},
+			// 行拖拽是否更改表格数据
+			isUpdateData:{
+				type:Boolean,
+				default:true
+			},
+			// 定义是否列表单元是否可以在列表容器内进行拖拽排序
+			dropSort:{
+				type:Boolean,
+				default:true
+			},
+			// 表格className
+			className:{
+				type:String,
+				default:''
+			},
+			/* 表格多级表头 */
+			isMultipleHeader: {
+				type: Boolean,
+				default: false
+			},
+			// 合计小数位数
+			summaryToFixed:{
+				type:[Number, String],
+				default:''
+			},
+			spanMethod: Function,
+			indexMethod: Function,
+			load: Function,
+				// 默认显示按钮图标加提示，
+		tooltipDisabled: {
+      type: Boolean,
+      default: false,
+    },
+		},
+		data() {
+			return {
+				// 单选
+				radioRow: '',
+				// 复选
+				checkAll: false,
+				checkIndeterminate: false,
+				//多选的列表
+				checkList: this.defaultCheckedList,
+
+				sortable: {},
+				internalColumns: deepClone(this.columns).filter(d => d && !d.isHidden),
+				sortVal: '', // 排序
+				isShow: true,
+
+				isTable: true
+			}
+		},
+
+		watch: {
+			// // 监听 - 复选框刷新
+			defaultCheckedList() {
+				if (!this.defaultCheckedList || this.defaultCheckedList.length < 1) {
+					this.checkList = []
+					this.checkAll = false
+					this.checkIndeterminate = false
+				}
+			},
+			columns: {
+				deep: true,
+				handler() {
+					this.internalColumns = deepClone(this.columns).filter(d => d && !d.isHidden);
+				}
+			},
+			internalColumns: {
+				deep: true,
+				handler() {
+					this.isShow = false
+					this.$nextTick(() => {  //不放在这里面会导致视图不刷新
+						this.isShow = true;
+					})
+					this.$refs[this.tabelRef] && this.$refs[this.tabelRef].doLayout();
+				}
+			},
+		},
+
+		mounted() {
+
+			if (this.isRowDrop) this.rowDrop() // 开启行拖拽
+			// this.columnDrop()
+		},
+
+		methods: {
+			columnsCheckList(valArr) {
+				this.internalColumns.forEach(i => {
+					if (valArr.includes(i.label)) {
+						this.$set(i, 'istrue', true)
+					} else {
+						this.$set(i, 'istrue', false)
+					}
+				});
+				this.$nextTick(() => {
+					this.$refs[this.tabelRef] && this.$refs[this.tabelRef].doLayout();
+				});
+			},
+			selectFixed(items) {
+				this.internalColumns = deepClone(items);
+				this.$nextTick(() => {
+					this.$refs[this.tabelRef] && this.$refs[this.tabelRef].doLayout();
+				});
+
+			},
+			handleCheckedColumnChange(data, internalColumns) {
+				if(data){
+					this.columnsCheckList(data)
+				}
+				if(internalColumns && internalColumns.length){
+					this.$nextTick(() => {
+						this.internalColumns = deepClone(internalColumns);
+					});
+				}
+			},
+			dropdownList(itemset) {
+				this.internalColumns = deepClone(itemset);
+				this.isTable = false
+				this.$nextTick(() => {
+					this.isTable = true
+				})
+			},
+
+			deleteRow(index, rows) {
+				rows.splice(index, 1);
+			},
+			/** 单选 **/
+			handleRadioChange(row, index) {
+				this.radioRow = row[this.option.rowKey];
+				this.$emit('handleRadio', row, index)
+			},
+			/** 复选 **/
+			// 全选/取消全选-复选框
+			handleCheckAllChange(val) {
+				let data = deepClone(this.tableData)
+        let aCheckedData = [];
+				this.checkAll = val
+				this.checkIndeterminate = false
+				let _this = this;
+				if (val) {
+					this.checkList = [];
+					checkedAll(data);
+				} else {
+					cancelCheckedAll(data);
+					this.checkList = [];
+          aCheckedData = [];
+				}
+
+				//懒得优化就这样。。。
+				function checkedAll(d){
+					d.forEach(item => {
+            if(_this.onlyLeaf){//只需要叶子节点
+							if(!item.hasOwnProperty('children')){
+								aCheckedData.push(item);
+								_this.checkList.push(item[_this.option.rowKey]);
+							} 
+						}else{
+							aCheckedData.push(item);
+              _this.checkList.push(item[_this.option.rowKey]);
+						}
+						item.checked = true;
+						item.indeterminate = false;
+						if(item.children && item.children.length > 0) {
+							checkedAll(item.children);
+						}
+					})
+				}
+				function cancelCheckedAll(d){
+					d.forEach(item => {
+						item.checked = false;
+						if(item.children && item.children.length > 0) {
+							item.indeterminate = false;
+							cancelCheckedAll(item.children);
+						}
+					})
+				}
+				this.$emit('handleChecked', true, this.checkList, aCheckedData, null, val)
+				this.$emit('update:tableData', data);
+			},
+
+			// 复选框-选择
+			handleCheckedChange(isChecked, row, index) {
+				let _this = this;
+				if(row.indeterminate){
+					row.checked = true;
+				}else{
+					row.checked = !row.checked;
+				}
+				if(row.children && row.children.length > 0 && !this.onlyCur){
+					row.indeterminate = false;
+					row.checked ? checkedAll(row.children) : cancelCheckedAll(row.children);
+				}
+				//懒得优化就这样。。。
+				function checkedAll(d){
+					d.forEach(item => {
+						item.checked = true;
+						let i = _this.checkList.findIndex(t => t === item[_this.option.rowKey]);
+						if(!i || i === -1) _this.checkList.push(item[_this.option.rowKey]);
+						if(item.children && item.children.length > 0) {
+							item.indeterminate = false;
+							checkedAll(item.children);
+						}
+					})
+				}
+				function cancelCheckedAll(d){
+					d.forEach(item => {
+						item.checked = false;
+						let i = _this.checkList.findIndex(t => t === item[_this.option.rowKey]);
+						_this.checkList.splice(i, 1);
+						if(item.children && item.children.length > 0) {
+							item.indeterminate = false;
+							cancelCheckedAll(item.children);
+						}
+					})
+				}
+				//树形层次较深时找到父级半选中
+				let parent = this.setParentCheck(this.tableData, row[this.option.rowKey]);
+				let checkList = this.checkList.concat(parent);
+				checkList = checkList.reduce((prev, cur) => { //去重
+						prev.indexOf(cur) === -1 && prev.push(cur);
+						return prev;
+				},[]);
+				this.checkList = checkList;
+				this.getPageCheckStatus()
+				this.$emit('handleChecked', false, this.checkList, row, index, row.checked)
+			},
+			setParentCheck(data, id) {
+				for (const i in data) {
+					if (data[i][this.option.rowKey] === id) {
+						return [data[i][this.option.rowKey]]
+					}
+					if (data[i].children) {
+						const result = this.setParentCheck(data[i].children, id)
+						if (result !== undefined && !this.onlyCur) {
+							data[i].indeterminate = true;
+							data[i].checked = true;
+							return result.concat(data[i][this.option.rowKey])
+						}
+					}
+				} 
+			},
+			// 判断当前页是否全/半选
+			getPageCheckStatus() {
+				let data = deepClone(this.tableData)
+				if (this.checkList.length < 1 || data.length < 1) {
+					this.checkAll = false
+					this.checkIndeterminate = false
+					return
+				}
+
+				let dataLength = 0;
+				let _this = this;
+				calcLength(data);
+				
+				function calcLength(d){
+					d.forEach(item => {
+						if(_this.onlyLeaf){
+							if(!item.hasOwnProperty('children')) dataLength++;
+							else{
+								if(_this.onlyCur) dataLength++;
+							}
+						}else{
+							dataLength++;
+						}
+						if(item.children && item.children.length > 0){
+							calcLength(item.children);
+						}
+					})
+				}
+
+				//父级下子集如果全部选中则取消父级半选中, 懒得优化了。。
+				if(!this.onlyCur){
+					this.calcCheck(data); 
+					this.calcHalfCheck(data);
+				}
+				
+				this.checkList = [];
+				this.calcCheckList(data);
+				
+				// 显示本页选中状态
+				if (this.checkList.length === dataLength) {
+					this.checkAll = true
+					this.checkIndeterminate = false
+				} else if (this.checkList.length === 0) {
+					this.checkAll = false
+					this.checkIndeterminate = false
+				} else {
+					this.checkAll = false
+					this.checkIndeterminate = true
+				}
+				this.$emit('update:tableData', data)
+			},
+			//神TMcheckbox要放在序号上的需求。
+			calcCheck(data){
+				let checkedCount = 0;
+				data.forEach(d => {
+					if(d.checked && !d.indeterminate) checkedCount++; //选中且非半选
+					if(d.indeterminate && d.children && d.children.length > 0){//半选有子集
+						if(d.children.length === this.calcCheck(d.children)){//子集全部选中
+							d.indeterminate = false; //关闭父级的半选
+						}else{
+							if(this.calcCheck(d.children) === 0){//子集全部未选中
+								d.checked = false; //父级取消选中
+								d.indeterminate = false; //父级隐藏半选
+								checkedCount = checkedCount - 1;
+							}else{//子集部分选中
+								d.indeterminate = true; //父级半选
+								d.checked = true; //父级选中
+							}
+						}
+					}
+				})
+				return checkedCount;
+			},
+			calcHalfCheck(data){
+				data.forEach(d => {
+					if(d.children && d.children.length > 0){
+						let hasHalf = d.children.find(t => t.checked && t.indeterminate);
+						if(hasHalf){
+							d.indeterminate = true;
+							d.checked = true;
+						}else{
+							let noCheck = d.children.find(t => !t.checked);
+							if(!noCheck){
+								d.indeterminate = false;
+								d.checked = true;
+							}
+						}
+						this.calcHalfCheck(d.children);
+					}
+				});
+			},
+			calcCheckList(data){
+				data.forEach(d => {
+					if(d.checked){
+						if(this.onlyLeaf){
+							if(!d.hasOwnProperty('children')) this.checkList.push(d[this.option.rowKey]);
+							else{
+								if(this.onlyCur) this.checkList.push(d[this.option.rowKey]);
+							}
+						}else{
+							this.checkList.push(d[this.option.rowKey]);
+						}
+					}
+					if(d.children && d.children.length > 0) this.calcCheckList(d.children);
+				})
+			},
+			// 下拉button
+			handleCommand(columnName, columnIndex, data) {
+				let tableData = deepClone(this.tableData)
+				if (data.command === "ascending" || data.command === "descending") {
+					if (this.sortVal && this.sortVal.indexOf(data.command) > -1) {
+						this.sortVal = ''
+					} else {
+						this.sortVal = columnName + data.command
+					}
+					if (this.option.defineSort) {
+						this.$emit('handleColumnFilter', columnName, columnIndex, data, !!!this.sortVal)
+					} else {
+						let isIncludeNaN = tableData.some(item => isNaN(Number(item[columnName])))
+						if ( isIncludeNaN ) { // 数据非纯数字使用原生ele方法
+							if(this.sortVal){
+								this.$refs[this.tabelRef].sort(columnName, data.command);
+							} else {
+								this.$refs[this.tabelRef].clearSort();
+							}
+						} else { // 纯数字使用sort排序
+							tableData.sort((a, b) => {
+								return data.command === 'ascending' ? a[columnName] - b[columnName] :  b[columnName] - a[columnName]
+							})
+							this.$emit('update:tableData', tableData)
+						}
+					}
+				} else {
+					this.$emit('handleColumnFilter', columnName, columnIndex, data)
+				}
+			},
+			// 翻页
+			sizeChange(val) {
+				this.$emit('sizeChange', val)
+			},
+			currentChange(val) {
+				this.$emit('currentChange', val)
+			},
+			// 合计
+			summaryMethod({ columns, data }) {
+				if (this.option.summaryMethod) {
+					return this.option.summaryMethod({ columns, data })
+				}
+				let _columns = deepClone(this.internalColumns);
+				const sums = [];
+				// 固定列会导致窜行 待改
+				if ( !!this.operation ) sums.push(this.option.sumText || '合计')
+				if ( this.option.indexCheck || this.option.index ) {
+					!!this.operation ? sums.push('') : sums.push('合计')
+				} 
+				if ( this.isMultipleHeader ) { // 多级表头 只拿底层表头进行合计
+					_columns = []
+					this.internalColumns.forEach(item => {
+						item.children.forEach(item2 => {
+							_columns.push(item2)
+						})
+					})
+				}
+				_columns.forEach((column, index) => {
+					if ( column.istrue ) {
+						let num = 0
+						data.forEach(item => num += Number(item[column.prop]))
+						if ( isNaN(num) || !column.summary ) {
+							sums.push('')
+						} else if ( String(num).indexOf('.') != -1 && this.summaryToFixed ) {
+							sums.push(num.toFixed(this.summaryToFixed))
+						} else {
+							sums.push(num)
+						}
+					}
+					// const columnObj = _columns.find(d => d.prop === column.property);
+					// if (!columnObj || !columnObj.summary) return;
+					// const values = data.map(item => Number(item[column.property]));
+					// if (!values.every(value => isNaN(value))) {
+					// 	sums[index] = values.reduce((prev, curr) => {
+					// 		const value = Number(curr);
+					// 		if (!isNaN(value)) {
+					// 			return prev + curr;
+					// 		} else {
+					// 			return prev;
+					// 		}
+					// 	}, 0);
+					// 	sums[index] += '';
+					// } else {
+					// 	sums[index] = '';
+					// }
+				});
+				// console.log('sums:',sums)
+				return sums;
+			},
+
+			// 单元格移入移出
+			cellMouseEnter(row, column, cell, event) {
+				this.$emit('cellMouseEnter', row, column, cell, event)
+			},
+			cellMouseLeave(row, column, cell, event) {
+				this.$emit('cellMouseLeave', row, column, cell, event)
+			},
+			// 行点击
+			rowClick(row, column, event) {
+				// 判断点击行是否联动选择复选框
+				if (!this.option.clickRowNoCheck) {
+					if (this.option.indexCheck) {
+						// 有复选框-行点击选中/取消选中
+						if (this.checkList.indexOf(row[this.option.rowKey]) > -1) {
+							this.checkList.splice(this.checkList.indexOf(row[this.option.rowKey]), 1)
+						} else {
+							this.checkList.push(row[this.option.rowKey])
+						}
+						// 全选/半全选标记
+						this.handleCheckedChange(row.checked, row)
+					} else if (this.option.indexRadio) {
+						this.radioRow = row[this.option.rowKey]
+						this.handleRadioChange(row)
+					}
+				}
+				//
+				this.$emit('rowClick', row, column, event)
+			},
+
+			// 行双击
+			rowDblclick(row, column, event) {
+				this.$emit('rowDblclick', row, column, event)
+			},
+
+            // 行拖拽
+            rowDrop() {
+                const tbody = document.querySelector(`.${!!this.className ? this.className : 'sone-table'} .el-table__body-wrapper tbody`)
+                // console.log('tbody:', tbody)
+                const _this = this
+                Sortable.create(tbody, {
+					sort:_this.dropSort,
+                    onEnd ( obj ) {
+                        let currRow = {}
+						let { newIndex, oldIndex } = obj
+						let tableData = deepClone(_this.tableData)
+						let isTreeTable = tableData.filter(item => Array.isArray(item.children) && item.children.length != 0)
+						if ( isTreeTable.length == 0 ) { // 普通表格
+							if ( _this.isUpdateData ) {
+								currRow = _this.tableData.splice(oldIndex, 1)[0]
+								_this.tableData.splice(newIndex, 0, currRow)
+							}
+						} else {	// 树形表格 
+							let tableDataList = []
+							function recursionData(data) {
+								data.forEach(item => {
+									tableDataList.push(item)     
+									if ( Array.isArray(item.children) && item.children.length != 0 ) {
+										recursionData(item.children)
+									}
+								})
+							}
+							recursionData(tableData)
+							currRow = tableDataList[newIndex]
+						}
+
+                        _this.$emit('dropRow', _this.tableData, currRow, newIndex, oldIndex, obj)
+                    }
+                })
+            },
+
+			// 当某一列的表头被点击时
+			headerClick(column, event) {
+				this.$emit('rowContextmenu', column, event)
+			},
+			// 当某一列的表头被鼠标右键点击时
+			headerContextmenu(column, event) {
+				this.$emit('headerContextmenu', column, event)
+			},
+			// 行被鼠标右键点击时
+			rowContextmenu(row, column, event) {
+				this.$emit('rowContextmenu', row, column, event)
+			},
+			filterChange(filters) {
+				let data = deepClone(this.tableData)
+				// 判断是哪一列筛选
+				if (filters.name) {
+					data.name = filters.name[0]
+				}
+				this.$emit('update:tableData', data)
+				// this.getTableList(); // 通过接口获取数据的方法
+			},
+			formatter(row, column) {
+				return row.address;
+			},
+
+			filterTag(value, row) {
+				return row.tag === value;
+			},
+			//过滤
+			filterHandler(value, row, column) {
+				const property = column['property'];
+				return row[property] === value;
+			},
+
+			// class
+			tableRowClassName({ row, rowIndex }) {
+				let rowClass = ''
+				if (this.option.rowClassName) {
+					rowClass = this.option.rowClassName({ row, rowIndex })
+				}
+				// if (this.checkList.indexOf(row[this.option.rowKey]) > -1 || this.radioRow === row[this.option.rowKey]) {
+				// 	return (rowClass + ' table-row-checked')
+				// } else {
+				// 	return rowClass
+				// }
+
+				if(this.option.indexRadio === true && this.radioRow === row[this.option.rowKey]){
+					return `current-row ${rowClass}`;
+				}
+				if(this.option.indexCheck === true && row.checked === true && !this.option['clickRowNoCheck']){
+					return `current-row ${rowClass}`;
+				}
+				return rowClass;
+			},
+
+			handButton(functionName, scope, id) {
+				this.$emit(functionName, scope, id)
+			},
+			doLayout() {
+				this.$refs[this.tabelRef] && this.$refs[this.tabelRef].doLayout();
+			},
+			/* 表格-列显隐-下拉菜单 */
+			onColumnVisibleMenu(flag){
+        let arr = [
+          ...this.$refs['column-transfer'].leftColumns, 
+          ...this.$refs['column-transfer'].noColumns,
+          ...this.$refs['column-transfer'].rightColumns
+        ]
+				// this.$emit('columnsVisibleMenu', flag, this.internalColumns );
+				this.$emit('columnsVisibleMenu', flag, arr );
+			},
+			/* 当拖动表头改变了列的宽度的时候会触发该事件 */
+			onHeaderDragend(newWidth, oldWidth, column, event){
+				let arr = [
+          ...this.$refs['column-transfer'].leftColumns, 
+          ...this.$refs['column-transfer'].noColumns,
+          ...this.$refs['column-transfer'].rightColumns
+        ]
+				this.$emit('headerDragend', newWidth, oldWidth, column, arr, event);
+			},
+			save(arr){
+				this.internalColumns = deepClone(arr);
+				this.isTable = false
+				this.$nextTick(() => {
+					this.isTable = true
+				})
+				this.$emit('save', arr);
+			},
+			/* 用于单选表格，设定某一行为选中行，如果调用时不加参数，则会取消目前高亮行的选中状态。 */
+			setCurrentRow(row){
+				this.$refs[this.tabelRef] && this.$refs[this.tabelRef].setCurrentRow(row);
+				this.$emit('setCurrentRow', row);
+			},
+			updateColumn(){
+
+			},
+			expandChange(row, expend){
+				this.$emit('expandChange', row, expend)
+			}
+		},
+	}
+</script>