table-column.js 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602
  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 = 197);
  65. /******/ })
  66. /************************************************************************/
  67. /******/ ({
  68. /***/ 16:
  69. /***/ (function(module, exports) {
  70. module.exports = require("element-ui/lib/checkbox");
  71. /***/ }),
  72. /***/ 197:
  73. /***/ (function(module, exports, __webpack_require__) {
  74. module.exports = __webpack_require__(198);
  75. /***/ }),
  76. /***/ 198:
  77. /***/ (function(module, exports, __webpack_require__) {
  78. "use strict";
  79. exports.__esModule = true;
  80. var _tableColumn = __webpack_require__(199);
  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. /***/ 199:
  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__(24);
  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) {
  129. return h(
  130. 'el-checkbox',
  131. {
  132. nativeOn: {
  133. 'click': this.toggleAllSelection
  134. },
  135. attrs: {
  136. value: this.isAllSelected }
  137. },
  138. []
  139. );
  140. },
  141. renderCell: function renderCell(h, _ref) {
  142. var row = _ref.row,
  143. column = _ref.column,
  144. store = _ref.store,
  145. $index = _ref.$index;
  146. return h(
  147. 'el-checkbox',
  148. {
  149. attrs: {
  150. value: store.isSelected(row),
  151. disabled: column.selectable ? !column.selectable.call(null, row, $index) : false
  152. },
  153. on: {
  154. 'input': function input() {
  155. store.commit('rowSelectedChanged', row);
  156. }
  157. }
  158. },
  159. []
  160. );
  161. },
  162. sortable: false,
  163. resizable: false
  164. },
  165. index: {
  166. renderHeader: function renderHeader(h, _ref2) {
  167. var column = _ref2.column;
  168. return column.label || '#';
  169. },
  170. renderCell: function renderCell(h, _ref3) {
  171. var $index = _ref3.$index,
  172. column = _ref3.column;
  173. var i = $index + 1;
  174. var index = column.index;
  175. if (typeof index === 'number') {
  176. i = $index + index;
  177. } else if (typeof index === 'function') {
  178. i = index($index);
  179. }
  180. return h(
  181. 'div',
  182. null,
  183. [i]
  184. );
  185. },
  186. sortable: false
  187. },
  188. expand: {
  189. renderHeader: function renderHeader(h, _ref4) {
  190. var column = _ref4.column;
  191. return column.label || '';
  192. },
  193. renderCell: function renderCell(h, _ref5, proxy) {
  194. var row = _ref5.row,
  195. store = _ref5.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() {
  202. return proxy.handleExpandClick(row);
  203. }
  204. }
  205. },
  206. [h(
  207. 'i',
  208. { 'class': 'el-icon el-icon-arrow-right' },
  209. []
  210. )]
  211. );
  212. },
  213. sortable: false,
  214. resizable: false,
  215. className: 'el-table__expand-column'
  216. }
  217. };
  218. var getDefaultColumn = function getDefaultColumn(type, options) {
  219. var column = {};
  220. (0, _merge2.default)(column, defaults[type || 'default']);
  221. for (var name in options) {
  222. if (options.hasOwnProperty(name)) {
  223. var value = options[name];
  224. if (typeof value !== 'undefined') {
  225. column[name] = value;
  226. }
  227. }
  228. }
  229. if (!column.minWidth) {
  230. column.minWidth = 80;
  231. }
  232. column.realWidth = column.width || column.minWidth;
  233. return column;
  234. };
  235. var DEFAULT_RENDER_CELL = function DEFAULT_RENDER_CELL(h, _ref6) {
  236. var row = _ref6.row,
  237. column = _ref6.column;
  238. var property = column.property;
  239. var value = property && (0, _util.getPropByPath)(row, property).v;
  240. if (column && column.formatter) {
  241. return column.formatter(row, column, value);
  242. }
  243. return value;
  244. };
  245. exports.default = {
  246. name: 'ElTableColumn',
  247. props: {
  248. type: {
  249. type: String,
  250. default: 'default'
  251. },
  252. label: String,
  253. className: String,
  254. labelClassName: String,
  255. property: String,
  256. prop: String,
  257. width: {},
  258. minWidth: {},
  259. renderHeader: Function,
  260. sortable: {
  261. type: [String, Boolean],
  262. default: false
  263. },
  264. sortMethod: Function,
  265. sortBy: [String, Function, Array],
  266. resizable: {
  267. type: Boolean,
  268. default: true
  269. },
  270. context: {},
  271. columnKey: String,
  272. align: String,
  273. headerAlign: String,
  274. showTooltipWhenOverflow: Boolean,
  275. showOverflowTooltip: Boolean,
  276. fixed: [Boolean, String],
  277. formatter: Function,
  278. selectable: Function,
  279. reserveSelection: Boolean,
  280. filterMethod: Function,
  281. filteredValue: Array,
  282. filters: Array,
  283. filterPlacement: String,
  284. filterMultiple: {
  285. type: Boolean,
  286. default: true
  287. },
  288. index: [Number, Function]
  289. },
  290. data: function data() {
  291. return {
  292. isSubColumn: false,
  293. columns: []
  294. };
  295. },
  296. beforeCreate: function beforeCreate() {
  297. this.row = {};
  298. this.column = {};
  299. this.$index = 0;
  300. },
  301. components: {
  302. ElCheckbox: _checkbox2.default,
  303. ElTag: _tag2.default
  304. },
  305. computed: {
  306. owner: function owner() {
  307. var parent = this.$parent;
  308. while (parent && !parent.tableId) {
  309. parent = parent.$parent;
  310. }
  311. return parent;
  312. },
  313. columnOrTableParent: function columnOrTableParent() {
  314. var parent = this.$parent;
  315. while (parent && !parent.tableId && !parent.columnId) {
  316. parent = parent.$parent;
  317. }
  318. return parent;
  319. }
  320. },
  321. created: function created() {
  322. var _this = this;
  323. this.customRender = this.$options.render;
  324. this.$options.render = function (h) {
  325. return h('div', _this.$slots.default);
  326. };
  327. var parent = this.columnOrTableParent;
  328. var owner = this.owner;
  329. this.isSubColumn = owner !== parent;
  330. this.columnId = (parent.tableId || parent.columnId + '_') + 'column_' + columnIdSeed++;
  331. var type = this.type;
  332. var width = this.width;
  333. if (width !== undefined) {
  334. width = parseInt(width, 10);
  335. if (isNaN(width)) {
  336. width = null;
  337. }
  338. }
  339. var minWidth = this.minWidth;
  340. if (minWidth !== undefined) {
  341. minWidth = parseInt(minWidth, 10);
  342. if (isNaN(minWidth)) {
  343. minWidth = 80;
  344. }
  345. }
  346. var isColumnGroup = false;
  347. var column = getDefaultColumn(type, {
  348. id: this.columnId,
  349. columnKey: this.columnKey,
  350. label: this.label,
  351. className: this.className,
  352. labelClassName: this.labelClassName,
  353. property: this.prop || this.property,
  354. type: type,
  355. renderCell: null,
  356. renderHeader: this.renderHeader,
  357. minWidth: minWidth,
  358. width: width,
  359. isColumnGroup: isColumnGroup,
  360. context: this.context,
  361. align: this.align ? 'is-' + this.align : null,
  362. headerAlign: this.headerAlign ? 'is-' + this.headerAlign : this.align ? 'is-' + this.align : null,
  363. sortable: this.sortable === '' ? true : this.sortable,
  364. sortMethod: this.sortMethod,
  365. sortBy: this.sortBy,
  366. resizable: this.resizable,
  367. showOverflowTooltip: this.showOverflowTooltip || this.showTooltipWhenOverflow,
  368. formatter: this.formatter,
  369. selectable: this.selectable,
  370. reserveSelection: this.reserveSelection,
  371. fixed: this.fixed === '' ? true : this.fixed,
  372. filterMethod: this.filterMethod,
  373. filters: this.filters,
  374. filterable: this.filters || this.filterMethod,
  375. filterMultiple: this.filterMultiple,
  376. filterOpened: false,
  377. filteredValue: this.filteredValue || [],
  378. filterPlacement: this.filterPlacement || '',
  379. index: this.index
  380. });
  381. (0, _merge2.default)(column, forced[type] || {});
  382. this.columnConfig = column;
  383. var renderCell = column.renderCell;
  384. var _self = this;
  385. if (type === 'expand') {
  386. owner.renderExpanded = function (h, data) {
  387. return _self.$scopedSlots.default ? _self.$scopedSlots.default(data) : _self.$slots.default;
  388. };
  389. column.renderCell = function (h, data) {
  390. return h(
  391. 'div',
  392. { 'class': 'cell' },
  393. [renderCell(h, data, this._renderProxy)]
  394. );
  395. };
  396. return;
  397. }
  398. column.renderCell = function (h, data) {
  399. if (_self.$scopedSlots.default) {
  400. renderCell = function renderCell() {
  401. return _self.$scopedSlots.default(data);
  402. };
  403. }
  404. if (!renderCell) {
  405. renderCell = DEFAULT_RENDER_CELL;
  406. }
  407. return _self.showOverflowTooltip || _self.showTooltipWhenOverflow ? h(
  408. 'div',
  409. { 'class': 'cell el-tooltip', style: 'width:' + (data.column.realWidth || data.column.width) + 'px' },
  410. [renderCell(h, data)]
  411. ) : h(
  412. 'div',
  413. { 'class': 'cell' },
  414. [renderCell(h, data)]
  415. );
  416. };
  417. },
  418. destroyed: function destroyed() {
  419. if (!this.$parent) return;
  420. this.owner.store.commit('removeColumn', this.columnConfig);
  421. },
  422. watch: {
  423. label: function label(newVal) {
  424. if (this.columnConfig) {
  425. this.columnConfig.label = newVal;
  426. }
  427. },
  428. prop: function prop(newVal) {
  429. if (this.columnConfig) {
  430. this.columnConfig.property = newVal;
  431. }
  432. },
  433. property: function property(newVal) {
  434. if (this.columnConfig) {
  435. this.columnConfig.property = newVal;
  436. }
  437. },
  438. filters: function filters(newVal) {
  439. if (this.columnConfig) {
  440. this.columnConfig.filters = newVal;
  441. }
  442. },
  443. filterMultiple: function filterMultiple(newVal) {
  444. if (this.columnConfig) {
  445. this.columnConfig.filterMultiple = newVal;
  446. }
  447. },
  448. align: function align(newVal) {
  449. if (this.columnConfig) {
  450. this.columnConfig.align = newVal ? 'is-' + newVal : null;
  451. if (!this.headerAlign) {
  452. this.columnConfig.headerAlign = newVal ? 'is-' + newVal : null;
  453. }
  454. }
  455. },
  456. headerAlign: function headerAlign(newVal) {
  457. if (this.columnConfig) {
  458. this.columnConfig.headerAlign = 'is-' + (newVal ? newVal : this.align);
  459. }
  460. },
  461. width: function width(newVal) {
  462. if (this.columnConfig) {
  463. this.columnConfig.width = newVal;
  464. this.owner.store.scheduleLayout();
  465. }
  466. },
  467. minWidth: function minWidth(newVal) {
  468. if (this.columnConfig) {
  469. this.columnConfig.minWidth = newVal;
  470. this.owner.store.scheduleLayout();
  471. }
  472. },
  473. fixed: function fixed(newVal) {
  474. if (this.columnConfig) {
  475. this.columnConfig.fixed = newVal;
  476. this.owner.store.scheduleLayout();
  477. }
  478. },
  479. sortable: function sortable(newVal) {
  480. if (this.columnConfig) {
  481. this.columnConfig.sortable = newVal;
  482. }
  483. },
  484. index: function index(newVal) {
  485. if (this.columnConfig) {
  486. this.columnConfig.index = newVal;
  487. }
  488. }
  489. },
  490. mounted: function mounted() {
  491. var owner = this.owner;
  492. var parent = this.columnOrTableParent;
  493. var columnIndex = void 0;
  494. if (!this.isSubColumn) {
  495. columnIndex = [].indexOf.call(parent.$refs.hiddenColumns.children, this.$el);
  496. } else {
  497. columnIndex = [].indexOf.call(parent.$el.children, this.$el);
  498. }
  499. owner.store.commit('insertColumn', this.columnConfig, columnIndex, this.isSubColumn ? parent.columnConfig : null);
  500. }
  501. };
  502. /***/ }),
  503. /***/ 24:
  504. /***/ (function(module, exports) {
  505. module.exports = require("element-ui/lib/tag");
  506. /***/ }),
  507. /***/ 3:
  508. /***/ (function(module, exports) {
  509. module.exports = require("element-ui/lib/utils/util");
  510. /***/ }),
  511. /***/ 9:
  512. /***/ (function(module, exports) {
  513. module.exports = require("element-ui/lib/utils/merge");
  514. /***/ })
  515. /******/ });