sone-ui-component-3.2.4 2.1.62 → 2.1.64

package/packages/normalTable/src/mainNewTest.vue

@@ -0,0 +1,729 @@
+<!--
+ * @Description:  直接copy的table 优化代码 硬是让我删掉了800行。。。
+ * @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 v-if="showColumnHandleBtn">
+				<IconButton
+					:iconfont="false"
+				  :tooltipDisabled="tooltipDisabled"
+					class="sort-btn"
+					content="列展示"
+					icon="el-icon-s-operation" />
+				<ColumnTransfer
+					ref="column-transfer"
+					:columns.sync="internalColumns"
+					@save="save"
+					@resetColumnTransfer="$emit('resetColumnTransfer')" />
+			</el-dropdown>
+			<slot name="transferRight"></slot>
+		</div>
+		<template v-if="useVirtualScroll">
+			<VirtualScroll
+				v-if="isTable"
+				ref="virtualScroll"
+				:data="tableData"
+				:item-size="itemSize"
+				:key-prop="option.rowKey"
+				:buffer="buffer"
+				:dynamic="dynamic"
+				@change="currentList => virtualList = currentList">
+				<el-table
+					v-loading="loading"
+					style="width: 100%"
+					:ref="tabelRef"
+					:class="'sone-table ' + className"
+					:cell-class-name="option.cellClassName"
+					:cell-style="option.cellStyle"
+					:data="virtualList"
+					: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"
+					: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"
+					@filter-change="filterChange"
+					@row-click="rowClick"
+					@header-dragend="onHeaderDragend"
+					@select="selectChange"
+					@select-all="selectAll"
+					@sort-change="sortChange">
+					<el-table-column
+						v-if="operation"
+						fixed
+						type="index"
+						:width="operation.width"
+						:label="operation.label ? operation.label : '操作'"
+						: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&&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>
+							</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>
+					<VirtualColumn 
+						v-if="option.index" 
+						vfixed
+						type="index"
+						:width="option.indexWidth||50"
+						:label="option.indexLabel ? option.indexLabel : '序号'"
+						:index="indexMethod"
+					></VirtualColumn>
+					<VirtualColumn v-if="option.selection" vfixed :width="45" type="selection"></VirtualColumn>
+					<template v-for="(column, index) in internalColumns">
+						<!-- 自定义列 -->
+						<slot v-if="column.slot && column.istrue" :name="column.slot"></slot>
+						<el-table-column
+							v-else-if="column.hasOwnProperty('istrue')?column.istrue:true"
+							: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="column.hasOwnProperty('showOverflowTooltip') ? column.showOverflowTooltip : false"
+							filter-placement="bottom-end"
+							:sortable="column.sortable"
+							:header-align="column.hasOwnProperty('headerAlign') ? column.headerAlign : 'left'"
+							:column-key="column.hasOwnProperty('elementId')? column.elementId:column.prop"
+							:resizable="column.hasOwnProperty('resizable') ? column.resizable : true">
+							<!-- 表头 -->
+							<template	slot="header"	slot-scope="scope">
+								<slot
+									v-if="column.slotColumnHeader && isShow"
+									:header="{column: scope.column, $index:scope.$index }"
+									:name="column.slotColumnHeader"
+								></slot>
+								<template v-if="!column.slotColumnHeader && isShow">
+									<div class="slot_header_class">
+										<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
+												: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>{{ scope.row[column.prop] }}</template>
+							</template>
+						</el-table-column>
+					</template>
+				</el-table>
+			</VirtualScroll>
+		</template>
+		<template v-else>
+			<el-table
+				v-if="isTable"
+				v-loading="loading"
+				style="width: 100%"
+				:ref="tabelRef"
+				:class="'sone-table ' + className"
+				: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"
+				: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"
+				@filter-change="filterChange"
+				@row-click="rowClick"
+				@header-dragend="onHeaderDragend"
+				@select="selectChange"
+				@select-all="selectAll"
+				@sort-change="sortChange">
+				<el-table-column
+					v-if="operation"
+					fixed
+					type="index"
+					:width="operation.width"
+					:label="operation.label ? operation.label : '操作'"
+					: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&&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>
+						</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
+					v-if="option.index"
+					fixed
+					type="index"
+					:width="option.indexWidth||50"
+					:label="option.indexLabel ? option.indexLabel : '序号'"
+					:index="indexMethod"
+				></el-table-column>
+				<el-table-column
+					v-if="option.selection"
+					fixed
+					type="selection"
+					:show-overflow-tooltip="false"
+					:width="option.selectionWidth || 45">
+				</el-table-column>
+				<template v-for="(column, index) in internalColumns">
+					<!-- 自定义列 -->
+					<slot v-if="column.slot && column.istrue" :name="column.slot"></slot>
+					<el-table-column
+						v-else-if="column.hasOwnProperty('istrue')?column.istrue:true"
+						: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="column.hasOwnProperty('showOverflowTooltip') ? column.showOverflowTooltip : false"
+						filter-placement="bottom-end"
+						:sortable="column.sortable"
+						:header-align="column.hasOwnProperty('headerAlign') ? column.headerAlign : 'left'"
+						:column-key="column.hasOwnProperty('elementId')? column.elementId:column.prop"
+						:resizable="column.hasOwnProperty('resizable') ? column.resizable : true">
+						<!-- 表头 -->
+						<template	slot="header"	slot-scope="scope">
+							<slot
+								v-if="column.slotColumnHeader && isShow"
+								:header="{column: scope.column, $index:scope.$index }"
+								:name="column.slotColumnHeader"
+							></slot>
+							<template v-if="!column.slotColumnHeader && isShow">
+								<div class="slot_header_class">
+									<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
+											: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>{{ scope.row[column.prop] }}</template>
+						</template>
+					</el-table-column>
+				</template>
+			</el-table>
+		</template>
+		<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 IconButton from "sone-ui-component/packages/IconButton/index.vue";
+	import VirtualScroll from './virtual/el-table-virtual-scroll.vue'
+	import VirtualColumn from './virtual/el-table-virtual-column.vue'
+	export default {
+		name: "SoneNormalTable",
+		components: { ColumnTransfer, IconButton, VirtualScroll, VirtualColumn },
+		props: {
+			useVirtualScroll: {
+				type: Boolean,
+				default: false
+			},
+			itemSize: {
+				type: Number,
+				default: 60
+			},
+			buffer: {
+				type: Number,
+				default: 100
+			},
+			dynamic: {
+				type: Boolean,
+				default: false
+			},
+			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,
+			},
+			sortable: {
+				type: [Boolean, String],
+				default: false,
+
+			},
+			option: {
+				type: Object,
+				default: () => {
+					return {
+						index: true,
+						indexWidth: 70,
+						height: 'auto',
+						maxHeight: 'auto',
+						showSummary: false,
+					}
+				}
+			},
+			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: () => []
+			},
+			// 表格className
+			className:{
+				type:String,
+				default:''
+			},
+			// 合计小数位数
+			summaryToFixed:{
+				type:[Number, String],
+				default:''
+			},
+			spanMethod: Function,
+			indexMethod: Function,
+			// 默认显示按钮图标加提示，
+			tooltipDisabled: {
+				type: Boolean,
+				default: false,
+			},
+		},
+		data() {
+			return {
+				internalColumns: deepClone(this.columns).filter(d => d && !d.isHidden),
+				sortVal: '', // 排序
+				isShow: true,
+				isTable: true,
+				virtualList: [],
+			}
+		},
+		watch: {
+			columns: {
+				deep: true,
+				handler() {
+					this.internalColumns = deepClone(this.columns).filter(d => d && !d.isHidden);
+				}
+			},
+		},
+		methods: {
+			// 下拉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)
+				}
+			},
+			selectChange(selection, row){
+				this.$emit('handleChecked', selection, row);
+			},
+			selectAll(selection){
+				this.$emit('selectAll', selection);
+			},
+			toggleSelection(rows, selected = true) {
+        if (rows) {
+          rows.forEach(row => {
+            this.$refs[this.tabelRef].toggleRowSelection(row, selected);
+          });
+        } else {
+          this.$refs[this.tabelRef].clearSelection();
+        }
+      },
+			// 翻页
+			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.selection) {
+					!!this.operation ? sums.push('') : sums.push('合计')
+				} 
+				_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)
+						}
+					}
+				});
+				return sums;
+			},
+			// 行点击
+			rowClick(row, column, event) {
+				this.$emit('rowClick', row, column, event)
+			},
+			filterChange(filters) {
+				let data = deepClone(this.tableData)
+				// 判断是哪一列筛选
+				if (filters.name) {
+					data.name = filters.name[0]
+				}
+				this.$emit('update:tableData', data)
+			},
+			//过滤
+			filterHandler(value, row, column) {
+				const property = column['property'];
+				return row[property] === value;
+			},
+			// class
+			tableRowClassName({ row, rowIndex }) {
+				if (this.option.rowClassName) {
+					return this.option.rowClassName({ row, rowIndex })
+				}else return ''
+			},
+			handButton(functionName, scope, id) {
+				this.$emit(functionName, scope, id)
+			},
+			doLayout() {
+				this.$refs[this.tabelRef] && this.$refs[this.tabelRef].doLayout();
+			},
+			/* 当拖动表头改变了列的宽度的时候会触发该事件 */
+			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);
+			},
+			sortChange(val){
+				if(val.column.sortable === 'custom') this.$emit('sortChange', val);
+			},
+		},
+	}
+</script>