kh-one-ui 2.0.0

package/packages/one-table/src/index.js

@@ -0,0 +1,1087 @@
+import OneSearchForm from '../../one-search-form/src/index.vue';
+import OneRequest from '../../../src/lib/onerequest.js';
+import OneButton from '../../one-button/src/index.vue';
+import OneTool from '../../../src/lib/onetool.js';
+
+import TableTree from './table-tree/index.vue'
+import TableImg from './table-img/index.vue'
+import TableImgId from './table-img-id/index.vue'
+import TableOpt from './table-opt/index.vue'
+import TableEdit from './table-edit/index.vue'
+import TableList from './table-list/index.vue'
+
+export default {
+	name: "OneTable",
+	props: {
+		readonly: {
+			type: Boolean,
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		////////////////////////搜索区域配置////////////////////////
+		//搜索全局配置
+		searchAreaGlobalConfig: {
+			type: Object,
+			default: () => ({}),
+		},
+		//搜索配置
+		searchAreaConfig: {
+			type: Array,
+			default: () => ([]),
+		},
+		//搜索动态配置
+		searchAreaDynamicConfig: {
+			type: Object,
+			default: () => ({}),
+		},
+		//搜索字段模型
+		searchAreaModel: {
+			type: Object,
+			default: () => ({}),
+		},
+		//搜索区域不显示字段
+		searchNoVisileField: {
+			type: Array,
+			default: () => ([]),
+		},
+		//搜索
+		searchAreaSearch: {
+			type: Function,
+			default: null
+		},
+		//重置
+		searchAreaReset: {
+			type: Function,
+			default: null
+		},
+		//点击事件
+		searchAreaClick: {
+			type: Function,
+			default: null
+		},
+		//////////////////////////按钮区域////////////////////////
+		//配置
+		buttonAreaGlobalConfig: {
+			type: Object,
+			default: () => ({}),
+		},
+		//配置
+		buttonAreaConfig: {
+			type: Array,
+			default: () => ([]),
+		},
+		//事件
+		buttonAreaClick: {
+			type: Function,
+			default: null
+		},
+		//////////////////////////表格区域配置////////////////////////
+		//表格数据
+		tableListData: {
+			type: Array,
+			default: () => ([]),
+		},
+		//全局配置
+		tableAreaConfigGlobal: {
+			type: Object,
+			default: () => ({}),
+		},
+		//列表请求action
+		tableAreaConfigAction: {
+			type: [String, Object],
+			required: false
+		},
+		//是否有多选框
+		tableAreaConfigSelection: {
+			type: Boolean,
+			default: true
+		},
+		//表格类型
+		tableAreaConfigType: {
+			type: String,
+			default: 'normal'
+		},
+		//主键
+		tableAreaConfigPrimaryKey: {
+			type: String,
+			required: false
+		},
+		//列配置
+		tableAreaConfigColModel: {
+			type: Array,
+			default: () => ([]),
+		},
+		//格式化函数
+		tableAreaConfigTableFormatter: {
+			type: Function,
+			default: null
+		},
+		//格式化函数
+		tableAreaConfigTableCellDisabled: {
+			type: Function,
+			default: null
+		},
+		//仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选
+		tableAreaConfigSelectable: {
+			type: Function,
+			default: null
+		},
+		//操作列操作项是否显示
+		tableAreaConfigOptVisible: {
+			type: Function,
+			default: null
+		},
+		//操作列点击事件
+		tableAreaConfigOptClick: {
+			type: Function,
+			default: null
+		},
+		//请求表格数据前的事件
+		tableAreaConfigBeforeLoad: {
+			type: Function,
+			default: null
+		},
+		//自定义的合计计算方法
+		tableAreaConfigSummaryMethod: {
+			type: Function,
+			default: null
+		},
+	},
+	model: {
+		prop: 'tableListData',
+		event: 'tableChange'
+	},
+	data() {
+		return {
+			//表格数据
+			tableAreaTableData: {
+				//排序字段
+				sortField: null,
+				//排序方式
+				sortType: null,
+				//起始位置
+				start: 0,
+				//获取条数
+				size: 20,
+				//总记录数
+				records: 0,
+				//总页数
+				total: 0,
+				//当前页数
+				page: 1,
+				//数据
+				list: [],
+				//选中数据
+				selectData: [],
+				//操作列显示隐藏配置,key ： 主键-按钮id
+				optNoVisible: []
+			},
+		}
+	},
+	components: {
+		//筛选组件
+		OneSearchForm,
+		//按钮
+		OneButton,
+		TableTree,
+		TableImg,
+		TableImgId,
+		TableOpt,
+		TableEdit,
+		TableList,
+	},
+	created() {},
+	mounted() {
+		this.setListData(this.tableListData || []);
+
+		if (this.getConfigValue('autoLoadPage', false)) {
+			this.loadPage();
+		}
+	},
+	computed: {
+		/**
+		 * 搜索区域的插槽
+		 */
+		searchAreaSlotList() {
+			let outList = [];
+			(this.searchAreaConfig || []).forEach(item => {
+				if (item.widget == 'slot') {
+					outList.push(item);
+				}
+			});
+
+			return outList;
+		},
+		/**
+		 * 搜索区域的插槽
+		 */
+		searchAreaBESlotList() {
+			let outList = [];
+			(this.searchAreaConfig || []).forEach(item => {
+				outList.push({
+					...item,
+					slotBeforeName: item.field + '_before',
+					slotEndName: item.field + '_end',
+				});
+			});
+
+			return outList;
+		},
+		/**
+		 * 按钮是否显示
+		 */
+		btnShow() {
+			return function(item) {
+				let btnNoShowList = (this.buttonAreaGlobalConfig || {}).btnNoShowList || [];
+
+				if (!btnNoShowList || !Array.isArray(btnNoShowList) || btnNoShowList.length <= 0) {
+					return true;
+				}
+				if (btnNoShowList.indexOf(item.id) >= 0) {
+					return false;
+				}
+
+				return true;
+			}
+		},
+		//获取表格数据
+		getTableList() {
+
+			if (!this.tableAreaTableData || !this.tableAreaTableData.list || !Array.isArray(this.tableAreaTableData
+					.list)) {
+				return [];
+			}
+
+			return this.tableAreaTableData.list;
+		},
+		//树表是否展开
+		getDefaultExpandAll() {
+			if ((this.getTableAreaConfigType() == 'tree' || this.getTableAreaConfigType() == 'treePage') && this
+				.tableAreaTableData
+				.list && this.tableAreaTableData.list.length > 0) {
+				let defaultExpandAll = this.getConfigValue('defaultExpandAll', false);
+
+				return defaultExpandAll;
+			}
+
+			return false;
+		},
+		/**
+		 * 列是否显示
+		 */
+		colShow() {
+			return function(item) {
+				let colNoShowList = this.getConfigValue('colNoShowList', []);
+
+				if (!colNoShowList || !Array.isArray(colNoShowList) || colNoShowList.length <= 0) {
+					return true;
+				}
+				if (colNoShowList.indexOf(item.prop) >= 0) {
+					return false;
+				}
+
+				return true;
+			}
+		}
+	},
+	watch: {
+		//表格绑定数据改变
+		'tableListData': {
+			handler(val, oldVal) {
+				this.setListData(val || []);
+			},
+			deep: true
+		},
+		'tableAreaTableData.list': {
+			handler(val, oldVal) {
+				this.$emit('table-change', val);
+			},
+			deep: true
+		}
+	},
+	methods: {
+		/******************搜索区域************************************/
+		//搜索全局配置
+		getSearchAreaGlobalConfig() {
+			let config = this.searchAreaGlobalConfig;
+
+			if (!config) {
+				config = {};
+			}
+			config.selectChange = this.selectChange;
+			config.selectTreeChange = this.selectTreeChange;
+
+			return config;
+		},
+		selectChange(field, selVal) {
+			if (this.getConfigValue('searchModelChangeAutoLoad', true)) {
+				this.resetTable();
+				this.loadPage();
+			}
+
+		},
+		selectTreeChange(field, val, node) {
+			if (this.getConfigValue('searchModelChangeAutoLoad', true)) {
+				this.resetTable();
+				this.loadPage();
+			}
+		},
+		handlerCascader(field, val) {
+			if (this.getConfigValue('searchModelChangeAutoLoad', true)) {
+				this.resetTable();
+				this.loadPage();
+			}
+			this.$emit('search-area-cascader', field, val)
+		},
+		handlerSearchAreaBtnClick(btnId) {
+			this.$emit('search-area-btn-click', btnId)
+		},
+		/********************按钮区域**********************************/
+		//按钮区域点击事件
+		btnClick(id) {
+			if (typeof(this.buttonAreaClick) == 'function') {
+				this.buttonAreaClick(id);
+			}
+			//TODO 一定版本后废弃
+			this.$emit('buttonAreaClick', id);
+			this.$emit('button-area-click', id);
+		},
+		/********************表格区域**********************************/
+		/**
+		 * 获取行key
+		 */
+		getTableAreaConfigPrimaryKey() {
+			return this.getConfigValue('rowKey', this.tableAreaConfigPrimaryKey);
+		},
+		//获取表格类型
+		getTableAreaConfigType() {
+			let type = this.getConfigValue('tableType', null);
+
+			if (type) {
+				return type;
+			}
+			if (this.tableAreaConfigType) {
+				return this.tableAreaConfigType;
+			}
+
+			return 'normal';
+		},
+		//重置表格数据
+		resetTable() {
+			var that = this;
+
+			//起始位置
+			that.tableAreaTableData.start = 0;
+			// //获取条数
+			// that.tableAreaTableData.size = 20;
+			//总记录数
+			that.tableAreaTableData.records = 0;
+			//总页数
+			that.tableAreaTableData.total = 0;
+			//当前页数
+			that.tableAreaTableData.page = 1;
+			//数据
+			that.tableAreaTableData.list = [];
+			//选中数据
+			that.tableAreaTableData.selectData = [];
+		},
+		//获取列表请求地址
+		getTableAreaConfigAction() {
+			let tableAreaConfigAction = this.getConfigValue('tableAreaConfigAction', null);
+
+			if (tableAreaConfigAction) {
+				return tableAreaConfigAction;
+			}
+
+			return this.tableAreaConfigAction;
+		},
+		//加载列表数据
+		loadPage(showLoading, showNotice) {
+			this.reloadPage(false, showLoading, showNotice)
+		},
+		//加载列表数据
+		reloadPage(isReload, showLoading, showNotice) {
+			var that = this;
+
+			if (isReload) {
+				that.resetTable();
+			}
+			if (typeof(that.tableAreaConfigBeforeLoad) == 'function') {
+				that.tableAreaConfigBeforeLoad();
+			}
+			this.$emit('table-before-load');
+			let tableAreaConfigAction = that.getTableAreaConfigAction();
+
+			if (!tableAreaConfigAction || tableAreaConfigAction === '') {
+				return;
+			}
+			var data = that.searchAreaModel;
+
+			if (!data) {
+				data = {};
+			}
+			//排序字段
+			data.sortField = that.tableAreaTableData.sortField;
+			//排序方式
+			data.sortType = that.tableAreaTableData.sortType;
+			//起始位置
+			data.start = that.tableAreaTableData.start;
+			//获取条数
+			data.size = that.tableAreaTableData.size;
+
+			return new Promise((resolve, reject) => {
+				OneRequest({
+					url: tableAreaConfigAction,
+					method: 'post',
+					data: data,
+					showLoading: showLoading,
+					showNotice: showNotice
+				}).then(body => {
+					let list = [];
+
+					if (that.getTableAreaConfigType() == 'tree') {
+						//数据
+						list = that.getTreeLevel(body);
+					} else if (that.getTableAreaConfigType() == 'treePage') {
+						//起始位置
+						that.tableAreaTableData.start = parseInt(body.start);
+						//获取条数
+						that.tableAreaTableData.size = parseInt(body.size);
+						//总记录数
+						that.tableAreaTableData.records = parseInt(body.records);
+						//总页数
+						that.tableAreaTableData.total = parseInt(body.total);
+						//当前页数
+						that.tableAreaTableData.page = parseInt(body.page);
+						//数据
+						list = that.getTreeLevel(body.list);
+					} else if (that.showPagination()) { //显示分页
+						//起始位置
+						that.tableAreaTableData.start = parseInt(body.start);
+						//获取条数
+						that.tableAreaTableData.size = parseInt(body.size);
+						//总记录数
+						that.tableAreaTableData.records = parseInt(body.records);
+						//总页数
+						that.tableAreaTableData.total = parseInt(body.total);
+						//当前页数
+						that.tableAreaTableData.page = parseInt(body.page);
+						//数据
+						list = body.list;
+					} else { //不显示分页
+						//起始位置
+						that.tableAreaTableData.start = 0;
+						//获取条数
+						that.tableAreaTableData.size = body.length;
+						//总记录数
+						that.tableAreaTableData.records = body.length;
+						//总页数
+						that.tableAreaTableData.total = 1;
+						//当前页数
+						that.tableAreaTableData.page = 1;
+						//数据
+						list = body;
+					}
+					that.tableAreaTableData.list = (!list || list.length <= 0) ? [] : list;
+					this.$emit('table-load-finish');
+				}).catch(error => {
+					reject(error)
+					that.tableAreaTableData.list = [];
+				});
+			});
+		},
+		//改变每页数目
+		handleSizeChange(val) {
+			this.tableAreaTableData.size = val;
+			this.loadPage();
+			this.$emit('handleSizeChange', this.tableAreaTableData.size);
+		},
+		//改变页码
+		handleCurrentChange(val) {
+			this.tableAreaTableData.start = this.tableAreaTableData.size * (val - 1);
+			this.loadPage();
+			this.$emit('handleCurrentChange', this.tableAreaTableData.start);
+		},
+		//获取是否支持排序
+		getSortable(column) {
+			let sortable = this.getValue(column, 'sortable', undefined);
+
+			if (sortable != undefined) {
+				return sortable;
+			}
+			sortable = this.getConfigValue('sortable', true);;
+
+			if (sortable == undefined || sortable) {
+				return 'custom';
+			}
+
+			return false;
+		},
+		//表格单元格式化
+		tableFormatter(row, column, cellValue, index) {
+
+			if (typeof(this.tableAreaConfigTableFormatter) == 'function') {
+				return this.tableAreaConfigTableFormatter(row, column, cellValue, index);
+			} else {
+				return cellValue;
+			}
+		},
+		//表格单元格式化
+		tableCellDisabled(row, column, cellValue, index) {
+
+			if (typeof(this.tableAreaConfigTableCellDisabled) == 'function') {
+				return this.tableAreaConfigTableCellDisabled(row, column, cellValue, index);
+			} else {
+				return false;
+			}
+		},
+		//获取选中的数据
+		getSelectData(minRowNum, maxRowNum) {
+			var that = this;
+			var msg = "";
+			var needBack = false;
+
+			if (!this.tableAreaTableData.selectData) {
+				msg = "还没有选中数据！";
+				needBack = true;
+			} else if (minRowNum && minRowNum > 0 && this.tableAreaTableData.selectData.length < minRowNum) {
+				msg = '至少需要选中' + minRowNum + '行';
+				needBack = true;
+			} else if (maxRowNum && maxRowNum > 0 && this.tableAreaTableData.selectData.length > minRowNum) {
+				msg = '最多只能选择' + minRowNum + '行';
+				needBack = true;
+			}
+
+			if (needBack) {
+				that.$message.error(msg);
+				return [];
+			}
+
+			return this.tableAreaTableData.selectData;
+		},
+		//获取选中的数据
+		getSelectId(minRowNum, maxRowNum) {
+			var that = this;
+			var msg = "";
+			var needBack = false;
+
+			if (!this.tableAreaTableData.selectData) {
+				msg = "还没有选中数据！";
+				needBack = true;
+			} else if (minRowNum && minRowNum > 0 && this.tableAreaTableData.selectData.length < minRowNum) {
+				msg = '至少需要选中' + minRowNum + '行';
+				needBack = true;
+			} else if (maxRowNum && maxRowNum > 0 && this.tableAreaTableData.selectData.length > minRowNum) {
+				msg = '最多只能选择' + minRowNum + '行';
+				needBack = true;
+			}
+
+			if (needBack) {
+				that.$message.error(msg);
+				return [];
+			}
+			var idList = [];
+
+			for (var i in this.tableAreaTableData.selectData) {
+				var item = this.tableAreaTableData.selectData[i];
+				let id = item[this.getTableAreaConfigPrimaryKey()];
+
+				if (id || id == 0 || id == 0) {
+					idList.push(id);
+				}
+			}
+
+			return idList;
+		},
+		//获取操作项是否显示
+		getOptVisible(row, optId, index) {
+
+			if (typeof(this.tableAreaConfigOptVisible) == 'function') {
+				return this.tableAreaConfigOptVisible(row, optId, index);
+			}
+
+			return true;
+		},
+		//仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选
+		selectable(row, index) {
+
+			if (typeof(this.tableAreaConfigSelectable) == 'function') {
+				return this.tableAreaConfigSelectable(row, index);
+			}
+
+			return true;
+		},
+		//操作列点击事件
+		optClick(optId, row, index) {
+
+			if (typeof(this.tableAreaConfigOptClick) == 'function') {
+				this.tableAreaConfigOptClick(optId, row, index);
+			}
+			this.$emit('table-area-config-opt-click', optId, row, index);
+		},
+		//树表层级
+		getTreeLevel(body) {
+
+			if (!body || body.length <= 0) {
+				return null;
+			}
+			let out = [];
+			body.forEach(item => {
+				item.hasChildren = this.lazy();
+				item.children = this.getTreeLevel(item.children);
+
+				if (!item.children && item.hasChildren) {
+					item.hasChildren = [];
+				}
+				out.push(item);
+			})
+			return out;
+		},
+		/******************************************************************/
+		//设置数据
+		setListData(list) {
+
+			var that = this;
+			list = !list ? [] : list;
+
+			if (that.getTableAreaConfigType() == 'tree') {
+				//数据
+				that.tableAreaTableData.list = that.getTreeLevel(list);
+			} else {
+				//总记录数
+				that.tableAreaTableData.records = list.length;
+				//总页数
+				that.tableAreaTableData.total = parseInt(that.tableAreaTableData.records.length / that
+					.tableAreaTableData.size);
+
+				if (that.tableAreaTableData.total * that.tableAreaTableData.size < that.tableAreaTableData.records
+					.length) {
+					that.tableAreaTableData.total++;
+				}
+				//数据
+				that.tableAreaTableData.list = list || [];
+
+				let selectData = that.tableAreaTableData.selectData || [];
+				let selectIdList = [];
+
+				selectData.forEach(item => {
+					selectIdList.push(item[this.getTableAreaConfigPrimaryKey()]);
+				});
+				selectData = [];
+
+				if (selectIdList && selectIdList.length > 0) {
+					that.tableAreaTableData.list.forEach(item => {
+						let key = item[this.getTableAreaConfigPrimaryKey()];
+
+						if ((key || key == 0 || key == '0') && selectIdList.indexOf(key) >= 0) {
+							selectData.push(item);
+						}
+					})
+				}
+				//选中数据
+				that.tableAreaTableData.selectData = selectData;
+			}
+		},
+		//添加一行
+		addRow(row) {
+			if (!row) {
+				return;
+			}
+			let that = this;
+
+			that.tableAreaTableData.list.push(row);
+			//总记录数
+			that.tableAreaTableData.records++;
+			//总页数
+			let total = parseInt(that.tableAreaTableData.records.length / that.tableAreaTableData.size);
+
+			if (total * that.tableAreaTableData.size < that.tableAreaTableData.records.length) {
+				total++;
+			}
+			that.tableAreaTableData.total = total;
+		},
+		//删除一行
+		deleteRow(row) {
+			if (!row) {
+				return;
+			}
+			let that = this;
+
+			if (!that.tableAreaTableData.list || that.tableAreaTableData.list.length <= 0) {
+				return;
+			}
+			let index = that.tableAreaTableData.list.indexOf(row);
+
+			if (index >= 0) {
+				that.tableAreaTableData.list.splice(index, 1);
+			}
+		},
+		//更新一行
+		updateRow(row) {
+			if (!row) {
+				return;
+			}
+			let that = this;
+
+			if (!that.tableAreaTableData.list || that.tableAreaTableData.list.length <= 0) {
+				return;
+			}
+			let index = null;
+
+			for (let i in that.tableAreaTableData.list) {
+				let item = that.tableAreaTableData.list[i];
+
+				if (item[that.getTableAreaConfigPrimaryKey()] === row[that.getTableAreaConfigPrimaryKey()]) {
+					index = i;
+					break;
+				}
+			}
+			if (index != null) {
+				that.tableAreaTableData.list.splice(index, 1, row);
+			}
+		},
+		//获取数据
+		getAllRow() {
+			return this.tableAreaTableData.list;
+		},
+		/******************************************************************/
+		//搜索
+		search() {
+			if (!this.searchAreaSearch || !this.searchAreaSearch()) {
+				this.tableAreaTableData.start = 0;
+				this.loadPage();
+			}
+		},
+		//搜索重置
+		searchReset() {
+
+			if (!this.searchAreaReset || !this.searchAreaReset()) {
+				for (let i in this.searchAreaModel) {
+					if (this.searchAreaModel[i] instanceof Array) {
+						this.searchAreaModel[i] = [];
+					} else {
+						this.searchAreaModel[i] = null;
+					}
+				}
+				this.resetTable();
+				this.loadPage();
+			}
+		},
+		//设置排序（设置后需要调用loadPage）
+		setSort(sortField, sortOrder) {
+			//排序字段
+			this.tableAreaTableData.sortField = sortField;
+			//排序方式
+			this.tableAreaTableData.sortType = sortOrder;
+
+		},
+		//设置分页信息（设置后需要调用loadPage）
+		setStartSize(start, size) {
+			//起始位置
+			this.tableAreaTableData.start = start;
+			//获取条数
+			this.tableAreaTableData.size = size;
+		},
+		/**********************分页************************************************/
+		//加载配置
+		getConfigValue(key, defaultVal) {
+			if (!this.tableAreaConfigGlobal) {
+				return defaultVal;
+			}
+			if (!this.tableAreaConfigGlobal.hasOwnProperty(key)) {
+				return defaultVal;
+			}
+
+			return this.tableAreaConfigGlobal[key];
+		},
+		indexMethod(index) {
+			let pageFromOne = this.getConfigValue('pageFromOne', false);
+
+			if (pageFromOne) {
+				return index + 1;
+			} else {
+				return this.tableAreaTableData.start + index + 1;
+			}
+		},
+		//是否显示分页
+		showPagination() {
+			if (this.getTableAreaConfigType() == 'tree') { //树表不要分页
+				return false;
+			}
+			let hidePagination = this.getConfigValue('hidePagination', false);
+
+			if (hidePagination) { //隐藏分页
+				return false;
+			}
+
+			return true;
+		},
+		//是否懒加载
+		lazy() {
+			let lazy = this.getConfigValue('lazy', false);
+			let lazyParamKey = this.getConfigValue('lazyParamKey', null);
+
+			if (lazy && lazyParamKey && lazyParamKey != '') { //懒加载
+				return true;
+			}
+
+			return false;
+		},
+		//树表加载子项
+		loadChildren(tree, treeNode, resolve) {
+			let that = this;
+			let param = {};
+			let lazyParamKey = that.getConfigValue('lazyParamKey', null);
+
+			if (lazyParamKey && lazyParamKey != '') {
+				param[lazyParamKey] = treeNode.rowKey;
+			}
+			let lazyParam = that.getConfigValue('lazyParam', null);
+
+			if (lazyParam) {
+				for (let i in lazyParam) {
+					param[i] = that.tableAreaConfigGlobal.lazyParam[i];
+				}
+			}
+			let tableAreaConfigAction = that.getTableAreaConfigAction();
+
+			OneRequest({
+				url: tableAreaConfigAction,
+				method: 'post',
+				data: param
+			}).then(body => {
+				if (!body || body.length <= 0) {
+					tree.hasChildren = false;
+					tree.children = null;
+					treeNode.hasChildren = false;
+					resolve(null);
+				} else {
+					resolve(that.getTreeLevel(body));
+				}
+			}).catch(error => {});
+		},
+		/************************************************/
+		//自定义的合计计算方法
+		summaryMethod(param) {
+
+			if (typeof(this.tableAreaConfigSummaryMethod) == 'function') {
+				return this.tableAreaConfigSummaryMethod(param);
+			}
+		},
+		//单元格的 className 的回调方法，也可以使用字符串为所有单元格设置一个固定的 className。
+		cellClassName(param) {
+
+			let cellClassName = this.getConfigValue('cellClassName', null);
+
+			if (cellClassName) {
+				return cellClassName(param)
+			}
+		},
+		//单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有单元格设置一样的 Style。
+		cellStyle() {
+
+			let cellStyle = this.getConfigValue('cellStyle', null);
+
+			if (cellStyle) {
+				return cellStyle(param)
+			}
+		},
+		/************************************************/
+		//获取select、radio、checkox的配置值
+		getOptionsValue(prop, key) {
+			switch (key) {
+				case 'id':
+					if (!prop || !prop.id) {
+						return 'id';
+					}
+
+					return prop.id;
+				case 'name':
+					if (!prop || !prop.name) {
+						return 'name';
+					}
+
+					return prop.name;
+				default:
+					return '';
+			}
+		},
+		/************************************************/
+		//用于多选表格，清空用户的选择
+		clearSelection() {
+			this.$refs.refTable.clearSelection();
+		},
+		//用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）
+		toggleRowSelection(row, selected) {
+			this.tableAreaTableData.selectData = this.tableAreaTableData.selectData || [];
+
+			if (Array.isArray(row)) {
+				row.forEach(item => {
+					let index = this.tableAreaTableData.selectData.indexOf(item);
+
+					if (index >= 0 && !selected) {
+						this.tableAreaTableData.selectData.splice(index, 1);
+					} else if (selected && index < 0) {
+						this.tableAreaTableData.selectData.push(item);
+					}
+					this.$refs.refTable.toggleRowSelection(item, selected);
+				});
+			} else {
+				let index = this.tableAreaTableData.selectData.indexOf(row);
+
+				if (index >= 0 && !selected) {
+					this.tableAreaTableData.selectData.splice(index, 1);
+				} else if (selected && index < 0) {
+					this.tableAreaTableData.selectData.push(row);
+				}
+				this.$refs.refTable.toggleRowSelection(row, selected);
+			}
+		},
+		//用于多选表格，切换所有行的选中状态
+		toggleAllSelection() {
+			this.$refs.refTable.toggleAllSelection();
+		},
+		//用于可展开表格，切换某一行的展开状态，如果使用了第二个参数，则是设置这一行展开与否（expanded 为 true 则展开）
+		toggleRowExpansion(row, expanded) {
+			if (Array.isArray(row)) {
+				for (let i in row) {
+					this.$refs.refTable.toggleRowExpansion(row[i], selected);
+				}
+			} else {
+				this.$refs.refTable.toggleRowExpansion(row, expanded);
+			}
+		},
+		/************************************************/
+		//获取值
+		getValue(item, key, defVal) {
+
+			return OneTool.getValue(item, key, defVal);
+		},
+		//是否单行显示
+		showOverflowTooltip(item) {
+
+			let isShow = this.getValue(item, 'showOverflowTooltip', undefined);
+
+			if (isShow != undefined) {
+				return isShow ? true : false;
+			}
+
+			isShow = this.getConfigValue('showOverflowTooltip', true);
+
+			return isShow ? true : false;
+		},
+		//文本输入框点击事件
+		inputClick(item, row) {
+			if (item && typeof item.click === 'function') {
+				item.click(item.field, row);
+			}
+		},
+		//获取card样式
+		getCardClass() {
+			let cardClass = this.getConfigValue('cardClass', '');
+
+			if (this.getConfigValue('cardBorder', 'show') == 'none') {
+				cardClass += 'one-no-border';
+			}
+
+			return cardClass;
+		},
+		/************************************事件******************************************/
+		//当用户手动勾选数据行的 Checkbox 时触发的事件
+		select(selection, row) {
+			if (this.getConfigValue('singleSelect', false)) {
+				//单选
+				this.$refs.refTable.clearSelection();
+				this.$nextTick(() => {
+					this.$refs.refTable.toggleRowSelection(row, true);
+				})
+			}
+			this.tableAreaTableData.selectData = selection;
+			this.$emit('select', selection, row);
+		},
+		//当用户手动勾选全选 Checkbox 时触发的事件
+		selectAll(selection) {
+			if (this.getConfigValue('singleSelect', false)) {
+				//单选
+				this.$refs.refTable.clearSelection();
+
+				if (selection && selection.length > 0) {
+					this.$refs.refTable.toggleRowSelection(selection[0], true);
+					selection = [selection[0]];
+				} else {
+					selection = [];
+				}
+			}
+			this.tableAreaTableData.selectData = selection;
+			this.$emit('select-all', selection);
+		},
+		//当选择项发生变化时会触发该事件
+		selectionChange(selection) {
+			this.tableAreaTableData.selectData = selection;
+
+			this.$emit('selection-change', selection);
+		},
+		//当单元格 hover 进入时会触发该事件
+		cellMouseEnter(row, column, cell, event) {
+			this.$emit('cell-mouse-enter', row, column, cell, event);
+		},
+		//当单元格 hover 退出时会触发该事件
+		cellMouseLeave(row, column, cell, event) {
+			this.$emit('cell-mouse-leave', row, column, cell, event);
+		},
+		//当某个单元格被点击时会触发该事件
+		cellClick(row, column, cell, event) {
+			this.$emit('cell-click', row, column, cell, event);
+		},
+		//当某个单元格被双击击时会触发该事件
+		cellDblclick(row, column, cell, event) {
+			this.$emit('cell-dblclick', row, column, cell, event);
+		},
+		//当某一行被点击时会触发该事件
+		rowClick(row, column, event) {
+			this.$emit('row-click', row, column, event);
+		},
+		//当某一行被鼠标右键点击时会触发该事件
+		rowContextmenu(row, column, event) {
+			this.$emit('row-contextmenu', row, column, event);
+		},
+		//当某一行被双击时会触发该事件
+		rowDblclick(row, column, event) {
+			this.$emit('row-dblclick', row, column, event);
+		},
+		//当某一列的表头被点击时会触发该事件
+		headerClick(column, event) {
+			this.$emit('header-click', column, event);
+		},
+		//当某一列的表头被鼠标右键点击时触发该事件
+		headerContextmenu(column, event) {
+			this.$emit('header-contextmenu', column, event);
+		},
+		//当表格的排序条件发生变化的时候会触发该事件
+		sortChange(column) {
+			var prop = column.prop;
+			var order = column.order;
+			var sortType = null;
+			var sortField = prop;
+
+			if ('ascending' === order) {
+				sortType = 'ASC';
+			} else if ('descending' === order) {
+				sortType = 'DESC';
+			} else {
+				sortField = null;
+				sortType = null;
+			}
+			//排序字段
+			this.tableAreaTableData.sortField = sortType ? prop : null;
+			//排序方式
+			this.tableAreaTableData.sortType = sortType;
+			this.loadPage();
+
+			this.$emit('sort-change', column);
+		},
+	}
+}