table-column.js 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626
  1. module.exports =
  2. /******/ (function(modules) { // webpackBootstrap
  3. /******/ // The module cache
  4. /******/ var installedModules = {};
  5. /******/
  6. /******/ // The require function
  7. /******/ function __webpack_require__(moduleId) {
  8. /******/
  9. /******/ // Check if module is in cache
  10. /******/ if(installedModules[moduleId]) {
  11. /******/ return installedModules[moduleId].exports;
  12. /******/ }
  13. /******/ // Create a new module (and put it into the cache)
  14. /******/ var module = installedModules[moduleId] = {
  15. /******/ i: moduleId,
  16. /******/ l: false,
  17. /******/ exports: {}
  18. /******/ };
  19. /******/
  20. /******/ // Execute the module function
  21. /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
  22. /******/
  23. /******/ // Flag the module as loaded
  24. /******/ module.l = true;
  25. /******/
  26. /******/ // Return the exports of the module
  27. /******/ return module.exports;
  28. /******/ }
  29. /******/
  30. /******/
  31. /******/ // expose the modules object (__webpack_modules__)
  32. /******/ __webpack_require__.m = modules;
  33. /******/
  34. /******/ // expose the module cache
  35. /******/ __webpack_require__.c = installedModules;
  36. /******/
  37. /******/ // define getter function for harmony exports
  38. /******/ __webpack_require__.d = function(exports, name, getter) {
  39. /******/ if(!__webpack_require__.o(exports, name)) {
  40. /******/ Object.defineProperty(exports, name, {
  41. /******/ configurable: false,
  42. /******/ enumerable: true,
  43. /******/ get: getter
  44. /******/ });
  45. /******/ }
  46. /******/ };
  47. /******/
  48. /******/ // getDefaultExport function for compatibility with non-harmony modules
  49. /******/ __webpack_require__.n = function(module) {
  50. /******/ var getter = module && module.__esModule ?
  51. /******/ function getDefault() { return module['default']; } :
  52. /******/ function getModuleExports() { return module; };
  53. /******/ __webpack_require__.d(getter, 'a', getter);
  54. /******/ return getter;
  55. /******/ };
  56. /******/
  57. /******/ // Object.prototype.hasOwnProperty.call
  58. /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
  59. /******/
  60. /******/ // __webpack_public_path__
  61. /******/ __webpack_require__.p = "/dist/";
  62. /******/
  63. /******/ // Load entry module and return exports
  64. /******/ return __webpack_require__(__webpack_require__.s = 200);
  65. /******/ })
  66. /************************************************************************/
  67. /******/ ({
  68. /***/ 16:
  69. /***/ (function(module, exports) {
  70. module.exports = require("element-ui/lib/checkbox");
  71. /***/ }),
  72. /***/ 200:
  73. /***/ (function(module, exports, __webpack_require__) {
  74. module.exports = __webpack_require__(201);
  75. /***/ }),
  76. /***/ 201:
  77. /***/ (function(module, exports, __webpack_require__) {
  78. "use strict";
  79. exports.__esModule = true;
  80. var _tableColumn = __webpack_require__(202);
  81. var _tableColumn2 = _interopRequireDefault(_tableColumn);
  82. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  83. /* istanbul ignore next */
  84. _tableColumn2.default.install = function (Vue) {
  85. Vue.component(_tableColumn2.default.name, _tableColumn2.default);
  86. };
  87. exports.default = _tableColumn2.default;
  88. /***/ }),
  89. /***/ 202:
  90. /***/ (function(module, exports, __webpack_require__) {
  91. "use strict";
  92. exports.__esModule = true;
  93. var _checkbox = __webpack_require__(16);
  94. var _checkbox2 = _interopRequireDefault(_checkbox);
  95. var _tag = __webpack_require__(25);
  96. var _tag2 = _interopRequireDefault(_tag);
  97. var _merge = __webpack_require__(9);
  98. var _merge2 = _interopRequireDefault(_merge);
  99. var _util = __webpack_require__(3);
  100. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  101. var columnIdSeed = 1;
  102. var defaults = {
  103. default: {
  104. order: ''
  105. },
  106. selection: {
  107. width: 48,
  108. minWidth: 48,
  109. realWidth: 48,
  110. order: '',
  111. className: 'el-table-column--selection'
  112. },
  113. expand: {
  114. width: 48,
  115. minWidth: 48,
  116. realWidth: 48,
  117. order: ''
  118. },
  119. index: {
  120. width: 48,
  121. minWidth: 48,
  122. realWidth: 48,
  123. order: ''
  124. }
  125. };
  126. var forced = {
  127. selection: {
  128. renderHeader: function renderHeader(h, _ref) {
  129. var store = _ref.store;
  130. return h(
  131. 'el-checkbox',
  132. {
  133. attrs: {
  134. disabled: store.states.data && store.states.data.length === 0,
  135. indeterminate: store.states.selection.length > 0 && !this.isAllSelected,
  136. value: this.isAllSelected },
  137. nativeOn: {
  138. 'click': this.toggleAllSelection
  139. }
  140. },
  141. []
  142. );
  143. },
  144. renderCell: function renderCell(h, _ref2) {
  145. var row = _ref2.row,
  146. column = _ref2.column,
  147. store = _ref2.store,
  148. $index = _ref2.$index;
  149. return h(
  150. 'el-checkbox',
  151. {
  152. nativeOn: {
  153. 'click': function click(event) {
  154. return event.stopPropagation();
  155. }
  156. },
  157. attrs: {
  158. value: store.isSelected(row),
  159. disabled: column.selectable ? !column.selectable.call(null, row, $index) : false
  160. },
  161. on: {
  162. 'input': function input() {
  163. store.commit('rowSelectedChanged', row);
  164. }
  165. }
  166. },
  167. []
  168. );
  169. },
  170. sortable: false,
  171. resizable: false
  172. },
  173. index: {
  174. renderHeader: function renderHeader(h, _ref3) {
  175. var column = _ref3.column;
  176. return column.label || '#';
  177. },
  178. renderCell: function renderCell(h, _ref4) {
  179. var $index = _ref4.$index,
  180. column = _ref4.column;
  181. var i = $index + 1;
  182. var index = column.index;
  183. if (typeof index === 'number') {
  184. i = $index + index;
  185. } else if (typeof index === 'function') {
  186. i = index($index);
  187. }
  188. return h(
  189. 'div',
  190. null,
  191. [i]
  192. );
  193. },
  194. sortable: false
  195. },
  196. expand: {
  197. renderHeader: function renderHeader(h, _ref5) {
  198. var column = _ref5.column;
  199. return column.label || '';
  200. },
  201. renderCell: function renderCell(h, _ref6, proxy) {
  202. var row = _ref6.row,
  203. store = _ref6.store;
  204. var expanded = store.states.expandRows.indexOf(row) > -1;
  205. return h(
  206. 'div',
  207. { 'class': 'el-table__expand-icon ' + (expanded ? 'el-table__expand-icon--expanded' : ''),
  208. on: {
  209. 'click': function click(e) {
  210. return proxy.handleExpandClick(row, e);
  211. }
  212. }
  213. },
  214. [h(
  215. 'i',
  216. { 'class': 'el-icon el-icon-arrow-right' },
  217. []
  218. )]
  219. );
  220. },
  221. sortable: false,
  222. resizable: false,
  223. className: 'el-table__expand-column'
  224. }
  225. };
  226. var getDefaultColumn = function getDefaultColumn(type, options) {
  227. var column = {};
  228. (0, _merge2.default)(column, defaults[type || 'default']);
  229. for (var name in options) {
  230. if (options.hasOwnProperty(name)) {
  231. var value = options[name];
  232. if (typeof value !== 'undefined') {
  233. column[name] = value;
  234. }
  235. }
  236. }
  237. if (!column.minWidth) {
  238. column.minWidth = 80;
  239. }
  240. column.realWidth = column.width === undefined ? column.minWidth : column.width;
  241. return column;
  242. };
  243. var DEFAULT_RENDER_CELL = function DEFAULT_RENDER_CELL(h, _ref7) {
  244. var row = _ref7.row,
  245. column = _ref7.column,
  246. $index = _ref7.$index;
  247. var property = column.property;
  248. var value = property && (0, _util.getPropByPath)(row, property).v;
  249. if (column && column.formatter) {
  250. return column.formatter(row, column, value, $index);
  251. }
  252. return value;
  253. };
  254. var parseWidth = function parseWidth(width) {
  255. if (width !== undefined) {
  256. width = parseInt(width, 10);
  257. if (isNaN(width)) {
  258. width = null;
  259. }
  260. }
  261. return width;
  262. };
  263. var parseMinWidth = function parseMinWidth(minWidth) {
  264. if (minWidth !== undefined) {
  265. minWidth = parseInt(minWidth, 10);
  266. if (isNaN(minWidth)) {
  267. minWidth = 80;
  268. }
  269. }
  270. return minWidth;
  271. };
  272. exports.default = {
  273. name: 'ElTableColumn',
  274. props: {
  275. type: {
  276. type: String,
  277. default: 'default'
  278. },
  279. label: String,
  280. className: String,
  281. labelClassName: String,
  282. property: String,
  283. prop: String,
  284. width: {},
  285. minWidth: {},
  286. renderHeader: Function,
  287. sortable: {
  288. type: [String, Boolean],
  289. default: false
  290. },
  291. sortMethod: Function,
  292. sortBy: [String, Function, Array],
  293. resizable: {
  294. type: Boolean,
  295. default: true
  296. },
  297. context: {},
  298. columnKey: String,
  299. align: String,
  300. headerAlign: String,
  301. showTooltipWhenOverflow: Boolean,
  302. showOverflowTooltip: Boolean,
  303. fixed: [Boolean, String],
  304. formatter: Function,
  305. selectable: Function,
  306. reserveSelection: Boolean,
  307. filterMethod: Function,
  308. filteredValue: Array,
  309. filters: Array,
  310. filterPlacement: String,
  311. filterMultiple: {
  312. type: Boolean,
  313. default: true
  314. },
  315. index: [Number, Function]
  316. },
  317. data: function data() {
  318. return {
  319. isSubColumn: false,
  320. columns: []
  321. };
  322. },
  323. beforeCreate: function beforeCreate() {
  324. this.row = {};
  325. this.column = {};
  326. this.$index = 0;
  327. },
  328. components: {
  329. ElCheckbox: _checkbox2.default,
  330. ElTag: _tag2.default
  331. },
  332. computed: {
  333. owner: function owner() {
  334. var parent = this.$parent;
  335. while (parent && !parent.tableId) {
  336. parent = parent.$parent;
  337. }
  338. return parent;
  339. },
  340. columnOrTableParent: function columnOrTableParent() {
  341. var parent = this.$parent;
  342. while (parent && !parent.tableId && !parent.columnId) {
  343. parent = parent.$parent;
  344. }
  345. return parent;
  346. }
  347. },
  348. created: function created() {
  349. var _this = this;
  350. this.customRender = this.$options.render;
  351. this.$options.render = function (h) {
  352. return h('div', _this.$slots.default);
  353. };
  354. var parent = this.columnOrTableParent;
  355. var owner = this.owner;
  356. this.isSubColumn = owner !== parent;
  357. this.columnId = (parent.tableId || parent.columnId) + '_column_' + columnIdSeed++;
  358. var type = this.type;
  359. var width = parseWidth(this.width);
  360. var minWidth = parseMinWidth(this.minWidth);
  361. var isColumnGroup = false;
  362. var column = getDefaultColumn(type, {
  363. id: this.columnId,
  364. columnKey: this.columnKey,
  365. label: this.label,
  366. className: this.className,
  367. labelClassName: this.labelClassName,
  368. property: this.prop || this.property,
  369. type: type,
  370. renderCell: null,
  371. renderHeader: this.renderHeader,
  372. minWidth: minWidth,
  373. width: width,
  374. isColumnGroup: isColumnGroup,
  375. context: this.context,
  376. align: this.align ? 'is-' + this.align : null,
  377. headerAlign: this.headerAlign ? 'is-' + this.headerAlign : this.align ? 'is-' + this.align : null,
  378. sortable: this.sortable === '' ? true : this.sortable,
  379. sortMethod: this.sortMethod,
  380. sortBy: this.sortBy,
  381. resizable: this.resizable,
  382. showOverflowTooltip: this.showOverflowTooltip || this.showTooltipWhenOverflow,
  383. formatter: this.formatter,
  384. selectable: this.selectable,
  385. reserveSelection: this.reserveSelection,
  386. fixed: this.fixed === '' ? true : this.fixed,
  387. filterMethod: this.filterMethod,
  388. filters: this.filters,
  389. filterable: this.filters || this.filterMethod,
  390. filterMultiple: this.filterMultiple,
  391. filterOpened: false,
  392. filteredValue: this.filteredValue || [],
  393. filterPlacement: this.filterPlacement || '',
  394. index: this.index
  395. });
  396. (0, _merge2.default)(column, forced[type] || {});
  397. this.columnConfig = column;
  398. var renderCell = column.renderCell;
  399. var _self = this;
  400. if (type === 'expand') {
  401. owner.renderExpanded = function (h, data) {
  402. return _self.$scopedSlots.default ? _self.$scopedSlots.default(data) : _self.$slots.default;
  403. };
  404. column.renderCell = function (h, data) {
  405. return h(
  406. 'div',
  407. { 'class': 'cell' },
  408. [renderCell(h, data, this._renderProxy)]
  409. );
  410. };
  411. return;
  412. }
  413. column.renderCell = function (h, data) {
  414. if (_self.$scopedSlots.default) {
  415. renderCell = function renderCell() {
  416. return _self.$scopedSlots.default(data);
  417. };
  418. }
  419. if (!renderCell) {
  420. renderCell = DEFAULT_RENDER_CELL;
  421. }
  422. return _self.showOverflowTooltip || _self.showTooltipWhenOverflow ? h(
  423. 'div',
  424. { 'class': 'cell el-tooltip', style: { width: (data.column.realWidth || data.column.width) - 1 + 'px' } },
  425. [renderCell(h, data)]
  426. ) : h(
  427. 'div',
  428. { 'class': 'cell' },
  429. [renderCell(h, data)]
  430. );
  431. };
  432. },
  433. destroyed: function destroyed() {
  434. if (!this.$parent) return;
  435. var parent = this.$parent;
  436. this.owner.store.commit('removeColumn', this.columnConfig, this.isSubColumn ? parent.columnConfig : null);
  437. },
  438. watch: {
  439. label: function label(newVal) {
  440. if (this.columnConfig) {
  441. this.columnConfig.label = newVal;
  442. }
  443. },
  444. prop: function prop(newVal) {
  445. if (this.columnConfig) {
  446. this.columnConfig.property = newVal;
  447. }
  448. },
  449. property: function property(newVal) {
  450. if (this.columnConfig) {
  451. this.columnConfig.property = newVal;
  452. }
  453. },
  454. filters: function filters(newVal) {
  455. if (this.columnConfig) {
  456. this.columnConfig.filters = newVal;
  457. }
  458. },
  459. filterMultiple: function filterMultiple(newVal) {
  460. if (this.columnConfig) {
  461. this.columnConfig.filterMultiple = newVal;
  462. }
  463. },
  464. align: function align(newVal) {
  465. if (this.columnConfig) {
  466. this.columnConfig.align = newVal ? 'is-' + newVal : null;
  467. if (!this.headerAlign) {
  468. this.columnConfig.headerAlign = newVal ? 'is-' + newVal : null;
  469. }
  470. }
  471. },
  472. headerAlign: function headerAlign(newVal) {
  473. if (this.columnConfig) {
  474. this.columnConfig.headerAlign = 'is-' + (newVal ? newVal : this.align);
  475. }
  476. },
  477. width: function width(newVal) {
  478. if (this.columnConfig) {
  479. this.columnConfig.width = parseWidth(newVal);
  480. this.owner.store.scheduleLayout();
  481. }
  482. },
  483. minWidth: function minWidth(newVal) {
  484. if (this.columnConfig) {
  485. this.columnConfig.minWidth = parseMinWidth(newVal);
  486. this.owner.store.scheduleLayout();
  487. }
  488. },
  489. fixed: function fixed(newVal) {
  490. if (this.columnConfig) {
  491. this.columnConfig.fixed = newVal;
  492. this.owner.store.scheduleLayout(true);
  493. }
  494. },
  495. sortable: function sortable(newVal) {
  496. if (this.columnConfig) {
  497. this.columnConfig.sortable = newVal;
  498. }
  499. },
  500. index: function index(newVal) {
  501. if (this.columnConfig) {
  502. this.columnConfig.index = newVal;
  503. }
  504. },
  505. formatter: function formatter(newVal) {
  506. if (this.columnConfig) {
  507. this.columnConfig.formatter = newVal;
  508. }
  509. }
  510. },
  511. mounted: function mounted() {
  512. var owner = this.owner;
  513. var parent = this.columnOrTableParent;
  514. var columnIndex = void 0;
  515. if (!this.isSubColumn) {
  516. columnIndex = [].indexOf.call(parent.$refs.hiddenColumns.children, this.$el);
  517. } else {
  518. columnIndex = [].indexOf.call(parent.$el.children, this.$el);
  519. }
  520. owner.store.commit('insertColumn', this.columnConfig, columnIndex, this.isSubColumn ? parent.columnConfig : null);
  521. }
  522. };
  523. /***/ }),
  524. /***/ 25:
  525. /***/ (function(module, exports) {
  526. module.exports = require("element-ui/lib/tag");
  527. /***/ }),
  528. /***/ 3:
  529. /***/ (function(module, exports) {
  530. module.exports = require("element-ui/lib/utils/util");
  531. /***/ }),
  532. /***/ 9:
  533. /***/ (function(module, exports) {
  534. module.exports = require("element-ui/lib/utils/merge");
  535. /***/ })
  536. /******/ });