table-column.js 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699
  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, { enumerable: true, get: getter });
  41. /******/ }
  42. /******/ };
  43. /******/
  44. /******/ // define __esModule on exports
  45. /******/ __webpack_require__.r = function(exports) {
  46. /******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
  47. /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
  48. /******/ }
  49. /******/ Object.defineProperty(exports, '__esModule', { value: true });
  50. /******/ };
  51. /******/
  52. /******/ // create a fake namespace object
  53. /******/ // mode & 1: value is a module id, require it
  54. /******/ // mode & 2: merge all properties of value into the ns
  55. /******/ // mode & 4: return value when already ns object
  56. /******/ // mode & 8|1: behave like require
  57. /******/ __webpack_require__.t = function(value, mode) {
  58. /******/ if(mode & 1) value = __webpack_require__(value);
  59. /******/ if(mode & 8) return value;
  60. /******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
  61. /******/ var ns = Object.create(null);
  62. /******/ __webpack_require__.r(ns);
  63. /******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
  64. /******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
  65. /******/ return ns;
  66. /******/ };
  67. /******/
  68. /******/ // getDefaultExport function for compatibility with non-harmony modules
  69. /******/ __webpack_require__.n = function(module) {
  70. /******/ var getter = module && module.__esModule ?
  71. /******/ function getDefault() { return module['default']; } :
  72. /******/ function getModuleExports() { return module; };
  73. /******/ __webpack_require__.d(getter, 'a', getter);
  74. /******/ return getter;
  75. /******/ };
  76. /******/
  77. /******/ // Object.prototype.hasOwnProperty.call
  78. /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
  79. /******/
  80. /******/ // __webpack_public_path__
  81. /******/ __webpack_require__.p = "/dist/";
  82. /******/
  83. /******/
  84. /******/ // Load entry module and return exports
  85. /******/ return __webpack_require__(__webpack_require__.s = 118);
  86. /******/ })
  87. /************************************************************************/
  88. /******/ ({
  89. /***/ 118:
  90. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  91. "use strict";
  92. __webpack_require__.r(__webpack_exports__);
  93. // EXTERNAL MODULE: external "element-ui/lib/checkbox"
  94. var checkbox_ = __webpack_require__(16);
  95. var checkbox_default = /*#__PURE__*/__webpack_require__.n(checkbox_);
  96. // EXTERNAL MODULE: external "element-ui/lib/tag"
  97. var tag_ = __webpack_require__(26);
  98. var tag_default = /*#__PURE__*/__webpack_require__.n(tag_);
  99. // EXTERNAL MODULE: external "element-ui/lib/utils/merge"
  100. var merge_ = __webpack_require__(8);
  101. var merge_default = /*#__PURE__*/__webpack_require__.n(merge_);
  102. // EXTERNAL MODULE: external "element-ui/lib/utils/util"
  103. var util_ = __webpack_require__(4);
  104. // CONCATENATED MODULE: ./packages/table/src/table-column.js
  105. var columnIdSeed = 1;
  106. var defaults = {
  107. default: {
  108. order: ''
  109. },
  110. selection: {
  111. width: 48,
  112. minWidth: 48,
  113. realWidth: 48,
  114. order: '',
  115. className: 'el-table-column--selection'
  116. },
  117. expand: {
  118. width: 48,
  119. minWidth: 48,
  120. realWidth: 48,
  121. order: ''
  122. },
  123. index: {
  124. width: 48,
  125. minWidth: 48,
  126. realWidth: 48,
  127. order: ''
  128. }
  129. };
  130. var forced = {
  131. selection: {
  132. renderHeader: function renderHeader(h, _ref) {
  133. var store = _ref.store;
  134. return h('el-checkbox', {
  135. attrs: {
  136. disabled: store.states.data && store.states.data.length === 0,
  137. indeterminate: store.states.selection.length > 0 && !this.isAllSelected,
  138. value: this.isAllSelected },
  139. nativeOn: {
  140. 'click': this.toggleAllSelection
  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('el-checkbox', {
  150. nativeOn: {
  151. 'click': function click(event) {
  152. return event.stopPropagation();
  153. }
  154. },
  155. attrs: {
  156. value: store.isSelected(row),
  157. disabled: column.selectable ? !column.selectable.call(null, row, $index) : false
  158. },
  159. on: {
  160. 'input': function input() {
  161. store.commit('rowSelectedChanged', row);
  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('div', [i]);
  185. },
  186. sortable: false
  187. },
  188. expand: {
  189. renderHeader: function renderHeader(h, _ref5) {
  190. var column = _ref5.column;
  191. return column.label || '';
  192. },
  193. renderCell: function renderCell(h, _ref6, proxy) {
  194. var row = _ref6.row,
  195. store = _ref6.store;
  196. var expanded = store.states.expandRows.indexOf(row) > -1;
  197. return h(
  198. 'div',
  199. { 'class': 'el-table__expand-icon ' + (expanded ? 'el-table__expand-icon--expanded' : ''),
  200. on: {
  201. 'click': function click(e) {
  202. return proxy.handleExpandClick(row, e);
  203. }
  204. }
  205. },
  206. [h('i', { 'class': 'el-icon el-icon-arrow-right' })]
  207. );
  208. },
  209. sortable: false,
  210. resizable: false,
  211. className: 'el-table__expand-column'
  212. }
  213. };
  214. var table_column_getDefaultColumn = function getDefaultColumn(type, options) {
  215. var column = {};
  216. merge_default()(column, defaults[type || 'default']);
  217. for (var name in options) {
  218. if (options.hasOwnProperty(name)) {
  219. var value = options[name];
  220. if (typeof value !== 'undefined') {
  221. column[name] = value;
  222. }
  223. }
  224. }
  225. if (!column.minWidth) {
  226. column.minWidth = 80;
  227. }
  228. column.realWidth = column.width === undefined ? column.minWidth : column.width;
  229. return column;
  230. };
  231. var table_column_DEFAULT_RENDER_CELL = function DEFAULT_RENDER_CELL(h, _ref7) {
  232. var row = _ref7.row,
  233. column = _ref7.column,
  234. $index = _ref7.$index;
  235. var property = column.property;
  236. var value = property && Object(util_["getPropByPath"])(row, property).v;
  237. if (column && column.formatter) {
  238. return column.formatter(row, column, value, $index);
  239. }
  240. return value;
  241. };
  242. var parseWidth = function parseWidth(width) {
  243. if (width !== undefined) {
  244. width = parseInt(width, 10);
  245. if (isNaN(width)) {
  246. width = null;
  247. }
  248. }
  249. return width;
  250. };
  251. var parseMinWidth = function parseMinWidth(minWidth) {
  252. if (minWidth !== undefined) {
  253. minWidth = parseInt(minWidth, 10);
  254. if (isNaN(minWidth)) {
  255. minWidth = 80;
  256. }
  257. }
  258. return minWidth;
  259. };
  260. /* harmony default export */ var table_column = ({
  261. name: 'ElTableColumn',
  262. props: {
  263. type: {
  264. type: String,
  265. default: 'default'
  266. },
  267. label: String,
  268. className: String,
  269. labelClassName: String,
  270. property: String,
  271. prop: String,
  272. width: {},
  273. minWidth: {},
  274. renderHeader: Function,
  275. sortable: {
  276. type: [String, Boolean],
  277. default: false
  278. },
  279. sortMethod: Function,
  280. sortBy: [String, Function, Array],
  281. resizable: {
  282. type: Boolean,
  283. default: true
  284. },
  285. context: {},
  286. columnKey: String,
  287. align: String,
  288. headerAlign: String,
  289. showTooltipWhenOverflow: Boolean,
  290. showOverflowTooltip: Boolean,
  291. fixed: [Boolean, String],
  292. formatter: Function,
  293. selectable: Function,
  294. reserveSelection: Boolean,
  295. filterMethod: Function,
  296. filteredValue: Array,
  297. filters: Array,
  298. filterPlacement: String,
  299. filterMultiple: {
  300. type: Boolean,
  301. default: true
  302. },
  303. index: [Number, Function],
  304. sortOrders: {
  305. type: Array,
  306. default: function _default() {
  307. return ['ascending', 'descending', null];
  308. },
  309. validator: function validator(val) {
  310. return val.every(function (order) {
  311. return ['ascending', 'descending', null].indexOf(order) > -1;
  312. });
  313. }
  314. }
  315. },
  316. data: function data() {
  317. return {
  318. isSubColumn: false,
  319. columns: []
  320. };
  321. },
  322. beforeCreate: function beforeCreate() {
  323. this.row = {};
  324. this.column = {};
  325. this.$index = 0;
  326. },
  327. components: {
  328. ElCheckbox: checkbox_default.a,
  329. ElTag: tag_default.a
  330. },
  331. computed: {
  332. owner: function owner() {
  333. var parent = this.$parent;
  334. while (parent && !parent.tableId) {
  335. parent = parent.$parent;
  336. }
  337. return parent;
  338. },
  339. columnOrTableParent: function columnOrTableParent() {
  340. var parent = this.$parent;
  341. while (parent && !parent.tableId && !parent.columnId) {
  342. parent = parent.$parent;
  343. }
  344. return parent;
  345. }
  346. },
  347. created: function created() {
  348. var _this = this;
  349. var h = this.$createElement;
  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 = table_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. sortOrders: this.sortOrders
  396. });
  397. var source = forced[type] || {};
  398. Object.keys(source).forEach(function (prop) {
  399. var value = source[prop];
  400. if (value !== undefined) {
  401. if (prop === 'renderHeader') {
  402. if (type === 'selection' && column[prop]) {
  403. console.warn('[Element Warn][TableColumn]Selection column doesn\'t allow to set render-header function.');
  404. } else {
  405. value = column[prop] || value;
  406. }
  407. }
  408. column[prop] = prop === 'className' ? column[prop] + ' ' + value : value;
  409. }
  410. });
  411. // Deprecation warning for renderHeader property
  412. if (this.renderHeader) {
  413. console.warn('[Element Warn][TableColumn]Comparing to render-header, scoped-slot header is easier to use. We recommend users to use scoped-slot header.');
  414. }
  415. this.columnConfig = column;
  416. var renderCell = column.renderCell;
  417. var _self = this;
  418. if (type === 'expand') {
  419. owner.renderExpanded = function (h, data) {
  420. return _self.$scopedSlots.default ? _self.$scopedSlots.default(data) : _self.$slots.default;
  421. };
  422. column.renderCell = function (h, data) {
  423. return h(
  424. 'div',
  425. { 'class': 'cell' },
  426. [renderCell(h, data, this._renderProxy)]
  427. );
  428. };
  429. return;
  430. }
  431. column.renderCell = function (h, data) {
  432. if (_self.$scopedSlots.default) {
  433. renderCell = function renderCell() {
  434. return _self.$scopedSlots.default(data);
  435. };
  436. }
  437. if (!renderCell) {
  438. renderCell = table_column_DEFAULT_RENDER_CELL;
  439. }
  440. var children = [_self.renderTreeCell(data), renderCell(h, data)];
  441. return _self.showOverflowTooltip || _self.showTooltipWhenOverflow ? h(
  442. 'div',
  443. { 'class': 'cell el-tooltip', style: { width: (data.column.realWidth || data.column.width) - 1 + 'px' } },
  444. [children]
  445. ) : h(
  446. 'div',
  447. { 'class': 'cell' },
  448. [children]
  449. );
  450. };
  451. },
  452. destroyed: function destroyed() {
  453. if (!this.$parent) return;
  454. var parent = this.$parent;
  455. this.owner.store.commit('removeColumn', this.columnConfig, this.isSubColumn ? parent.columnConfig : null);
  456. },
  457. watch: {
  458. label: function label(newVal) {
  459. if (this.columnConfig) {
  460. this.columnConfig.label = newVal;
  461. }
  462. },
  463. prop: function prop(newVal) {
  464. if (this.columnConfig) {
  465. this.columnConfig.property = newVal;
  466. }
  467. },
  468. property: function property(newVal) {
  469. if (this.columnConfig) {
  470. this.columnConfig.property = newVal;
  471. }
  472. },
  473. filters: function filters(newVal) {
  474. if (this.columnConfig) {
  475. this.columnConfig.filters = newVal;
  476. }
  477. },
  478. filterMultiple: function filterMultiple(newVal) {
  479. if (this.columnConfig) {
  480. this.columnConfig.filterMultiple = newVal;
  481. }
  482. },
  483. align: function align(newVal) {
  484. if (this.columnConfig) {
  485. this.columnConfig.align = newVal ? 'is-' + newVal : null;
  486. if (!this.headerAlign) {
  487. this.columnConfig.headerAlign = newVal ? 'is-' + newVal : null;
  488. }
  489. }
  490. },
  491. headerAlign: function headerAlign(newVal) {
  492. if (this.columnConfig) {
  493. this.columnConfig.headerAlign = 'is-' + (newVal ? newVal : this.align);
  494. }
  495. },
  496. width: function width(newVal) {
  497. if (this.columnConfig) {
  498. this.columnConfig.width = parseWidth(newVal);
  499. this.owner.store.scheduleLayout();
  500. }
  501. },
  502. minWidth: function minWidth(newVal) {
  503. if (this.columnConfig) {
  504. this.columnConfig.minWidth = parseMinWidth(newVal);
  505. this.owner.store.scheduleLayout();
  506. }
  507. },
  508. fixed: function fixed(newVal) {
  509. if (this.columnConfig) {
  510. this.columnConfig.fixed = newVal;
  511. this.owner.store.scheduleLayout(true);
  512. }
  513. },
  514. sortable: function sortable(newVal) {
  515. if (this.columnConfig) {
  516. this.columnConfig.sortable = newVal;
  517. }
  518. },
  519. index: function index(newVal) {
  520. if (this.columnConfig) {
  521. this.columnConfig.index = newVal;
  522. }
  523. },
  524. formatter: function formatter(newVal) {
  525. if (this.columnConfig) {
  526. this.columnConfig.formatter = newVal;
  527. }
  528. },
  529. className: function className(newVal) {
  530. if (this.columnConfig) {
  531. this.columnConfig.className = newVal;
  532. }
  533. },
  534. labelClassName: function labelClassName(newVal) {
  535. if (this.columnConfig) {
  536. this.columnConfig.labelClassName = newVal;
  537. }
  538. }
  539. },
  540. methods: {
  541. renderTreeCell: function renderTreeCell(data) {
  542. var h = this.$createElement;
  543. if (!data.treeNode) return null;
  544. var ele = [];
  545. ele.push(h('span', { 'class': 'el-table__indent', style: { 'padding-left': data.treeNode.indent + 'px' } }));
  546. if (data.treeNode.hasChildren) {
  547. ele.push(h(
  548. 'div',
  549. { 'class': ['el-table__expand-icon', data.treeNode.expanded ? 'el-table__expand-icon--expanded' : ''],
  550. on: {
  551. 'click': this.handleTreeExpandIconClick.bind(this, data)
  552. }
  553. },
  554. [h('i', { 'class': 'el-icon el-icon-arrow-right' })]
  555. ));
  556. } else {
  557. ele.push(h('span', { 'class': 'el-table__placeholder' }));
  558. }
  559. return ele;
  560. },
  561. handleTreeExpandIconClick: function handleTreeExpandIconClick(data, e) {
  562. e.stopPropagation();
  563. if (data.store.states.lazy && !data.treeNode.loaded) {
  564. data.store.loadData(data.row, data.treeNode);
  565. } else {
  566. data.store.toggleTreeExpansion(data.treeNode.rowKey);
  567. }
  568. }
  569. },
  570. mounted: function mounted() {
  571. var _this2 = this;
  572. var owner = this.owner;
  573. var parent = this.columnOrTableParent;
  574. var columnIndex = void 0;
  575. if (!this.isSubColumn) {
  576. columnIndex = [].indexOf.call(parent.$refs.hiddenColumns.children, this.$el);
  577. } else {
  578. columnIndex = [].indexOf.call(parent.$el.children, this.$el);
  579. }
  580. if (this.$scopedSlots.header) {
  581. if (this.type === 'selection') {
  582. console.warn('[Element Warn][TableColumn]Selection column doesn\'t allow to set scoped-slot header.');
  583. } else {
  584. this.columnConfig.renderHeader = function (h, scope) {
  585. return _this2.$scopedSlots.header(scope);
  586. };
  587. }
  588. }
  589. owner.store.commit('insertColumn', this.columnConfig, columnIndex, this.isSubColumn ? parent.columnConfig : null);
  590. }
  591. });
  592. // CONCATENATED MODULE: ./packages/table-column/index.js
  593. /* istanbul ignore next */
  594. table_column.install = function (Vue) {
  595. Vue.component(table_column.name, table_column);
  596. };
  597. /* harmony default export */ var packages_table_column = __webpack_exports__["default"] = (table_column);
  598. /***/ }),
  599. /***/ 16:
  600. /***/ (function(module, exports) {
  601. module.exports = require("element-ui/lib/checkbox");
  602. /***/ }),
  603. /***/ 26:
  604. /***/ (function(module, exports) {
  605. module.exports = require("element-ui/lib/tag");
  606. /***/ }),
  607. /***/ 4:
  608. /***/ (function(module, exports) {
  609. module.exports = require("element-ui/lib/utils/util");
  610. /***/ }),
  611. /***/ 8:
  612. /***/ (function(module, exports) {
  613. module.exports = require("element-ui/lib/utils/merge");
  614. /***/ })
  615. /******/ });