table-column.js 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670
  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 = 174);
  65. /******/ })
  66. /************************************************************************/
  67. /******/ ({
  68. /***/ 16:
  69. /***/ (function(module, exports) {
  70. module.exports = require("element-ui/lib/checkbox");
  71. /***/ }),
  72. /***/ 174:
  73. /***/ (function(module, exports, __webpack_require__) {
  74. "use strict";
  75. exports.__esModule = true;
  76. var _tableColumn = __webpack_require__(175);
  77. var _tableColumn2 = _interopRequireDefault(_tableColumn);
  78. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  79. /* istanbul ignore next */
  80. _tableColumn2.default.install = function (Vue) {
  81. Vue.component(_tableColumn2.default.name, _tableColumn2.default);
  82. };
  83. exports.default = _tableColumn2.default;
  84. /***/ }),
  85. /***/ 175:
  86. /***/ (function(module, exports, __webpack_require__) {
  87. "use strict";
  88. exports.__esModule = true;
  89. var _checkbox = __webpack_require__(16);
  90. var _checkbox2 = _interopRequireDefault(_checkbox);
  91. var _tag = __webpack_require__(25);
  92. var _tag2 = _interopRequireDefault(_tag);
  93. var _merge = __webpack_require__(9);
  94. var _merge2 = _interopRequireDefault(_merge);
  95. var _util = __webpack_require__(2);
  96. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  97. var columnIdSeed = 1;
  98. var defaults = {
  99. default: {
  100. order: ''
  101. },
  102. selection: {
  103. width: 48,
  104. minWidth: 48,
  105. realWidth: 48,
  106. order: '',
  107. className: 'el-table-column--selection'
  108. },
  109. expand: {
  110. width: 48,
  111. minWidth: 48,
  112. realWidth: 48,
  113. order: ''
  114. },
  115. index: {
  116. width: 48,
  117. minWidth: 48,
  118. realWidth: 48,
  119. order: ''
  120. }
  121. };
  122. var forced = {
  123. selection: {
  124. renderHeader: function renderHeader(h, _ref) {
  125. var store = _ref.store;
  126. return h(
  127. 'el-checkbox',
  128. {
  129. attrs: {
  130. disabled: store.states.data && store.states.data.length === 0,
  131. indeterminate: store.states.selection.length > 0 && !this.isAllSelected,
  132. value: this.isAllSelected },
  133. nativeOn: {
  134. 'click': this.toggleAllSelection
  135. }
  136. },
  137. []
  138. );
  139. },
  140. renderCell: function renderCell(h, _ref2) {
  141. var row = _ref2.row,
  142. column = _ref2.column,
  143. store = _ref2.store,
  144. $index = _ref2.$index;
  145. return h(
  146. 'el-checkbox',
  147. {
  148. nativeOn: {
  149. 'click': function click(event) {
  150. return event.stopPropagation();
  151. }
  152. },
  153. attrs: {
  154. value: store.isSelected(row),
  155. disabled: column.selectable ? !column.selectable.call(null, row, $index) : false
  156. },
  157. on: {
  158. 'input': function input() {
  159. store.commit('rowSelectedChanged', row);
  160. }
  161. }
  162. },
  163. []
  164. );
  165. },
  166. sortable: false,
  167. resizable: false
  168. },
  169. index: {
  170. renderHeader: function renderHeader(h, _ref3) {
  171. var column = _ref3.column;
  172. return column.label || '#';
  173. },
  174. renderCell: function renderCell(h, _ref4) {
  175. var $index = _ref4.$index,
  176. column = _ref4.column;
  177. var i = $index + 1;
  178. var index = column.index;
  179. if (typeof index === 'number') {
  180. i = $index + index;
  181. } else if (typeof index === 'function') {
  182. i = index($index);
  183. }
  184. return h(
  185. 'div',
  186. null,
  187. [i]
  188. );
  189. },
  190. sortable: false
  191. },
  192. expand: {
  193. renderHeader: function renderHeader(h, _ref5) {
  194. var column = _ref5.column;
  195. return column.label || '';
  196. },
  197. renderCell: function renderCell(h, _ref6, proxy) {
  198. var row = _ref6.row,
  199. store = _ref6.store;
  200. var expanded = store.states.expandRows.indexOf(row) > -1;
  201. return h(
  202. 'div',
  203. { 'class': 'el-table__expand-icon ' + (expanded ? 'el-table__expand-icon--expanded' : ''),
  204. on: {
  205. 'click': function click(e) {
  206. return proxy.handleExpandClick(row, e);
  207. }
  208. }
  209. },
  210. [h(
  211. 'i',
  212. { 'class': 'el-icon el-icon-arrow-right' },
  213. []
  214. )]
  215. );
  216. },
  217. sortable: false,
  218. resizable: false,
  219. className: 'el-table__expand-column'
  220. }
  221. };
  222. var getDefaultColumn = function getDefaultColumn(type, options) {
  223. var column = {};
  224. (0, _merge2.default)(column, defaults[type || 'default']);
  225. for (var name in options) {
  226. if (options.hasOwnProperty(name)) {
  227. var value = options[name];
  228. if (typeof value !== 'undefined') {
  229. column[name] = value;
  230. }
  231. }
  232. }
  233. if (!column.minWidth) {
  234. column.minWidth = 80;
  235. }
  236. column.realWidth = column.width === undefined ? column.minWidth : column.width;
  237. return column;
  238. };
  239. var DEFAULT_RENDER_CELL = function DEFAULT_RENDER_CELL(h, _ref7) {
  240. var row = _ref7.row,
  241. column = _ref7.column,
  242. $index = _ref7.$index;
  243. var property = column.property;
  244. var value = property && (0, _util.getPropByPath)(row, property).v;
  245. if (column && column.formatter) {
  246. return column.formatter(row, column, value, $index);
  247. }
  248. return value;
  249. };
  250. var parseWidth = function parseWidth(width) {
  251. if (width !== undefined) {
  252. width = parseInt(width, 10);
  253. if (isNaN(width)) {
  254. width = null;
  255. }
  256. }
  257. return width;
  258. };
  259. var parseMinWidth = function parseMinWidth(minWidth) {
  260. if (minWidth !== undefined) {
  261. minWidth = parseInt(minWidth, 10);
  262. if (isNaN(minWidth)) {
  263. minWidth = 80;
  264. }
  265. }
  266. return minWidth;
  267. };
  268. exports.default = {
  269. name: 'ElTableColumn',
  270. props: {
  271. type: {
  272. type: String,
  273. default: 'default'
  274. },
  275. label: String,
  276. className: String,
  277. labelClassName: String,
  278. property: String,
  279. prop: String,
  280. width: {},
  281. minWidth: {},
  282. renderHeader: Function,
  283. sortable: {
  284. type: [String, Boolean],
  285. default: false
  286. },
  287. sortMethod: Function,
  288. sortBy: [String, Function, Array],
  289. resizable: {
  290. type: Boolean,
  291. default: true
  292. },
  293. context: {},
  294. columnKey: String,
  295. align: String,
  296. headerAlign: String,
  297. showTooltipWhenOverflow: Boolean,
  298. showOverflowTooltip: Boolean,
  299. fixed: [Boolean, String],
  300. formatter: Function,
  301. selectable: Function,
  302. reserveSelection: Boolean,
  303. filterMethod: Function,
  304. filteredValue: Array,
  305. filters: Array,
  306. filterPlacement: String,
  307. filterMultiple: {
  308. type: Boolean,
  309. default: true
  310. },
  311. index: [Number, Function],
  312. sortOrders: {
  313. type: Array,
  314. default: function _default() {
  315. return ['ascending', 'descending', null];
  316. },
  317. validator: function validator(val) {
  318. return val.every(function (order) {
  319. return ['ascending', 'descending', null].indexOf(order) > -1;
  320. });
  321. }
  322. }
  323. },
  324. data: function data() {
  325. return {
  326. isSubColumn: false,
  327. columns: []
  328. };
  329. },
  330. beforeCreate: function beforeCreate() {
  331. this.row = {};
  332. this.column = {};
  333. this.$index = 0;
  334. },
  335. components: {
  336. ElCheckbox: _checkbox2.default,
  337. ElTag: _tag2.default
  338. },
  339. computed: {
  340. owner: function owner() {
  341. var parent = this.$parent;
  342. while (parent && !parent.tableId) {
  343. parent = parent.$parent;
  344. }
  345. return parent;
  346. },
  347. columnOrTableParent: function columnOrTableParent() {
  348. var parent = this.$parent;
  349. while (parent && !parent.tableId && !parent.columnId) {
  350. parent = parent.$parent;
  351. }
  352. return parent;
  353. }
  354. },
  355. created: function created() {
  356. var _this = this;
  357. this.customRender = this.$options.render;
  358. this.$options.render = function (h) {
  359. return h('div', _this.$slots.default);
  360. };
  361. var parent = this.columnOrTableParent;
  362. var owner = this.owner;
  363. this.isSubColumn = owner !== parent;
  364. this.columnId = (parent.tableId || parent.columnId) + '_column_' + columnIdSeed++;
  365. var type = this.type;
  366. var width = parseWidth(this.width);
  367. var minWidth = parseMinWidth(this.minWidth);
  368. var isColumnGroup = false;
  369. var column = getDefaultColumn(type, {
  370. id: this.columnId,
  371. columnKey: this.columnKey,
  372. label: this.label,
  373. className: this.className,
  374. labelClassName: this.labelClassName,
  375. property: this.prop || this.property,
  376. type: type,
  377. renderCell: null,
  378. renderHeader: this.renderHeader,
  379. minWidth: minWidth,
  380. width: width,
  381. isColumnGroup: isColumnGroup,
  382. context: this.context,
  383. align: this.align ? 'is-' + this.align : null,
  384. headerAlign: this.headerAlign ? 'is-' + this.headerAlign : this.align ? 'is-' + this.align : null,
  385. sortable: this.sortable === '' ? true : this.sortable,
  386. sortMethod: this.sortMethod,
  387. sortBy: this.sortBy,
  388. resizable: this.resizable,
  389. showOverflowTooltip: this.showOverflowTooltip || this.showTooltipWhenOverflow,
  390. formatter: this.formatter,
  391. selectable: this.selectable,
  392. reserveSelection: this.reserveSelection,
  393. fixed: this.fixed === '' ? true : this.fixed,
  394. filterMethod: this.filterMethod,
  395. filters: this.filters,
  396. filterable: this.filters || this.filterMethod,
  397. filterMultiple: this.filterMultiple,
  398. filterOpened: false,
  399. filteredValue: this.filteredValue || [],
  400. filterPlacement: this.filterPlacement || '',
  401. index: this.index,
  402. sortOrders: this.sortOrders
  403. });
  404. var source = forced[type] || {};
  405. Object.keys(source).forEach(function (prop) {
  406. var value = source[prop];
  407. if (value !== undefined) {
  408. if (prop === 'renderHeader') {
  409. if (type === 'selection' && column[prop]) {
  410. console.warn('[Element Warn][TableColumn]Selection column doesn\'t allow to set render-header function.');
  411. } else {
  412. value = column[prop] || value;
  413. }
  414. }
  415. column[prop] = prop === 'className' ? column[prop] + ' ' + value : value;
  416. }
  417. });
  418. // Deprecation warning for renderHeader property
  419. if (this.renderHeader) {
  420. console.warn('[Element Warn][TableColumn]Comparing to render-header, scoped-slot header is easier to use. We recommend users to use scoped-slot header.');
  421. }
  422. this.columnConfig = column;
  423. var renderCell = column.renderCell;
  424. var _self = this;
  425. if (type === 'expand') {
  426. owner.renderExpanded = function (h, data) {
  427. return _self.$scopedSlots.default ? _self.$scopedSlots.default(data) : _self.$slots.default;
  428. };
  429. column.renderCell = function (h, data) {
  430. return h(
  431. 'div',
  432. { 'class': 'cell' },
  433. [renderCell(h, data, this._renderProxy)]
  434. );
  435. };
  436. return;
  437. }
  438. column.renderCell = function (h, data) {
  439. if (_self.$scopedSlots.default) {
  440. renderCell = function renderCell() {
  441. return _self.$scopedSlots.default(data);
  442. };
  443. }
  444. if (!renderCell) {
  445. renderCell = DEFAULT_RENDER_CELL;
  446. }
  447. return _self.showOverflowTooltip || _self.showTooltipWhenOverflow ? h(
  448. 'div',
  449. { 'class': 'cell el-tooltip', style: { width: (data.column.realWidth || data.column.width) - 1 + 'px' } },
  450. [renderCell(h, data)]
  451. ) : h(
  452. 'div',
  453. { 'class': 'cell' },
  454. [renderCell(h, data)]
  455. );
  456. };
  457. },
  458. destroyed: function destroyed() {
  459. if (!this.$parent) return;
  460. var parent = this.$parent;
  461. this.owner.store.commit('removeColumn', this.columnConfig, this.isSubColumn ? parent.columnConfig : null);
  462. },
  463. watch: {
  464. label: function label(newVal) {
  465. if (this.columnConfig) {
  466. this.columnConfig.label = newVal;
  467. }
  468. },
  469. prop: function prop(newVal) {
  470. if (this.columnConfig) {
  471. this.columnConfig.property = newVal;
  472. }
  473. },
  474. property: function property(newVal) {
  475. if (this.columnConfig) {
  476. this.columnConfig.property = newVal;
  477. }
  478. },
  479. filters: function filters(newVal) {
  480. if (this.columnConfig) {
  481. this.columnConfig.filters = newVal;
  482. }
  483. },
  484. filterMultiple: function filterMultiple(newVal) {
  485. if (this.columnConfig) {
  486. this.columnConfig.filterMultiple = newVal;
  487. }
  488. },
  489. align: function align(newVal) {
  490. if (this.columnConfig) {
  491. this.columnConfig.align = newVal ? 'is-' + newVal : null;
  492. if (!this.headerAlign) {
  493. this.columnConfig.headerAlign = newVal ? 'is-' + newVal : null;
  494. }
  495. }
  496. },
  497. headerAlign: function headerAlign(newVal) {
  498. if (this.columnConfig) {
  499. this.columnConfig.headerAlign = 'is-' + (newVal ? newVal : this.align);
  500. }
  501. },
  502. width: function width(newVal) {
  503. if (this.columnConfig) {
  504. this.columnConfig.width = parseWidth(newVal);
  505. this.owner.store.scheduleLayout();
  506. }
  507. },
  508. minWidth: function minWidth(newVal) {
  509. if (this.columnConfig) {
  510. this.columnConfig.minWidth = parseMinWidth(newVal);
  511. this.owner.store.scheduleLayout();
  512. }
  513. },
  514. fixed: function fixed(newVal) {
  515. if (this.columnConfig) {
  516. this.columnConfig.fixed = newVal;
  517. this.owner.store.scheduleLayout(true);
  518. }
  519. },
  520. sortable: function sortable(newVal) {
  521. if (this.columnConfig) {
  522. this.columnConfig.sortable = newVal;
  523. }
  524. },
  525. index: function index(newVal) {
  526. if (this.columnConfig) {
  527. this.columnConfig.index = newVal;
  528. }
  529. },
  530. formatter: function formatter(newVal) {
  531. if (this.columnConfig) {
  532. this.columnConfig.formatter = newVal;
  533. }
  534. },
  535. className: function className(newVal) {
  536. if (this.columnConfig) {
  537. this.columnConfig.className = newVal;
  538. }
  539. },
  540. labelClassName: function labelClassName(newVal) {
  541. if (this.columnConfig) {
  542. this.columnConfig.labelClassName = newVal;
  543. }
  544. }
  545. },
  546. mounted: function mounted() {
  547. var _this2 = this;
  548. var owner = this.owner;
  549. var parent = this.columnOrTableParent;
  550. var columnIndex = void 0;
  551. if (!this.isSubColumn) {
  552. columnIndex = [].indexOf.call(parent.$refs.hiddenColumns.children, this.$el);
  553. } else {
  554. columnIndex = [].indexOf.call(parent.$el.children, this.$el);
  555. }
  556. if (this.$scopedSlots.header) {
  557. if (this.type === 'selection') {
  558. console.warn('[Element Warn][TableColumn]Selection column doesn\'t allow to set scoped-slot header.');
  559. } else {
  560. this.columnConfig.renderHeader = function (h, scope) {
  561. return _this2.$scopedSlots.header(scope);
  562. };
  563. }
  564. }
  565. owner.store.commit('insertColumn', this.columnConfig, columnIndex, this.isSubColumn ? parent.columnConfig : null);
  566. }
  567. };
  568. /***/ }),
  569. /***/ 2:
  570. /***/ (function(module, exports) {
  571. module.exports = require("element-ui/lib/utils/util");
  572. /***/ }),
  573. /***/ 25:
  574. /***/ (function(module, exports) {
  575. module.exports = require("element-ui/lib/tag");
  576. /***/ }),
  577. /***/ 9:
  578. /***/ (function(module, exports) {
  579. module.exports = require("element-ui/lib/utils/merge");
  580. /***/ })
  581. /******/ });