320 lines
8.9 KiB
JavaScript
320 lines
8.9 KiB
JavaScript
import { cellStarts, cellForced, defaultRenderCell, treeCellPrefix } from './config';
|
||
import { mergeOptions, parseWidth, parseMinWidth, compose } from './util';
|
||
import ElCheckbox from 'element-ui/packages/checkbox';
|
||
|
||
let columnIdSeed = 1;
|
||
|
||
export default {
|
||
name: 'ElTableColumn',
|
||
|
||
props: {
|
||
type: {
|
||
type: String,
|
||
default: 'default'
|
||
},
|
||
label: String,
|
||
className: String,
|
||
labelClassName: String,
|
||
property: String,
|
||
prop: String,
|
||
width: {},
|
||
minWidth: {},
|
||
renderHeader: Function,
|
||
sortable: {
|
||
type: [Boolean, String],
|
||
default: false
|
||
},
|
||
sortMethod: Function,
|
||
sortBy: [String, Function, Array],
|
||
resizable: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
columnKey: String,
|
||
align: String,
|
||
headerAlign: String,
|
||
showTooltipWhenOverflow: Boolean,
|
||
showOverflowTooltip: Boolean,
|
||
fixed: [Boolean, String],
|
||
formatter: Function,
|
||
selectable: Function,
|
||
reserveSelection: Boolean,
|
||
filterMethod: Function,
|
||
filteredValue: Array,
|
||
filters: Array,
|
||
filterPlacement: String,
|
||
filterMultiple: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
index: [Number, Function],
|
||
sortOrders: {
|
||
type: Array,
|
||
default() {
|
||
return ['ascending', 'descending', null];
|
||
},
|
||
validator(val) {
|
||
return val.every(order => ['ascending', 'descending', null].indexOf(order) > -1);
|
||
}
|
||
}
|
||
},
|
||
|
||
data() {
|
||
return {
|
||
isSubColumn: false,
|
||
columns: []
|
||
};
|
||
},
|
||
|
||
computed: {
|
||
owner() {
|
||
let parent = this.$parent;
|
||
while (parent && !parent.tableId) {
|
||
parent = parent.$parent;
|
||
}
|
||
return parent;
|
||
},
|
||
|
||
columnOrTableParent() {
|
||
let parent = this.$parent;
|
||
while (parent && !parent.tableId && !parent.columnId) {
|
||
parent = parent.$parent;
|
||
}
|
||
return parent;
|
||
},
|
||
|
||
realWidth() {
|
||
return parseWidth(this.width);
|
||
},
|
||
|
||
realMinWidth() {
|
||
return parseMinWidth(this.minWidth);
|
||
},
|
||
|
||
realAlign() {
|
||
return this.align ? 'is-' + this.align : null;
|
||
},
|
||
|
||
realHeaderAlign() {
|
||
return this.headerAlign ? 'is-' + this.headerAlign : this.realAlign;
|
||
}
|
||
},
|
||
|
||
methods: {
|
||
getPropsData(...props) {
|
||
return props.reduce((prev, cur) => {
|
||
if (Array.isArray(cur)) {
|
||
cur.forEach((key) => {
|
||
prev[key] = this[key];
|
||
});
|
||
}
|
||
return prev;
|
||
}, {});
|
||
},
|
||
|
||
getColumnElIndex(children, child) {
|
||
return [].indexOf.call(children, child);
|
||
},
|
||
|
||
setColumnWidth(column) {
|
||
if (this.realWidth) {
|
||
column.width = this.realWidth;
|
||
}
|
||
if (this.realMinWidth) {
|
||
column.minWidth = this.realMinWidth;
|
||
}
|
||
if (!column.minWidth) {
|
||
column.minWidth = 80;
|
||
}
|
||
column.realWidth = column.width === undefined ? column.minWidth : column.width;
|
||
return column;
|
||
},
|
||
|
||
setColumnForcedProps(column) {
|
||
// 对于特定类型的 column，某些属性不允许设置
|
||
const type = column.type;
|
||
const source = cellForced[type] || {};
|
||
Object.keys(source).forEach(prop => {
|
||
let value = source[prop];
|
||
if (value !== undefined) {
|
||
column[prop] = prop === 'className' ? `${column[prop]} ${value}` : value;
|
||
}
|
||
});
|
||
return column;
|
||
},
|
||
|
||
setColumnRenders(column) {
|
||
// renderHeader 属性不推荐使用。
|
||
if (this.renderHeader) {
|
||
console.warn('[Element Warn][TableColumn]Comparing to render-header, scoped-slot header is easier to use. We recommend users to use scoped-slot header.');
|
||
} else if (column.type !== 'selection') {
|
||
column.renderHeader = (h, scope) => {
|
||
const renderHeader = this.$scopedSlots.header;
|
||
return renderHeader ? renderHeader(scope) : column.label;
|
||
};
|
||
}
|
||
|
||
let originRenderCell = column.renderCell;
|
||
// TODO: 这里的实现调整
|
||
if (column.type === 'expand') {
|
||
// 对于展开行，renderCell 不允许配置的。在上一步中已经设置过，这里需要简单封装一下。
|
||
column.renderCell = (h, data) => (<div class="cell">
|
||
{ originRenderCell(h, data) }
|
||
</div>);
|
||
this.owner.renderExpanded = (h, data) => {
|
||
return this.$scopedSlots.default
|
||
? this.$scopedSlots.default(data)
|
||
: this.$slots.default;
|
||
};
|
||
} else {
|
||
originRenderCell = originRenderCell || defaultRenderCell;
|
||
// 对 renderCell 进行包装
|
||
column.renderCell = (h, data) => {
|
||
let children = null;
|
||
if (this.$scopedSlots.default) {
|
||
children = this.$scopedSlots.default(data);
|
||
} else {
|
||
children = originRenderCell(h, data);
|
||
}
|
||
const prefix = treeCellPrefix(h, data);
|
||
const props = {
|
||
class: 'cell',
|
||
style: {}
|
||
};
|
||
if (column.showOverflowTooltip) {
|
||
props.class += ' el-tooltip';
|
||
props.style = {width: (data.column.realWidth || data.column.width) - 1 + 'px'};
|
||
}
|
||
return (<div { ...props }>
|
||
{ prefix }
|
||
{ children }
|
||
</div>);
|
||
};
|
||
}
|
||
return column;
|
||
},
|
||
|
||
registerNormalWatchers() {
|
||
const props = ['label', 'property', 'filters', 'filterMultiple', 'sortable', 'index', 'formatter', 'className', 'labelClassName', 'showOverflowTooltip'];
|
||
// 一些属性具有别名
|
||
const aliases = {
|
||
prop: 'property',
|
||
realAlign: 'align',
|
||
realHeaderAlign: 'headerAlign',
|
||
realWidth: 'width'
|
||
};
|
||
const allAliases = props.reduce((prev, cur) => {
|
||
prev[cur] = cur;
|
||
return prev;
|
||
}, aliases);
|
||
|
||
Object.keys(allAliases).forEach(key => {
|
||
const columnKey = aliases[key];
|
||
|
||
this.$watch(key, (newVal) => {
|
||
this.columnConfig[columnKey] = newVal;
|
||
});
|
||
});
|
||
},
|
||
|
||
registerComplexWatchers() {
|
||
const props = ['fixed'];
|
||
const aliases = {
|
||
realWidth: 'width',
|
||
realMinWidth: 'minWidth'
|
||
};
|
||
const allAliases = props.reduce((prev, cur) => {
|
||
prev[cur] = cur;
|
||
return prev;
|
||
}, aliases);
|
||
|
||
Object.keys(allAliases).forEach(key => {
|
||
const columnKey = aliases[key];
|
||
|
||
this.$watch(key, (newVal) => {
|
||
this.columnConfig[columnKey] = newVal;
|
||
const updateColumns = columnKey === 'fixed';
|
||
this.owner.store.scheduleLayout(updateColumns);
|
||
});
|
||
});
|
||
}
|
||
},
|
||
|
||
components: {
|
||
ElCheckbox
|
||
},
|
||
|
||
beforeCreate() {
|
||
this.row = {};
|
||
this.column = {};
|
||
this.$index = 0;
|
||
this.columnId = '';
|
||
},
|
||
|
||
created() {
|
||
const parent = this.columnOrTableParent;
|
||
this.isSubColumn = this.owner !== parent;
|
||
this.columnId = (parent.tableId || parent.columnId) + '_column_' + columnIdSeed++;
|
||
|
||
const type = this.type || 'default';
|
||
const sortable = this.sortable === '' ? true : this.sortable;
|
||
const defaults = {
|
||
...cellStarts[type],
|
||
id: this.columnId,
|
||
type: type,
|
||
property: this.prop || this.property,
|
||
align: this.realAlign,
|
||
headerAlign: this.realHeaderAlign,
|
||
showOverflowTooltip: this.showOverflowTooltip || this.showTooltipWhenOverflow,
|
||
// filter 相关属性
|
||
filterable: this.filters || this.filterMethod,
|
||
filteredValue: [],
|
||
filterPlacement: '',
|
||
isColumnGroup: false,
|
||
filterOpened: false,
|
||
// sort 相关属性
|
||
sortable: sortable,
|
||
// index 列
|
||
index: this.index
|
||
};
|
||
|
||
const basicProps = ['columnKey', 'label', 'className', 'labelClassName', 'type', 'renderHeader', 'formatter', 'fixed', 'resizable'];
|
||
const sortProps = ['sortMethod', 'sortBy', 'sortOrders'];
|
||
const selectProps = ['selectable', 'reserveSelection'];
|
||
const filterProps = ['filterMethod', 'filters', 'filterMultiple', 'filterOpened', 'filteredValue', 'filterPlacement'];
|
||
|
||
let column = this.getPropsData(basicProps, sortProps, selectProps, filterProps);
|
||
column = mergeOptions(defaults, column);
|
||
|
||
// 注意 compose 中函数执行的顺序是从右到左
|
||
const chains = compose(this.setColumnRenders, this.setColumnWidth, this.setColumnForcedProps);
|
||
column = chains(column);
|
||
|
||
this.columnConfig = column;
|
||
|
||
// 注册 watcher
|
||
this.registerNormalWatchers();
|
||
this.registerComplexWatchers();
|
||
},
|
||
|
||
mounted() {
|
||
const owner = this.owner;
|
||
const parent = this.columnOrTableParent;
|
||
const children = this.isSubColumn ? parent.$el.children : parent.$refs.hiddenColumns.children;
|
||
const columnIndex = this.getColumnElIndex(children, this.$el);
|
||
|
||
owner.store.commit('insertColumn', this.columnConfig, columnIndex, this.isSubColumn ? parent.columnConfig : null);
|
||
},
|
||
|
||
destroyed() {
|
||
if (!this.$parent) return;
|
||
const parent = this.$parent;
|
||
this.owner.store.commit('removeColumn', this.columnConfig, this.isSubColumn ? parent.columnConfig : null);
|
||
},
|
||
|
||
render(h) {
|
||
// slots 也要渲染，需要计算合并表头
|
||
return h('div', this.$slots.default);
|
||
}
|
||
};
|