mirror of https://github.com/ElemeFE/element
124 lines
3.4 KiB
JavaScript
124 lines
3.4 KiB
JavaScript
import { getPropByPath } from 'element-ui/src/utils/util';
|
|
|
|
export const cellStarts = {
|
|
default: {
|
|
order: ''
|
|
},
|
|
selection: {
|
|
width: 48,
|
|
minWidth: 48,
|
|
realWidth: 48,
|
|
order: '',
|
|
className: 'el-table-column--selection'
|
|
},
|
|
expand: {
|
|
width: 48,
|
|
minWidth: 48,
|
|
realWidth: 48,
|
|
order: ''
|
|
},
|
|
index: {
|
|
width: 48,
|
|
minWidth: 48,
|
|
realWidth: 48,
|
|
order: ''
|
|
}
|
|
};
|
|
|
|
// 这些选项不应该被覆盖
|
|
export const cellForced = {
|
|
selection: {
|
|
renderHeader: function(h, { store }) {
|
|
return <el-checkbox
|
|
disabled={ store.states.data && store.states.data.length === 0 }
|
|
indeterminate={ store.states.selection.length > 0 && !this.isAllSelected }
|
|
nativeOn-click={ this.toggleAllSelection }
|
|
value={ this.isAllSelected } />;
|
|
},
|
|
renderCell: function(h, { row, column, store, $index }) {
|
|
return <el-checkbox
|
|
nativeOn-click={ (event) => event.stopPropagation() }
|
|
value={ store.isSelected(row) }
|
|
disabled={ column.selectable ? !column.selectable.call(null, row, $index) : false }
|
|
on-input={ () => { store.commit('rowSelectedChanged', row); } } />;
|
|
},
|
|
sortable: false,
|
|
resizable: false
|
|
},
|
|
index: {
|
|
renderHeader: function(h, { column }) {
|
|
return column.label || '#';
|
|
},
|
|
renderCell: function(h, { $index, column }) {
|
|
let i = $index + 1;
|
|
const index = column.index;
|
|
|
|
if (typeof index === 'number') {
|
|
i = $index + index;
|
|
} else if (typeof index === 'function') {
|
|
i = index($index);
|
|
}
|
|
|
|
return <div>{ i }</div>;
|
|
},
|
|
sortable: false
|
|
},
|
|
expand: {
|
|
renderHeader: function(h, { column }) {
|
|
return column.label || '';
|
|
},
|
|
renderCell: function(h, { row, store }) {
|
|
const classes = ['el-table__expand-icon'];
|
|
if (store.states.expandRows.indexOf(row) > -1) {
|
|
classes.push('el-table__expand-icon--expanded');
|
|
}
|
|
const callback = function(e) {
|
|
e.stopPropagation();
|
|
store.toggleRowExpansion(row);
|
|
};
|
|
return (<div class={ classes }
|
|
on-click={callback}>
|
|
<i class='el-icon el-icon-arrow-right'></i>
|
|
</div>);
|
|
},
|
|
sortable: false,
|
|
resizable: false,
|
|
className: 'el-table__expand-column'
|
|
}
|
|
};
|
|
|
|
export function defaultRenderCell(h, { row, column, $index }) {
|
|
const property = column.property;
|
|
const value = property && getPropByPath(row, property).v;
|
|
if (column && column.formatter) {
|
|
return column.formatter(row, column, value, $index);
|
|
}
|
|
return value;
|
|
}
|
|
|
|
export function treeCellPrefix(h, { row, treeNode, store }) {
|
|
if (!treeNode) return null;
|
|
const ele = [];
|
|
const callback = function(e) {
|
|
e.stopPropagation();
|
|
store.loadOrToggle(row);
|
|
};
|
|
if (treeNode.indent) {
|
|
ele.push(<span class="el-table__indent" style={{'padding-left': treeNode.indent + 'px'}}></span>);
|
|
}
|
|
if (typeof treeNode.expanded === 'boolean' && !treeNode.noLazyChildren) {
|
|
const expandClasses = ['el-table__expand-icon', treeNode.expanded ? 'el-table__expand-icon--expanded' : ''];
|
|
let iconClasses = ['el-icon-arrow-right'];
|
|
if (treeNode.loading) {
|
|
iconClasses = ['el-icon-loading'];
|
|
}
|
|
ele.push(<div class={ expandClasses }
|
|
on-click={ callback }>
|
|
<i class={ iconClasses }></i>
|
|
</div>);
|
|
} else {
|
|
ele.push(<span class="el-table__placeholder"></span>);
|
|
}
|
|
return ele;
|
|
}
|