config.js 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124
  1. import { getPropByPath } from 'element-ui/src/utils/util';
  2. export const cellStarts = {
  3. default: {
  4. order: ''
  5. },
  6. selection: {
  7. width: 48,
  8. minWidth: 48,
  9. realWidth: 48,
  10. order: '',
  11. className: 'el-table-column--selection'
  12. },
  13. expand: {
  14. width: 48,
  15. minWidth: 48,
  16. realWidth: 48,
  17. order: ''
  18. },
  19. index: {
  20. width: 48,
  21. minWidth: 48,
  22. realWidth: 48,
  23. order: ''
  24. }
  25. };
  26. // 这些选项不应该被覆盖
  27. export const cellForced = {
  28. selection: {
  29. renderHeader: function(h, { store }) {
  30. return <el-checkbox
  31. disabled={ store.states.data && store.states.data.length === 0 }
  32. indeterminate={ store.states.selection.length > 0 && !this.isAllSelected }
  33. on-input={ this.toggleAllSelection }
  34. value={ this.isAllSelected } />;
  35. },
  36. renderCell: function(h, { row, column, isSelected, store, $index }) {
  37. return <el-checkbox
  38. nativeOn-click={ (event) => event.stopPropagation() }
  39. value={ isSelected }
  40. disabled={ column.selectable ? !column.selectable.call(null, row, $index) : false }
  41. on-input={ () => { store.commit('rowSelectedChanged', row); } }
  42. />;
  43. },
  44. sortable: false,
  45. resizable: false
  46. },
  47. index: {
  48. renderHeader: function(h, { column }) {
  49. return column.label || '#';
  50. },
  51. renderCell: function(h, { $index, column }) {
  52. let i = $index + 1;
  53. const index = column.index;
  54. if (typeof index === 'number') {
  55. i = $index + index;
  56. } else if (typeof index === 'function') {
  57. i = index($index);
  58. }
  59. return <div>{ i }</div>;
  60. },
  61. sortable: false
  62. },
  63. expand: {
  64. renderHeader: function(h, { column }) {
  65. return column.label || '';
  66. },
  67. renderCell: function(h, { row, store, isExpanded }) {
  68. const classes = ['el-table__expand-icon'];
  69. if (isExpanded) {
  70. classes.push('el-table__expand-icon--expanded');
  71. }
  72. const callback = function(e) {
  73. e.stopPropagation();
  74. store.toggleRowExpansion(row);
  75. };
  76. return (<div class={ classes }
  77. on-click={callback}>
  78. <i class='el-icon el-icon-arrow-right'></i>
  79. </div>);
  80. },
  81. sortable: false,
  82. resizable: false,
  83. className: 'el-table__expand-column'
  84. }
  85. };
  86. export function defaultRenderCell(h, { row, column, $index }) {
  87. const property = column.property;
  88. const value = property && getPropByPath(row, property).v;
  89. if (column && column.formatter) {
  90. return column.formatter(row, column, value, $index);
  91. }
  92. return value;
  93. }
  94. export function treeCellPrefix(h, { row, treeNode, store }) {
  95. if (!treeNode) return null;
  96. const ele = [];
  97. const callback = function(e) {
  98. e.stopPropagation();
  99. store.loadOrToggle(row);
  100. };
  101. if (treeNode.indent) {
  102. ele.push(<span class="el-table__indent" style={{'padding-left': treeNode.indent + 'px'}}></span>);
  103. }
  104. if (typeof treeNode.expanded === 'boolean' && !treeNode.noLazyChildren) {
  105. const expandClasses = ['el-table__expand-icon', treeNode.expanded ? 'el-table__expand-icon--expanded' : ''];
  106. let iconClasses = ['el-icon-arrow-right'];
  107. if (treeNode.loading) {
  108. iconClasses = ['el-icon-loading'];
  109. }
  110. ele.push(<div class={ expandClasses }
  111. on-click={ callback }>
  112. <i class={ iconClasses }></i>
  113. </div>);
  114. } else {
  115. ele.push(<span class="el-table__placeholder"></span>);
  116. }
  117. return ele;
  118. }