shu-c-view
Version:
rollup 打包vue@2.7组件库框架
1,070 lines (1,067 loc) • 33.7 kB
JavaScript
/**
* Table 表格组件
*/
import _map from 'lodash/map';
import _forEach from 'lodash/forEach';
import _has from 'lodash/has';
import _isEmpty from 'lodash/isEmpty';
import _assign from 'lodash/assign';
import _get from 'lodash/get';
import _set from 'lodash/set';
import _isNil from 'lodash/isNil';
import _filter from 'lodash/filter';
import _some from 'lodash/some';
import _omit from 'lodash/omit';
import _find from 'lodash/find';
import _isArray from 'lodash/isArray';
import _pick from 'lodash/pick';
import _includes from 'lodash/includes';
import _isFunction from 'lodash/isFunction';
import _isString from 'lodash/isString';
import _isEqual from 'lodash/isEqual';
import _cloneDeep from 'lodash/cloneDeep';
const BaseGridTable = {
name: 'BaseGridTable',
inject: ['getBaseGrid'],
props: {
api: {
type: String,
default: ''
},
queryParams: {
type: Object,
default() {
return {};
}
},
columns: {
type: Array,
default() {
return [];
}
},
// 是否多选
selectMode: {
type: Boolean,
default: false
},
// 是否显示 index 下标列
isShowIndex: {
type: Boolean,
default: false
},
// 设置index表头名称
indexLabel: {
type: String,
default: ''
},
// 默认选择第一行
isSelectedFirstRow: {
type: Boolean,
default: false
},
// 第一次载入时是否自动刷新列表数据
isReloadGrid: {
type: Boolean,
default: true
},
// Table Slot
slotNode: {
type: Object,
default() {
return {};
}
},
// Table Attributes
tableAttributes: {
type: Object,
default() {
return {};
}
},
// 过滤返回数据（该函数带一个参数'data'用来指向源数据）
loadFilter: {
type: Function
},
loadResponseFilter: {
type: Function
},
// 静态数据
options: {
type: Object
},
// 静态数据是否需要进行分页操作
isOptionsPage: {
type: Boolean,
default: true
},
// 自定义当前分页参数 {page: 'page',size: 'size',total: 'data.total',data: 'data.records',pageNum: 'current',pageSize: 'size'}
pagingParams: {
type: Object
},
// 是否冻结下标列
isFixedIndex: {
type: Boolean,
default: false
},
// 是否冻结多选框列
isFixedSelection: {
type: Boolean,
default: false
},
// 插槽操作列配置
columnTool: {
type: Object,
default() {
return {
label: '操作'
// fixed: 'right'
};
}
},
// 序号是否连续性
isContinuityIndex: {
type: Boolean,
default: false
},
// 多选最多能选中几个（isKeepSelectedRow 为true时也会被计算在选中的几个之内）
selectModeMaxNum: {
type: Number
},
// 推荐 id 作为唯一键（使用`isKeepSelectedRow`时需要设置）
nodeKey: {
type: String,
default: 'id'
},
// 要禁用选中复选款的行，需要设置 nodeKey
disabledSelectRows: {
type: Array,
default() {
return [];
}
},
// 固定的行-`rowIndex`行下标，第一行：0 第二行：1
// :fixed-row="0"
fixedRow: {
type: Number
},
// 分页参数定义类型-current和size
paginationParamType: {
type: String,
default: 'params',
validator: function(value) {
return ['params', 'data', 'headers'].includes(value);
}
}
},
data() {
this.curQueryParams = {};
// this.loading = null;
this.currentRows = []; // 当前选中行集
this.unwatch = null; // 静态数据观察函数
return {
loading: false,
currentRow: {}, // 当前选中行
tableData: [],
curApi: this.api,
curTableAttributes: {}
// key: 'base-grid__table-key'
};
},
computed: {
// 单选设置行选中
_highlightCurrentRow() {
return !this.selectMode;
},
optionsDataRecords() {
const resultsField = _get(
this['$base-global-options'],
'grid.data',
'data.results'
);
return _cloneDeep(
_map(_get(this, `options.${resultsField}`), record =>
_omit(record, ['original', 'rowRefs', 'edit'])
)
);
}
},
watch: {
// 更新选中行
currentRow(val) {
this.getBaseGrid.updateCurrentRow(val);
},
// 监测数据源
tableData(val) {
if (this.isSelectedFirstRow && !_isEmpty(val)) {
setTimeout(() => {
if (this.selectMode) {
if (!_isNil(this.$refs[`${this._uid}-base-table`])) {
this.$refs[`${this._uid}-base-table`].toggleRowSelection(
this.tableData[0]
);
}
} else {
this.currentRow = this.tableData[0];
if (!_isNil(this.$refs[`${this._uid}-base-table`])) {
this.$refs[`${this._uid}-base-table`].setCurrentRow(
this.tableData[0]
);
}
}
}, 0);
}
if (_isEmpty(val)) {
this.currentRow = {};
this.currentRows = [];
}
// 数据加载完成
this.getBaseGrid.onLoadSuccess(val);
},
api(val) {
if (val !== this.curApi) {
this.curApi = val;
// setTimeout(() => {
// this.getBaseGrid.reloadGrid();
// }, 0);
}
},
columns: {
handler(val, oldVal) {
if (val.length > 0 && oldVal.length === 0) {
if (_has(this.getBaseGrid.$scopedSlots, 'columnTool')) {
this.columns.push({
...this.columnTool,
slotNode: [
{
render: (h, row, column, index) => {
return this.getBaseGrid.$scopedSlots.columnTool(
row,
column,
index
);
}
}
]
});
}
}
// 如果列发生了改变那么重新生成外部table的key，重新生成el-table-column
// default-sort 配合 列的 hide 属性生效
// this.key = `roll-table-key${Math.floor(Math.random() * (100 - 1))}${1}`;
},
deep: true
},
optionsDataRecords: {
handler(val, oldVal) {
// console.log('val, oldVal: ', val, oldVal, _isEqual(val, oldVal));
if (!_isEqual(val, oldVal)) {
const pageNumField = _get(
this['$base-global-options'],
'grid.pageNum',
'pageNum'
);
const pageNum = _get(this.options.data, pageNumField, 1);
if (pageNum !== 1) {
this.getBaseGrid.currentPage = pageNum; // 不是第一页
}
this.$nextTick(this.loadOptions);
}
},
deep: true
}
},
created() {
this.curTableAttributes = _omit(this.tableAttributes, [
'rowClassName',
'row-class-name'
]);
if (_has(this.getBaseGrid.$scopedSlots, 'columnTool')) {
if (this.columns.length > 0) {
this.columns.push({
...this.columnTool,
slotNode: [
{
render: (h, row, column, index) => {
return this.getBaseGrid.$scopedSlots.columnTool({
row,
column,
index
});
}
}
]
});
}
}
// 动态设置监听器-监听静态数据
const resultsField = _get(
this['$base-global-options'],
'grid.data',
'data.results'
);
/* if (_has(this.options, resultsField)) {
this.unwatch = this.$watch(`options.${resultsField}`, function() {
const pageNumField = _get(
this['$base-global-options'],
'grid.pageNum',
'pageNum'
);
const pageNum = _get(this.options.data, pageNumField, 1);
if (pageNum !== 1) {
this.getBaseGrid.currentPage = pageNum; // 不是第一页
}
this.$nextTick(this.loadOptions);
});
} else {
this.$watch('options', function() {
this.loadOptions();
});
} */
if (_get(this.options, resultsField, []).length > 0) {
this.loadOptions(); // 初始加载数据
}
},
mounted() {
if (_has(this.getBaseGrid.$listeners, 'onBeforeLoad')) {
const result = this.getBaseGrid.$listeners.onBeforeLoad();
if (result !== false) {
this.init();
}
} else {
this.init();
}
this.getBaseGrid.setTableEl(this);
const resultsField = _get(
this['$base-global-options'],
'grid.data',
'data.results'
);
if (
!_isEmpty(this.options) &&
_get(this.options, resultsField, []).length > 0
) {
this.loading = true;
}
},
beforeDestroy() {
if (!_isNil(this.unwatch)) {
this.unwatch(); // 之后取消观察
this.unwatch = null;
}
},
methods: {
/**
* @desc 当某一行被双击时会触发该事件
* @event BaseGridTable#_rowDblclickEvent
* @param {Object} row - 行数据对象
* @param {Object} column - 列对象 例如：{label: "地址", id: "el-table_1_column_4", property: "address"}
* @param {*} event - 点击事件对象
*/
_rowDblclickEvent(row, column, event) {
if (_has(this.getBaseGrid.$listeners, 'row-dblclick')) {
this.getBaseGrid.$emit('row-dblclick', row, column, event);
} else {
// 其它可能需要扩展的逻辑
// 显示详情弹框
this.getBaseGrid.$emit('update:dialogVisible', true);
}
},
/**
* @desc 当选择项发生变化时会触发该事件
* @event BaseGridTable#_selectionChangeEvent
* @param {Array} selection - 勾选中的行集合
*/
_selectionChangeEvent(selection) {
this.currentRows = selection;
if (_has(this.getBaseGrid.$listeners, 'selection-change')) {
this.getBaseGrid.$emit('selection-change', selection);
}
},
/**
* @desc 当某一行被点击时会触发该事件
* @event BaseGridTable#_rowClickEvent
* @param {Object} row - 行数据对象
* @param {Object} column - 列对象 例如：{label: "地址", id: "el-table_1_column_4", property: "address"}
* @param {*} event - 点击事件对象
*/
_rowClickEvent(row, column, event) {
if (!this.selectMode) {
this.currentRow = row;
}
if (_has(this.getBaseGrid.$listeners, 'row-click')) {
this.getBaseGrid.$emit('row-click', row, column, event);
}
},
/**
* @desc 当用户手动勾选数据行的 Checkbox 时触发的事件（选中和取消选中都会触发）
*/
_select(selection, row) {
this.getBaseGrid.$emit('_select', selection, row); // base-grid 的 isKeepSelectedRow 使用的事件
this.getBaseGrid.$emit('select', selection, row);
},
/**
* @desc 当用户手动勾选全选 Checkbox 时触发的事件
*/
_selectAll(selection) {
this.getBaseGrid.$emit('_select-all', selection); // base-grid 的 isKeepSelectedRow 使用的事件
this.getBaseGrid.$emit('select-all', selection);
},
/**
* @desc 初始化
* @method
*/
init() {
this.isReloadGrid && this.loadData();
},
/**
* @desc 加载数据-远端
* @method
*/
loadData() {
if (!this.curApi) {
return;
}
if (!this.loading) {
this.loading = true;
}
let sPageNum = _get(
this['$base-global-options'],
'grid.pageNum',
'pageNum'
);
let sPageSize = _get(
this['$base-global-options'],
'grid.pageSize',
'pageSize'
);
const params = _assign(
{},
_omit(this.queryParams, ['data', 'headers']),
_omit(this.curQueryParams, ['data', 'headers'])
);
if (!_isNil(this.pagingParams)) {
sPageNum = _get(this.pagingParams, 'pageNum', 'pageNum');
sPageSize = _get(this.pagingParams, 'pageSize', 'pageSize');
}
if (this.paginationParamType === 'params') {
params[sPageNum] = this.getBaseGrid.currentPage;
params[sPageSize] = this.getBaseGrid.pageSize;
}
const data = _get(
_assign(
{},
_pick(this.queryParams, ['data']),
_pick(this.curQueryParams, ['data'])
),
'data',
{}
);
if (this.paginationParamType === 'data') {
data[sPageNum] = this.getBaseGrid.currentPage;
data[sPageSize] = this.getBaseGrid.pageSize;
}
const headers = _get(
_assign(
{},
_pick(this.queryParams, ['headers']),
_pick(this.curQueryParams, ['headers'])
),
'headers',
{}
);
this.$api[this.curApi]({
params,
data,
headers
})
.then(response => {
response = _isNil(this.loadResponseFilter)
? response
: this.loadResponseFilter(response);
let data = null;
if (!_isNil(this.pagingParams)) {
this.getBaseGrid.setTotal(
_get(response, _get(this.pagingParams, 'total', ''), 0)
);
data = _get(response, _get(this.pagingParams, 'data', ''), []);
} else {
this.getBaseGrid.setTotal(
_get(
response,
_get(this['$base-global-options'], 'grid.total', ''),
0
)
);
data = _get(
response,
_get(this['$base-global-options'], 'grid.data', ''),
[]
);
}
this.tableData = _isNil(this.loadFilter)
? data
: this.loadFilter(data);
return true;
})
.catch(error => {
this.getBaseGrid.onLoadError();
throw new Error(error);
})
.finally(() => {
// this.loading.close();
this.loading && (this.loading = false);
});
},
/**
* @desc 加载静态数据
*/
loadOptions() {
const response = _isNil(this.loadFilter)
? this.options
: this.loadFilter(this.options);
let data = null;
if (!_isNil(this.pagingParams)) {
this.getBaseGrid.setTotal(
_get(response, _get(this.pagingParams, 'total', ''), 0)
);
data = _get(response, _get(this.pagingParams, 'data', ''), []);
} else if (this.isOptionsPage) {
const resultsField = _get(
this['$base-global-options'],
'grid.data',
'data.results'
);
const totalField = _get(this['$base-global-options'], 'grid.total', '');
const currentPage = this.getBaseGrid.currentPage;
let pageSize = this.getBaseGrid.pageSize;
const totalNum = _get(response, totalField, 0);
if (pageSize === 0 && totalNum !== 0) {
pageSize = totalNum;
}
// 静态数据分页
this.getBaseGrid.setTotal(totalNum);
data = this.paginationHandle(
currentPage,
pageSize,
_get(response, resultsField, [])
);
} else {
data = _get(
response,
_get(this['$base-global-options'], 'grid.data', ''),
[]
);
}
this.tableData = data;
this.$nextTick(() => {
if (!_isEmpty(this.tableData)) {
this.loading = false;
}
});
},
/**
* @desc 数组分页-静态数据
* @param {Number} pageNo - 当前页
* @param {Number} pageSize - 一页显示多少条数据
* @param {Array} array - 数据
*/
paginationHandle(pageNo, pageSize, array) {
const offset = (pageNo - 1) * pageSize;
return offset + pageSize >= array.length
? array.slice(offset, array.length)
: array.slice(offset, offset + pageSize);
},
/**
* @desc 设置查询参数
* @param {Object} params
*/
setQueryParams(params = {}) {
this.curQueryParams = {};
return Object.assign(this.curQueryParams, params);
},
/**
* @desc 获取 el-table 组件
* @method
*/
getEl() {
return this.$refs[`${this._uid}-base-table`];
},
/**
* @desc 显示加载中遮罩
* @method
*/
loadMask() {
// this.loading = this.$loading({
// lock: true,
// target: this.$el
// });
},
/**
* @desc 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）
* @param {Array} field=[] - 行选中的配置数组对象
* @type {Object}
* @property {string} field='id' - 字段key
* @property {string} value - 字段值
* @property {Boolean} selected=true - 是否选中（未实现）
* @method
* @example
* // 选中数据data数组中键为id和值等于100的行
* toggleRowSelection([{field: 'id', value: '100', selected: true}])
*/
toggleRowSelection(rows = []) {
if (!this.selectMode) {
return;
}
const selectRows = _filter(this.tableData, item => {
return _some(rows, function(row) {
return item[row.field || 'id'] === row.value;
});
});
if (!_isEmpty(selectRows)) {
_forEach(selectRows, selectRow => {
this.$refs[`${this._uid}-base-table`].toggleRowSelection(selectRow);
});
/* for (const selectRow of selectRows.values()) {
this.$refs[`${this._uid}-base-table`].toggleRowSelection(selectRow)
} */
}
},
/**
* @desc 用于多选表格，切换所有行的选中状态
* @method
*/
toggleAllSelection() {
if (!this.selectMode) {
return;
}
this.$refs[`${this._uid}-base-table`].toggleAllSelection();
},
/**
* @desc 用于单选表格，设定某一行为选中行，如果调用时不加参数，则会取消目前高亮行的选中状态。
* @param {Object} row={} - 行选中的配置对象
* @type {Object}
* @property {string} field='id' - 字段key
* @property {string} value - 字段值
* @method
* @example
* setCurrentRow({ field: 'id', value: 2 })
*/
setCurrentRow(row = {}) {
if (this.selectMode) {
return;
}
if (_isEmpty(row)) {
this.$refs[`${this._uid}-base-table`].setCurrentRow();
return;
}
const selectRow = _find(this.tableData, item => {
return item[row.field || 'id'] === row.value;
});
if (!_isEmpty(selectRow)) {
if (this.selectMode) {
this.$refs[`${this._uid}-base-table`].toggleRowSelection(selectRow);
} else {
this.currentRow = selectRow;
this.$refs[`${this._uid}-base-table`].setCurrentRow(selectRow);
}
}
},
/**
* @desc 不传入参数时用于清空所有过滤条件，数据会恢复成未过滤的状态，也可传入由columnKey组成的数组以清除指定列的过滤条件
* @param {*} columnKey - columnKey组成的数组以清除指定列的过滤条件
* @method
* clearFilter('code') / clearFilter(['code'])
*/
clearFilter(columnKey) {
const keys = [];
if (!_isArray(columnKey)) {
keys.push(columnKey);
}
if (!_isEmpty(keys)) {
const table = this.$refs[`${this._uid}-base-table`];
for (let i = 0; i < keys.length; i += 1) {
table.clearFilter(keys[i]);
}
/* for (const elem of columnKey.values()) {
this.$refs[`${this._uid}-base-table`].clearFilter(elem)
} */
} else {
this.$refs[`${this._uid}-base-table`].clearFilter();
}
},
/**
* @desc 清空表单
* @method
*/
clearTable() {
this.tableData = [];
},
/**
* @desc 获取当前选中行
* @method
* @returns {Object}
*/
getSelectedRow() {
return this.currentRow;
},
/**
* @desc 获取当前选中行集
* @method
* @returns {Array}
*/
getSelectedRows() {
return this.currentRows;
},
// 构建列 el-table-column
tableColumnNodes(column) {
const columnNodes = [];
_forEach(column || this.columns, elem => {
if (_has(elem, 'hide') && elem.hide) {
// return this.$createElement(); // 列的隐藏
} else {
let filterMethod = null;
let columnKey = null;
const h = this.$createElement;
if (_has(elem, 'filters') && _has(elem, 'filter-method')) {
filterMethod = function(value, row, column) {
return elem['filter-method'](value, row, column);
};
}
if (_has(elem, 'filters') && !_has(elem, 'filter-method')) {
filterMethod = function(value, row, column) {
const property = column.property;
return row[property] === value;
};
}
if (
filterMethod !== null ||
_has(this.getBaseGrid.$listeners, 'filter-change')
) {
columnKey = elem.name;
}
// 多表头
const aMoreHeaderVNodeList = [];
if (_has(elem, 'children')) {
for (let n = 0, len = elem.children.length; n < len; n += 1) {
const children = elem.children[n];
const header = this.tableColumnNodes([children]); // 再次调用 `tableColumnNodes()` 方法构建出列
// const header = h('el-table-column', { props: children });
aMoreHeaderVNodeList.push(header);
}
}
const columnNode = this.$createElement(
'el-table-column',
{
props: _assign(
{},
_omit(elem, ['render', 'renderHeader', 'unit']),
{
'filter-method': filterMethod,
columnKey
}
),
key: `${_get(elem, 'prop', elem.label)}-${this._uid}`, // 增加key用于column动态修改，比如：hide属性的显示和隐藏
scopedSlots: {
default: ({ row, column, $index }) => {
// 自定义列的内容
if (_has(elem, 'renderSlotName')) {
if (_isNil(elem.showValue) || elem.showValue) {
return this.getBaseGrid.$scopedSlots[elem.renderSlotName](
{
row,
column,
index: $index
}
);
}
if (!_isNil(elem.showValue) && !elem.showValue) {
// 不显示列的值，但列存在 区别于 hide 属性
return undefined;
}
} else if (_has(elem, 'render')) {
let columnValue = row[column.property];
if (_has(elem, 'filter')) {
const dict = _find(this.$dict.get(elem.filter), item => {
return (
item.paramValue === row[column.property] ||
item.paramValue === `${row[column.property]}`
);
});
if (dict) {
columnValue = `${dict.paramDesc}${_get(
elem,
'unit',
''
)}`;
}
}
if (_isNil(elem.showValue) || elem.showValue) {
return elem.render(
this.$createElement,
row,
column,
$index,
columnValue
);
}
if (!_isNil(elem.showValue) && !elem.showValue) {
// 不显示列的值，但列存在 区别于 hide 属性
return undefined;
}
} else if (_has(elem, 'slotNode')) {
if (_isNil(elem.showValue) || elem.showValue) {
return _map(elem.slotNode, ({ render }) => {
return render(this.$createElement, row, column, $index);
});
}
if (!_isNil(elem.showValue) && !elem.showValue) {
return undefined;
}
} else if (_has(elem, 'buttons')) {
// 配置项
if (_isNil(elem.showValue) || elem.showValue) {
const buttonNodes = [];
for (let i = 0, len = elem.buttons.length; i < len; i++) {
const button = elem.buttons[i];
if (_has(button, 'render')) {
buttonNodes.push(
button.render(
this.$createElement,
row,
column,
$index
)
);
} else {
let name = _get(button, 'el', 'base-label');
if (!_includes(name, 'base')) {
name = `base-${name}`;
}
const node = this.$createElement(name, {
attrs: button.props,
class: button.class,
style: button.style,
props: button.props,
on: {
click: () => {
button.on.click(row, column, $index);
}
}
});
buttonNodes.push(node);
}
}
return buttonNodes;
}
if (!_isNil(elem.showValue) && !elem.showValue) {
return undefined;
}
} else {
if (_has(elem, 'filter')) {
const dict = _find(this.$dict.get(elem.filter), item => {
return (
item.paramValue === row[column.property] ||
item.paramValue === `${row[column.property]}`
);
});
if (dict) {
if (_isNil(elem.showValue) || elem.showValue) {
return `${dict.paramDesc}${_get(elem, 'unit', '')}`;
}
return undefined;
}
}
if (_isNil(row[column.property])) {
return '';
}
if (_isNil(elem.showValue) || elem.showValue) {
return `${row[column.property]}${_get(elem, 'unit', '')}`;
}
if (!_isNil(elem.showValue) && !elem.showValue) {
// 不显示列的值，但列存在 区别于 hide 属性
return undefined;
}
}
},
header: ({ column, $index }) => {
// 自定义表头的内容 不能和属性 `render-header`一起使用否则起效的是`render-header`
if (_has(elem, 'renderHeader')) {
return elem.renderHeader(
this.$createElement,
column,
$index
);
}
return column.label;
}
}
},
[
h('template', { slot: 'default' }, aMoreHeaderVNodeList) // 多表头的插槽
]
);
columnNodes.push(columnNode);
}
});
return columnNodes;
},
// Table Slot
appendNode() {
return _has(this.$props, 'slotNode.append')
? [this.$props.slotNode.append(this.$createElement)]
: [];
},
// Table Empty
appendEmptyNode() {
if (!_has(this.getBaseGrid.$slots, 'empty')) {
return [];
}
return this.getBaseGrid.$slots.empty;
},
// 多选 el-table-column
multipleSelectNode() {
if (!this.selectMode) {
if (!_isEmpty(this.getBaseGrid.curSelectValueList)) {
if (!_isEmpty(this.currentRows)) {
this.getBaseGrid.clearSelection();
}
this.getBaseGrid.curSelectValueList = [];
}
return this.$createElement();
}
return this.selectMode
? this.$createElement('el-table-column', {
props: {
type: 'selection',
width: '50px',
fixed: this.isFixedSelection,
// eslint-disable-next-line no-unused-vars
selectable: (row, index) => {
const rowId = row[this.nodeKey];
if (_includes(this.disabledSelectRows, rowId)) {
return false;
}
if (!_isNil(this.selectModeMaxNum)) {
const allSelectRowsNum = this.getBaseGrid.curSelectValueList
.length;
if (
allSelectRowsNum > this.selectModeMaxNum &&
!_includes(
this.getBaseGrid.curSelectValueList,
row[this.nodeKey]
)
) {
return false;
}
}
return true;
}
}
})
: [];
},
// 下标列
indexColumn() {
return this.isShowIndex
? this.$createElement('el-table-column', {
props: {
type: 'index',
width: '60px',
label: this.indexLabel,
fixed: this.isFixedIndex,
index: this.isContinuityIndex
? this.createContinuityIndex
: undefined
}
})
: [];
},
// 生成连续性的index
createContinuityIndex(index) {
return (
(this.getBaseGrid.currentPage - 1) * this.getBaseGrid.pageSize +
(index + 1)
);
}
},
render(h) {
// 绑定v-loading指令的元素上添加element-loading-text属性
const elementLoading = _pick(this.curTableAttributes, [
'element-loading-text',
'element-loading-spinner',
'element-loading-background',
'element-loading-custom-class'
]);
if (!_isNil(this.fixedRow)) {
// 固定的行
const { rowClassName } = this.tableAttributes;
if (_isFunction(rowClassName)) {
_set(this.curTableAttributes, 'rowClassName', ({ row, rowIndex }) => {
const rowCls = rowClassName({ row, rowIndex });
if (
this.fixedRow === rowIndex &&
!_includes(rowCls, 'baseGrid__fixed-row')
) {
return `baseGrid__fixed-row ${rowCls || ''}`;
}
return rowCls;
});
}
if (_isString(rowClassName) || _isNil(rowClassName)) {
const classFunc = ({ rowIndex }) => {
if (this.fixedRow === rowIndex) {
return `baseGrid__fixed-row ${rowClassName || ''}`;
}
return rowClassName;
};
_set(this.curTableAttributes, 'rowClassName', classFunc);
}
}
// return h('div', {}, ['表格内容']);
return h(
'el-table',
{
ref: `${this._uid}-base-table`,
class: _get(this.$props, 'ctCls', {}),
attrs: elementLoading,
props: _assign({ border: true }, this.curTableAttributes, {
height: _get(this.curTableAttributes, 'height', '100%'), // 实现固定表头的表格，数据可滚动
highlightCurrentRow: this._highlightCurrentRow,
data: this.tableData
}),
on: _assign(
{},
_omit(this.getBaseGrid.$listeners, [
'selection-change',
'row-dblclick',
'row-click'
]),
{
'selection-change': this._selectionChangeEvent,
'row-dblclick': this._rowDblclickEvent,
'row-click': this._rowClickEvent,
select: this._select,
'select-all': this._selectAll
}
),
directives: [
{
name: 'loading',
value: this.loading
// 'v-loading': true
}
]
// key: this.key
},
[
this.multipleSelectNode(),
this.indexColumn(),
this.tableColumnNodes(),
h('template', { slot: 'append' }, this.appendNode()),
h('template', { slot: 'empty' }, this.appendEmptyNode())
]
);
}
};
export { BaseGridTable };