You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
123 lines
3.4 KiB
123 lines
3.4 KiB
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; |
|
}
|
|
|