element-sim 1.0.0 → 1.0.2

package/packages/table/src/table-column.js

@@ -1,319 +1,319 @@
-import { cellStarts, cellForced, defaultRenderCell, treeCellPrefix } from './config';
-import { mergeOptions, parseWidth, parseMinWidth, compose } from './util';
-import ElCheckbox from 'element-ui/packages/checkbox';
-
-let columnIdSeed = 1;
-
-export default {
-  name: 'ElTableColumn',
-
-  props: {
-    type: {
-      type: String,
-      default: 'default'
-    },
-    label: String,
-    className: String,
-    labelClassName: String,
-    property: String,
-    prop: String,
-    width: {},
-    minWidth: {},
-    renderHeader: Function,
-    sortable: {
-      type: [Boolean, String],
-      default: false
-    },
-    sortMethod: Function,
-    sortBy: [String, Function, Array],
-    resizable: {
-      type: Boolean,
-      default: true
-    },
-    columnKey: String,
-    align: String,
-    headerAlign: String,
-    showTooltipWhenOverflow: Boolean,
-    showOverflowTooltip: Boolean,
-    fixed: [Boolean, String],
-    formatter: Function,
-    selectable: Function,
-    reserveSelection: Boolean,
-    filterMethod: Function,
-    filteredValue: Array,
-    filters: Array,
-    filterPlacement: String,
-    filterMultiple: {
-      type: Boolean,
-      default: true
-    },
-    index: [Number, Function],
-    sortOrders: {
-      type: Array,
-      default() {
-        return ['ascending', 'descending', null];
-      },
-      validator(val) {
-        return val.every(order => ['ascending', 'descending', null].indexOf(order) > -1);
-      }
-    }
-  },
-
-  data() {
-    return {
-      isSubColumn: false,
-      columns: []
-    };
-  },
-
-  computed: {
-    owner() {
-      let parent = this.$parent;
-      while (parent && !parent.tableId) {
-        parent = parent.$parent;
-      }
-      return parent;
-    },
-
-    columnOrTableParent() {
-      let parent = this.$parent;
-      while (parent && !parent.tableId && !parent.columnId) {
-        parent = parent.$parent;
-      }
-      return parent;
-    },
-
-    realWidth() {
-      return parseWidth(this.width);
-    },
-
-    realMinWidth() {
-      return parseMinWidth(this.minWidth);
-    },
-
-    realAlign() {
-      return this.align ? 'is-' + this.align : null;
-    },
-
-    realHeaderAlign() {
-      return this.headerAlign ? 'is-' + this.headerAlign : this.realAlign;
-    }
-  },
-
-  methods: {
-    getPropsData(...props) {
-      return props.reduce((prev, cur) => {
-        if (Array.isArray(cur)) {
-          cur.forEach((key) => {
-            prev[key] = this[key];
-          });
-        }
-        return prev;
-      }, {});
-    },
-
-    getColumnElIndex(children, child) {
-      return [].indexOf.call(children, child);
-    },
-
-    setColumnWidth(column) {
-      if (this.realWidth) {
-        column.width = this.realWidth;
-      }
-      if (this.realMinWidth) {
-        column.minWidth = this.realMinWidth;
-      }
-      if (!column.minWidth) {
-        column.minWidth = 80;
-      }
-      column.realWidth = column.width === undefined ? column.minWidth : column.width;
-      return column;
-    },
-
-    setColumnForcedProps(column) {
-      // 对于特定类型的 column，某些属性不允许设置
-      const type = column.type;
-      const source = cellForced[type] || {};
-      Object.keys(source).forEach(prop => {
-        let value = source[prop];
-        if (value !== undefined) {
-          column[prop] = prop === 'className' ? `${column[prop]} ${value}` : value;
-        }
-      });
-      return column;
-    },
-
-    setColumnRenders(column) {
-      // renderHeader 属性不推荐使用。
-      if (this.renderHeader) {
-        console.warn('[Element Warn][TableColumn]Comparing to render-header, scoped-slot header is easier to use. We recommend users to use scoped-slot header.');
-      } else if (column.type !== 'selection') {
-        column.renderHeader = (h, scope) => {
-          const renderHeader = this.$scopedSlots.header;
-          return renderHeader ? renderHeader(scope) : column.label;
-        };
-      }
-
-      let originRenderCell = column.renderCell;
-      // TODO: 这里的实现调整
-      if (column.type === 'expand') {
-        // 对于展开行，renderCell 不允许配置的。在上一步中已经设置过，这里需要简单封装一下。
-        column.renderCell = (h, data) => (<div class="cell">
-          { originRenderCell(h, data) }
-        </div>);
-        this.owner.renderExpanded = (h, data) => {
-          return this.$scopedSlots.default
-            ? this.$scopedSlots.default(data)
-            : this.$slots.default;
-        };
-      } else {
-        originRenderCell = originRenderCell || defaultRenderCell;
-        // 对 renderCell 进行包装
-        column.renderCell = (h, data) => {
-          let children = null;
-          if (this.$scopedSlots.default) {
-            children = this.$scopedSlots.default(data);
-          } else {
-            children = originRenderCell(h, data);
-          }
-          const prefix = treeCellPrefix(h, data);
-          const props = {
-            class: 'cell',
-            style: {}
-          };
-          if (column.showOverflowTooltip) {
-            props.class += ' el-tooltip';
-            props.style = {width: (data.column.realWidth || data.column.width) - 1 + 'px'};
-          }
-          return (<div { ...props }>
-            { prefix }
-            { children }
-          </div>);
-        };
-      }
-      return column;
-    },
-
-    registerNormalWatchers() {
-      const props = ['label', 'property', 'filters', 'filterMultiple', 'sortable', 'index', 'formatter', 'className', 'labelClassName', 'showOverflowTooltip'];
-      // 一些属性具有别名
-      const aliases = {
-        prop: 'property',
-        realAlign: 'align',
-        realHeaderAlign: 'headerAlign',
-        realWidth: 'width'
-      };
-      const allAliases = props.reduce((prev, cur) => {
-        prev[cur] = cur;
-        return prev;
-      }, aliases);
-
-      Object.keys(allAliases).forEach(key => {
-        const columnKey = aliases[key];
-
-        this.$watch(key, (newVal) => {
-          this.columnConfig[columnKey] = newVal;
-        });
-      });
-    },
-
-    registerComplexWatchers() {
-      const props = ['fixed'];
-      const aliases = {
-        realWidth: 'width',
-        realMinWidth: 'minWidth'
-      };
-      const allAliases = props.reduce((prev, cur) => {
-        prev[cur] = cur;
-        return prev;
-      }, aliases);
-
-      Object.keys(allAliases).forEach(key => {
-        const columnKey = aliases[key];
-
-        this.$watch(key, (newVal) => {
-          this.columnConfig[columnKey] = newVal;
-          const updateColumns = columnKey === 'fixed';
-          this.owner.store.scheduleLayout(updateColumns);
-        });
-      });
-    }
-  },
-
-  components: {
-    ElCheckbox
-  },
-
-  beforeCreate() {
-    this.row = {};
-    this.column = {};
-    this.$index = 0;
-    this.columnId = '';
-  },
-
-  created() {
-    const parent = this.columnOrTableParent;
-    this.isSubColumn = this.owner !== parent;
-    this.columnId = (parent.tableId || parent.columnId) + '_column_' + columnIdSeed++;
-
-    const type = this.type || 'default';
-    const sortable = this.sortable === '' ? true : this.sortable;
-    const defaults = {
-      ...cellStarts[type],
-      id: this.columnId,
-      type: type,
-      property: this.prop || this.property,
-      align: this.realAlign,
-      headerAlign: this.realHeaderAlign,
-      showOverflowTooltip: this.showOverflowTooltip || this.showTooltipWhenOverflow,
-      // filter 相关属性
-      filterable: this.filters || this.filterMethod,
-      filteredValue: [],
-      filterPlacement: '',
-      isColumnGroup: false,
-      filterOpened: false,
-      // sort 相关属性
-      sortable: sortable,
-      // index 列
-      index: this.index
-    };
-
-    const basicProps = ['columnKey', 'label', 'className', 'labelClassName', 'type', 'renderHeader', 'formatter', 'fixed', 'resizable'];
-    const sortProps = ['sortMethod', 'sortBy', 'sortOrders'];
-    const selectProps = ['selectable', 'reserveSelection'];
-    const filterProps = ['filterMethod', 'filters', 'filterMultiple', 'filterOpened', 'filteredValue', 'filterPlacement'];
-
-    let column = this.getPropsData(basicProps, sortProps, selectProps, filterProps);
-    column = mergeOptions(defaults, column);
-
-    // 注意 compose 中函数执行的顺序是从右到左
-    const chains = compose(this.setColumnRenders, this.setColumnWidth, this.setColumnForcedProps);
-    column = chains(column);
-
-    this.columnConfig = column;
-
-    // 注册 watcher
-    this.registerNormalWatchers();
-    this.registerComplexWatchers();
-  },
-
-  mounted() {
-    const owner = this.owner;
-    const parent = this.columnOrTableParent;
-    const children = this.isSubColumn ? parent.$el.children : parent.$refs.hiddenColumns.children;
-    const columnIndex = this.getColumnElIndex(children, this.$el);
-
-    owner.store.commit('insertColumn', this.columnConfig, columnIndex, this.isSubColumn ? parent.columnConfig : null);
-  },
-
-  destroyed() {
-    if (!this.$parent) return;
-    const parent = this.$parent;
-    this.owner.store.commit('removeColumn', this.columnConfig, this.isSubColumn ? parent.columnConfig : null);
-  },
-
-  render(h) {
-    // slots 也要渲染，需要计算合并表头
-    return h('div', this.$slots.default);
-  }
-};
+import { cellStarts, cellForced, defaultRenderCell, treeCellPrefix } from './config';
+import { mergeOptions, parseWidth, parseMinWidth, compose } from './util';
+import ElCheckbox from 'element-sim/packages/checkbox';
+
+let columnIdSeed = 1;
+
+export default {
+  name: 'ElTableColumn',
+
+  props: {
+    type: {
+      type: String,
+      default: 'default'
+    },
+    label: String,
+    className: String,
+    labelClassName: String,
+    property: String,
+    prop: String,
+    width: {},
+    minWidth: {},
+    renderHeader: Function,
+    sortable: {
+      type: [Boolean, String],
+      default: false
+    },
+    sortMethod: Function,
+    sortBy: [String, Function, Array],
+    resizable: {
+      type: Boolean,
+      default: true
+    },
+    columnKey: String,
+    align: String,
+    headerAlign: String,
+    showTooltipWhenOverflow: Boolean,
+    showOverflowTooltip: Boolean,
+    fixed: [Boolean, String],
+    formatter: Function,
+    selectable: Function,
+    reserveSelection: Boolean,
+    filterMethod: Function,
+    filteredValue: Array,
+    filters: Array,
+    filterPlacement: String,
+    filterMultiple: {
+      type: Boolean,
+      default: true
+    },
+    index: [Number, Function],
+    sortOrders: {
+      type: Array,
+      default() {
+        return ['ascending', 'descending', null];
+      },
+      validator(val) {
+        return val.every(order => ['ascending', 'descending', null].indexOf(order) > -1);
+      }
+    }
+  },
+
+  data() {
+    return {
+      isSubColumn: false,
+      columns: []
+    };
+  },
+
+  computed: {
+    owner() {
+      let parent = this.$parent;
+      while (parent && !parent.tableId) {
+        parent = parent.$parent;
+      }
+      return parent;
+    },
+
+    columnOrTableParent() {
+      let parent = this.$parent;
+      while (parent && !parent.tableId && !parent.columnId) {
+        parent = parent.$parent;
+      }
+      return parent;
+    },
+
+    realWidth() {
+      return parseWidth(this.width);
+    },
+
+    realMinWidth() {
+      return parseMinWidth(this.minWidth);
+    },
+
+    realAlign() {
+      return this.align ? 'is-' + this.align : null;
+    },
+
+    realHeaderAlign() {
+      return this.headerAlign ? 'is-' + this.headerAlign : this.realAlign;
+    }
+  },
+
+  methods: {
+    getPropsData(...props) {
+      return props.reduce((prev, cur) => {
+        if (Array.isArray(cur)) {
+          cur.forEach((key) => {
+            prev[key] = this[key];
+          });
+        }
+        return prev;
+      }, {});
+    },
+
+    getColumnElIndex(children, child) {
+      return [].indexOf.call(children, child);
+    },
+
+    setColumnWidth(column) {
+      if (this.realWidth) {
+        column.width = this.realWidth;
+      }
+      if (this.realMinWidth) {
+        column.minWidth = this.realMinWidth;
+      }
+      if (!column.minWidth) {
+        column.minWidth = 80;
+      }
+      column.realWidth = column.width === undefined ? column.minWidth : column.width;
+      return column;
+    },
+
+    setColumnForcedProps(column) {
+      // 对于特定类型的 column，某些属性不允许设置
+      const type = column.type;
+      const source = cellForced[type] || {};
+      Object.keys(source).forEach(prop => {
+        let value = source[prop];
+        if (value !== undefined) {
+          column[prop] = prop === 'className' ? `${column[prop]} ${value}` : value;
+        }
+      });
+      return column;
+    },
+
+    setColumnRenders(column) {
+      // renderHeader 属性不推荐使用。
+      if (this.renderHeader) {
+        console.warn('[Element Warn][TableColumn]Comparing to render-header, scoped-slot header is easier to use. We recommend users to use scoped-slot header.');
+      } else if (column.type !== 'selection') {
+        column.renderHeader = (h, scope) => {
+          const renderHeader = this.$scopedSlots.header;
+          return renderHeader ? renderHeader(scope) : column.label;
+        };
+      }
+
+      let originRenderCell = column.renderCell;
+      // TODO: 这里的实现调整
+      if (column.type === 'expand') {
+        // 对于展开行，renderCell 不允许配置的。在上一步中已经设置过，这里需要简单封装一下。
+        column.renderCell = (h, data) => (<div class="cell">
+          { originRenderCell(h, data) }
+        </div>);
+        this.owner.renderExpanded = (h, data) => {
+          return this.$scopedSlots.default
+            ? this.$scopedSlots.default(data)
+            : this.$slots.default;
+        };
+      } else {
+        originRenderCell = originRenderCell || defaultRenderCell;
+        // 对 renderCell 进行包装
+        column.renderCell = (h, data) => {
+          let children = null;
+          if (this.$scopedSlots.default) {
+            children = this.$scopedSlots.default(data);
+          } else {
+            children = originRenderCell(h, data);
+          }
+          const prefix = treeCellPrefix(h, data);
+          const props = {
+            class: 'cell',
+            style: {}
+          };
+          if (column.showOverflowTooltip) {
+            props.class += ' el-tooltip';
+            props.style = {width: (data.column.realWidth || data.column.width) - 1 + 'px'};
+          }
+          return (<div { ...props }>
+            { prefix }
+            { children }
+          </div>);
+        };
+      }
+      return column;
+    },
+
+    registerNormalWatchers() {
+      const props = ['label', 'property', 'filters', 'filterMultiple', 'sortable', 'index', 'formatter', 'className', 'labelClassName', 'showOverflowTooltip'];
+      // 一些属性具有别名
+      const aliases = {
+        prop: 'property',
+        realAlign: 'align',
+        realHeaderAlign: 'headerAlign',
+        realWidth: 'width'
+      };
+      const allAliases = props.reduce((prev, cur) => {
+        prev[cur] = cur;
+        return prev;
+      }, aliases);
+
+      Object.keys(allAliases).forEach(key => {
+        const columnKey = aliases[key];
+
+        this.$watch(key, (newVal) => {
+          this.columnConfig[columnKey] = newVal;
+        });
+      });
+    },
+
+    registerComplexWatchers() {
+      const props = ['fixed'];
+      const aliases = {
+        realWidth: 'width',
+        realMinWidth: 'minWidth'
+      };
+      const allAliases = props.reduce((prev, cur) => {
+        prev[cur] = cur;
+        return prev;
+      }, aliases);
+
+      Object.keys(allAliases).forEach(key => {
+        const columnKey = aliases[key];
+
+        this.$watch(key, (newVal) => {
+          this.columnConfig[columnKey] = newVal;
+          const updateColumns = columnKey === 'fixed';
+          this.owner.store.scheduleLayout(updateColumns);
+        });
+      });
+    }
+  },
+
+  components: {
+    ElCheckbox
+  },
+
+  beforeCreate() {
+    this.row = {};
+    this.column = {};
+    this.$index = 0;
+    this.columnId = '';
+  },
+
+  created() {
+    const parent = this.columnOrTableParent;
+    this.isSubColumn = this.owner !== parent;
+    this.columnId = (parent.tableId || parent.columnId) + '_column_' + columnIdSeed++;
+
+    const type = this.type || 'default';
+    const sortable = this.sortable === '' ? true : this.sortable;
+    const defaults = {
+      ...cellStarts[type],
+      id: this.columnId,
+      type: type,
+      property: this.prop || this.property,
+      align: this.realAlign,
+      headerAlign: this.realHeaderAlign,
+      showOverflowTooltip: this.showOverflowTooltip || this.showTooltipWhenOverflow,
+      // filter 相关属性
+      filterable: this.filters || this.filterMethod,
+      filteredValue: [],
+      filterPlacement: '',
+      isColumnGroup: false,
+      filterOpened: false,
+      // sort 相关属性
+      sortable: sortable,
+      // index 列
+      index: this.index
+    };
+
+    const basicProps = ['columnKey', 'label', 'className', 'labelClassName', 'type', 'renderHeader', 'formatter', 'fixed', 'resizable'];
+    const sortProps = ['sortMethod', 'sortBy', 'sortOrders'];
+    const selectProps = ['selectable', 'reserveSelection'];
+    const filterProps = ['filterMethod', 'filters', 'filterMultiple', 'filterOpened', 'filteredValue', 'filterPlacement'];
+
+    let column = this.getPropsData(basicProps, sortProps, selectProps, filterProps);
+    column = mergeOptions(defaults, column);
+
+    // 注意 compose 中函数执行的顺序是从右到左
+    const chains = compose(this.setColumnRenders, this.setColumnWidth, this.setColumnForcedProps);
+    column = chains(column);
+
+    this.columnConfig = column;
+
+    // 注册 watcher
+    this.registerNormalWatchers();
+    this.registerComplexWatchers();
+  },
+
+  mounted() {
+    const owner = this.owner;
+    const parent = this.columnOrTableParent;
+    const children = this.isSubColumn ? parent.$el.children : parent.$refs.hiddenColumns.children;
+    const columnIndex = this.getColumnElIndex(children, this.$el);
+
+    owner.store.commit('insertColumn', this.columnConfig, columnIndex, this.isSubColumn ? parent.columnConfig : null);
+  },
+
+  destroyed() {
+    if (!this.$parent) return;
+    const parent = this.$parent;
+    this.owner.store.commit('removeColumn', this.columnConfig, this.isSubColumn ? parent.columnConfig : null);
+  },
+
+  render(h) {
+    // slots 也要渲染，需要计算合并表头
+    return h('div', this.$slots.default);
+  }
+};