Cascader: refactor and add multiple mode. (#15611)

components.json

@@ -76,5 +76,6 @@
   "calendar": "./packages/calendar/index.js",
   "backtop": "./packages/backtop/index.js",
   "infiniteScroll": "./packages/infiniteScroll/index.js",
-  "page-header": "./packages/page-header/index.js"
+  "page-header": "./packages/page-header/index.js",
+  "cascader-panel": "./packages/cascader-panel/index.js"
 }

packages/cascader-panel/index.js

+import CascaderPanel from './src/cascader-panel';
+
+/* istanbul ignore next */
+CascaderPanel.install = function(Vue) {
+  Vue.component(CascaderPanel.name, CascaderPanel);
+};
+
+export default CascaderPanel;

packages/cascader-panel/src/cascader-menu.vue

+<script>
+import ElScrollbar from 'element-ui/packages/scrollbar';
+import CascaderNode from './cascader-node.vue';
+import Locale from 'element-ui/src/mixins/locale';
+import { generateId } from 'element-ui/src/utils/util';
+
+export default {
+  name: 'ElCascaderMenu',
+
+  mixins: [Locale],
+
+  inject: ['panel'],
+
+  components: {
+    ElScrollbar,
+    CascaderNode
+  },
+
+  props: {
+    nodes: {
+      type: Array,
+      required: true
+    },
+    index: Number
+  },
+
+  data() {
+    return {
+      activeNode: null,
+      hoverTimer: null,
+      id: generateId()
+    };
+  },
+
+  computed: {
+    isEmpty() {
+      return !this.nodes.length;
+    },
+    menuId() {
+      return `cascader-menu-${this.id}-${this.index}`;
+    }
+  },
+
+  methods: {
+    handleExpand(e) {
+      this.activeNode = e.target;
+    },
+    handleMouseMove(e) {
+      const { activeNode, hoverTimer } = this;
+      const { hoverZone } = this.$refs;
+
+      if (!activeNode || !hoverZone) return;
+
+      if (activeNode.contains(e.target)) {
+        clearTimeout(hoverTimer);
+
+        const { left } = this.$el.getBoundingClientRect();
+        const startX = e.clientX - left;
+        const { offsetWidth, offsetHeight } = this.$el;
+        const top = activeNode.offsetTop;
+        const bottom = top + activeNode.offsetHeight;
+
+        hoverZone.innerHTML = `
+          <path style="pointer-events: auto;" fill="transparent" d="M${startX} ${top} L${offsetWidth} 0 V${top} Z" />
+          <path style="pointer-events: auto;" fill="transparent" d="M${startX} ${bottom} L${offsetWidth} ${offsetHeight} V${bottom} Z" />
+        `;
+      } else if (!hoverTimer) {
+        this.hoverTimer = setTimeout(this.clearHoverZone, this.panel.config.hoverThreshold);
+      }
+    },
+    clearHoverZone() {
+      const { hoverZone } = this.$refs;
+      if (!hoverZone) return;
+      hoverZone.innerHTML = '';
+    },
+
+    renderEmptyText(h) {
+      return (
+        <div class="el-cascader-menu__empty-text">{ this.t('el.cascader.noData') }</div>
+      );
+    },
+    renderNodeList(h) {
+      const { menuId } = this;
+      const { isHoverMenu } = this.panel;
+      const events = { on: {} };
+
+      if (isHoverMenu) {
+        events.on.expand = this.handleExpand;
+      }
+
+      const nodes = this.nodes.map((node, index) => {
+        const { hasChildren } = node;
+        return (
+          <cascader-node
+            key={ node.uid }
+            node={ node }
+            node-id={ `${menuId}-${index}` }
+            aria-haspopup={ hasChildren }
+            aria-owns = { hasChildren ? menuId : null }
+            { ...events }></cascader-node>
+        );
+      });
+
+      return [
+        ...nodes,
+        isHoverMenu ? <svg ref='hoverZone' class='el-cascader-menu__hover-zone'></svg> : null
+      ];
+    }
+  },
+
+  render(h) {
+    const { isEmpty, menuId } = this;
+    const events = { nativeOn: {} };
+
+    // optimize hover to expand experience (#8010)
+    if (this.panel.isHoverMenu) {
+      events.nativeOn.mousemove = this.handleMouseMove;
+      // events.nativeOn.mouseleave = this.clearHoverZone;
+    }
+
+    return (
+      <el-scrollbar
+        tag="ul"
+        role="menu"
+        id={ menuId }
+        class="el-cascader-menu"
+        wrap-class="el-cascader-menu__wrap"
+        view-class={{
+          'el-cascader-menu__list': true,
+          'is-empty': isEmpty
+        }}
+        { ...events }>
+        { isEmpty ? this.renderEmptyText(h) : this.renderNodeList(h) }
+      </el-scrollbar>
+    );
+  }
+};
+</script>

packages/cascader-panel/src/cascader-node.vue

+<script>
+  import ElCheckbox from 'element-ui/packages/checkbox';
+  import ElRadio from 'element-ui/packages/radio';
+  import { isEqual } from 'element-ui/src/utils/util';
+
+  const stopPropagation = e => e.stopPropagation();
+
+  export default {
+    inject: ['panel'],
+
+    components: {
+      ElCheckbox,
+      ElRadio
+    },
+
+    props: {
+      node: {
+        required: true
+      },
+      nodeId: String
+    },
+
+    computed: {
+      config() {
+        return this.panel.config;
+      },
+      isLeaf() {
+        return this.node.isLeaf;
+      },
+      isDisabled() {
+        return this.node.isDisabled;
+      },
+      checkedValue() {
+        return this.panel.checkedValue;
+      },
+      isChecked() {
+        return this.node.isSameNode(this.checkedValue);
+      },
+      inActivePath() {
+        return this.isInPath(this.panel.activePath);
+      },
+      inCheckedPath() {
+        if (!this.config.checkStrictly) return false;
+
+        return this.panel.checkedNodePaths
+          .some(checkedPath => this.isInPath(checkedPath));
+      },
+      value() {
+        return this.node.getValueByOption();
+      }
+    },
+
+    methods: {
+      handleExpand() {
+        const { panel, node, isDisabled, config } = this;
+        const { multiple, checkStrictly } = config;
+
+        if (!checkStrictly && isDisabled || node.loading) return;
+
+        if (config.lazy && !node.loaded) {
+          panel.lazyLoad(node, () => {
+            // do not use cached leaf value here, invoke this.isLeaf to get new value.
+            const { isLeaf } = this;
+
+            if (!isLeaf) this.handleExpand();
+            if (multiple) {
+              // if leaf sync checked state, else clear checked state
+              const checked = isLeaf ? node.checked : false;
+              this.handleMultiCheckChange(checked);
+            }
+          });
+        } else {
+          panel.handleExpand(node);
+        }
+      },
+
+      handleCheckChange() {
+        const { panel, value } = this;
+        panel.handleCheckChange(value);
+      },
+
+      handleMultiCheckChange(checked) {
+        this.node.doCheck(checked);
+        this.panel.calculateMultiCheckedValue();
+      },
+
+      isInPath(pathNodes) {
+        const { node } = this;
+        const selectedPathNode = pathNodes[node.level - 1] || {};
+        return selectedPathNode.uid === node.uid;
+      },
+
+      renderPrefix(h) {
+        const { isLeaf, isChecked, config } = this;
+        const { checkStrictly, multiple } = config;
+
+        if (multiple) {
+          return this.renderCheckbox(h);
+        } else if (checkStrictly) {
+          return this.renderRadio(h);
+        } else if (isLeaf && isChecked) {
+          return this.renderCheckIcon(h);
+        }
+
+        return null;
+      },
+
+      renderPostfix(h) {
+        const { node, isLeaf } = this;
+
+        if (node.loading) {
+          return this.renderLoadingIcon(h);
+        } else if (!isLeaf) {
+          return this.renderExpandIcon(h);
+        }
+
+        return null;
+      },
+
+      renderCheckbox(h) {
+        const { node, config, isDisabled } = this;
+        const events = {
+          on: { change: this.handleMultiCheckChange },
+          nativeOn: {}
+        };
+
+        if (config.checkStrictly) { // when every node is selectable, click event should not trigger expand event.
+          events.nativeOn.click = stopPropagation;
+        }
+
+        return (
+          <el-checkbox
+            value={ node.checked }
+            indeterminate={ node.indeterminate }
+            disabled={ isDisabled }
+            { ...events }
+          ></el-checkbox>
+        );
+      },
+
+      renderRadio(h) {
+        let { checkedValue, value, isDisabled } = this;
+
+        // to keep same reference if value cause radio's checked state is calculated by reference comparision;
+        if (isEqual(value, checkedValue)) {
+          value = checkedValue;
+        }
+
+        return (
+          <el-radio
+            value={ checkedValue }
+            label={ value }
+            disabled={ isDisabled }
+            onChange={ this.handleCheckChange }
+            nativeOnClick={ stopPropagation }>
+            {/* add an empty element to avoid render label */}
+            <span></span>
+          </el-radio>
+        );
+      },
+
+      renderCheckIcon(h) {
+        return (
+          <i class="el-icon-check el-cascader-node__prefix"></i>
+        );
+      },
+
+      renderLoadingIcon(h) {
+        return (
+          <i class="el-icon-loading el-cascader-node__postfix"></i>
+        );
+      },
+
+      renderExpandIcon(h) {
+        return (
+          <i class="el-icon-arrow-right el-cascader-node__postfix"></i>
+        );
+      },
+
+      renderContent(h) {
+        const { panel, node } = this;
+        const render = panel.renderLabelFn;
+        const vnode = render
+          ? render({ node, data: node.data })
+          : null;
+
+        return (
+          <span class="el-cascader-node__label">{ vnode || node.label }</span>
+        );
+      }
+    },
+
+    render(h) {
+      const {
+        inActivePath,
+        inCheckedPath,
+        isChecked,
+        isLeaf,
+        isDisabled,
+        config,
+        nodeId
+      } = this;
+      const { expandTrigger, checkStrictly, multiple } = config;
+      const disabled = !checkStrictly && isDisabled;
+      const events = { on: {} };
+
+      if (!isLeaf) {
+        if (expandTrigger === 'click') {
+          events.on.click = this.handleExpand;
+        } else {
+          events.on.mouseenter = e => {
+            this.handleExpand();
+            this.$emit('expand', e);
+          };
+          events.on.focus = e => {
+            this.handleExpand();
+            this.$emit('expand', e);
+          };
+        }
+      } else if (!isDisabled && !checkStrictly && !multiple) {
+        events.on.click = this.handleCheckChange;
+      }
+
+      return (
+        <li
+          role="menuitem"
+          id={ nodeId }
+          aria-expanded={ inActivePath }
+          tabindex={ disabled ? null : -1 }
+          class={{
+            'el-cascader-node': true,
+            'is-selectable': checkStrictly,
+            'in-active-path': inActivePath,
+            'in-checked-path': inCheckedPath,
+            'is-active': isChecked,
+            'is-disabled': disabled
+          }}
+          {...events}>
+          { this.renderPrefix(h) }
+          { this.renderContent(h) }
+          { this.renderPostfix(h) }
+        </li>
+      );
+    }
+  };
+</script>

packages/cascader-panel/src/cascader-panel.vue

+<template>
+  <div
+    :class="[
+      'el-cascader-panel',
+      border && 'is-bordered'
+    ]"
+    @keydown="handleKeyDown">
+    <cascader-menu
+      ref="menu"
+      v-for="(menu, index) in menus"
+      :index="index"
+      :key="index"
+      :nodes="menu"></cascader-menu>
+  </div>
+</template>
+
+<script>
+import CascaderMenu from './cascader-menu';
+import Store from './store';
+import merge from 'element-ui/src/utils/merge';
+import AriaUtils from 'element-ui/src/utils/aria-utils';
+import scrollIntoView from 'element-ui/src/utils/scroll-into-view';
+import {
+  noop,
+  coerceTruthyValueToArray,
+  isEqual,
+  isEmpty,
+  valueEquals
+} from 'element-ui/src/utils/util';
+
+const { keys: KeyCode } = AriaUtils;
+const DefaultProps = {
+  expandTrigger: 'click', // or hover
+  multiple: false,
+  checkStrictly: false, // whether all nodes can be selected
+  emitPath: true, // wether to emit an array of all levels value in which node is located
+  lazy: false,
+  lazyLoad: noop,
+  value: 'value',
+  label: 'label',
+  children: 'children',
+  leaf: 'leaf',
+  disabled: 'disabled',
+  hoverThreshold: 500
+};
+
+const isLeaf = el => !el.getAttribute('aria-owns');
+
+const getSibling = (el, distance) => {
+  const { parentNode } = el;
+  if (parentNode) {
+    const siblings = parentNode.querySelectorAll('.el-cascader-node[tabindex="-1"]');
+    const index = Array.prototype.indexOf.call(siblings, el);
+    return siblings[index + distance] || null;
+  }
+  return null;
+};
+
+const getMenuIndex = (el, distance) => {
+  if (!el) return;
+  const pieces = el.id.split('-');
+  return Number(pieces[pieces.length - 2]);
+};
+
+const focusNode = el => {
+  if (!el) return;
+  el.focus();
+  !isLeaf(el) && el.click();
+};
+
+const checkNode = el => {
+  if (!el) return;
+
+  const input = el.querySelector('input');
+  if (input) {
+    input.click();
+  } else if (isLeaf(el)) {
+    el.click();
+  }
+};
+
+export default {
+  name: 'ElCascaderPanel',
+
+  components: {
+    CascaderMenu
+  },
+
+  props: {
+    value: {},
+    options: Array,
+    props: Object,
+    border: {
+      type: Boolean,
+      default: true
+    },
+    renderLabel: Function
+  },
+
+  provide() {
+    return {
+      panel: this
+    };
+  },
+
+  data() {
+    return {
+      checkedValue: null,
+      checkedNodePaths: [],
+      store: [],
+      menus: [],
+      activePath: []
+    };
+  },
+
+  computed: {
+    config() {
+      return merge({ ...DefaultProps }, this.props || {});
+    },
+    multiple() {
+      return this.config.multiple;
+    },
+    checkStrictly() {
+      return this.config.checkStrictly;
+    },
+    leafOnly() {
+      return !this.checkStrictly;
+    },
+    isHoverMenu() {
+      return this.config.expandTrigger === 'hover';
+    },
+    renderLabelFn() {
+      return this.renderLabel || this.$scopedSlots.default;
+    }
+  },
+
+  watch: {
+    options: {
+      handler: function() {
+        this.initStore();
+      },
+      immediate: true,
+      deep: true
+    },
+    value() {
+      this.syncCheckedValue();
+      this.checkStrictly && this.calculateCheckedNodePaths();
+    },
+    checkedValue(val) {
+      if (!isEqual(val, this.value)) {
+        this.checkStrictly && this.calculateCheckedNodePaths();
+        this.$emit('input', val);
+        this.$emit('change', val);
+      }
+    }
+  },
+
+  mounted() {
+    if (!isEmpty(this.value)) {
+      this.syncCheckedValue();
+    }
+  },
+
+  methods: {
+    initStore() {
+      const { config, options } = this;
+      if (config.lazy && isEmpty(options)) {
+        this.lazyLoad();
+      } else {
+        this.store = new Store(options, config);
+        this.menus = [this.store.getNodes()];
+        this.syncMenuState();
+      }
+    },
+    syncCheckedValue() {
+      const { value, checkedValue } = this;
+      if (!isEqual(value, checkedValue)) {
+        this.checkedValue = value;
+        this.syncMenuState();
+      }
+    },
+    syncMenuState() {
+      const { multiple, checkStrictly } = this;
+      this.syncActivePath();
+      multiple && this.syncMultiCheckState();
+      checkStrictly && this.calculateCheckedNodePaths();
+      this.$nextTick(this.scrollIntoView);
+    },
+    syncMultiCheckState() {
+      const nodes = this.getFlattedNodes(this.leafOnly);
+
+      nodes.forEach(node => {
+        node.syncCheckState(this.checkedValue);
+      });
+    },
+    syncActivePath() {
+      let { checkedValue, store, multiple } = this;
+      if (isEmpty(checkedValue)) {
+        this.activePath = [];
+        this.menus = [store.getNodes()];
+      } else {
+        checkedValue = multiple ? checkedValue[0] : checkedValue;
+        const checkedNode = this.getNodeByValue(checkedValue) || {};
+        const nodes = [];
+        let { parent } = checkedNode;
+        while (parent) {
+          nodes.unshift(parent);
+          parent = parent.parent;
+        }
+        nodes.forEach(node => this.handleExpand(node, true /* silent */));
+      }
+    },
+    calculateCheckedNodePaths() {
+      const { checkedValue, multiple } = this;
+      const checkedValues = multiple
+        ? coerceTruthyValueToArray(checkedValue)
+        : [ checkedValue ];
+      this.checkedNodePaths = checkedValues.map(v => {
+        const checkedNode = this.getNodeByValue(v);
+        return checkedNode ? checkedNode.pathNodes : [];
+      });
+    },
+    handleKeyDown(e) {
+      const { target, keyCode } = e;
+
+      switch (keyCode) {
+        case KeyCode.up:
+          const prev = getSibling(target, -1);
+          focusNode(prev);
+          break;
+        case KeyCode.down:
+          const next = getSibling(target, 1);
+          focusNode(next);
+          break;
+        case KeyCode.left:
+          const preMenu = this.$refs.menu[getMenuIndex(target) - 1];
+          if (preMenu) {
+            const expandedNode = preMenu.$el.querySelector('.el-cascader-node[aria-expanded="true"]');
+            focusNode(expandedNode);
+          }
+          break;
+        case KeyCode.right:
+          const nextMenu = this.$refs.menu[getMenuIndex(target) + 1];
+          if (nextMenu) {
+            const firstNode = nextMenu.$el.querySelector('.el-cascader-node[tabindex="-1"]');
+            focusNode(firstNode);
+          }
+          break;
+        case KeyCode.enter:
+          checkNode(target);
+          break;
+        case KeyCode.esc:
+        case KeyCode.tab:
+          this.$emit('close');
+          break;
+        default:
+          return;
+      }
+    },
+    handleExpand(node, silent) {
+      const { level } = node;
+      const path = this.activePath.slice(0, level - 1);
+      const menus = this.menus.slice(0, level);
+
+      if (!node.isLeaf) {
+        path.push(node);
+        menus.push(node.children);
+      }
+
+      if (valueEquals(path, this.activePath)) return;
+
+      this.activePath = path;
+      this.menus = menus;
+
+      if (!silent) {
+        const pathValues = path.map(node => node.getValue());
+        this.$emit('active-item-change', pathValues); // Deprecated
+        this.$emit('expand-change', pathValues);
+      }
+    },
+    handleCheckChange(value) {
+      this.checkedValue = value;
+    },
+    lazyLoad(node, onFullfiled) {
+      const { config } = this;
+      if (!node) {
+        node = node || { root: true, level: 0 };
+        this.store = new Store([], config);
+        this.menus = [this.store.getNodes()];
+      }
+      node.loading = true;
+      const resolve = dataList => {
+        const parent = node.root ? null : node;
+        dataList && dataList.length && this.store.appendNodes(dataList, parent);
+        node.loading = false;
+        node.loaded = true;
+        onFullfiled && onFullfiled(dataList);
+      };
+      config.lazyLoad(node, resolve);
+    },
+    /**
+     * public methods
+    */
+    calculateMultiCheckedValue() {
+      this.checkedValue = this.getCheckedNodes(this.leafOnly)
+        .map(node => node.getValueByOption());
+    },
+    scrollIntoView() {
+      if (this.$isServer) return;
+
+      const menus = this.$refs.menu || [];
+      menus.forEach(menu => {
+        const menuElement = menu.$el;
+        if (menuElement) {
+          const container = menuElement.querySelector('.el-scrollbar__wrap');
+          const activeNode = menuElement.querySelector('.el-cascader-node.is-active') ||
+            menuElement.querySelector('.el-cascader-node.in-active-path');
+          scrollIntoView(container, activeNode);
+        }
+      });
+    },
+    getNodeByValue(val) {
+      return this.store.getNodeByValue(val);
+    },
+    getFlattedNodes(leafOnly) {
+      const cached = !this.config.lazy;
+      return this.store.getFlattedNodes(leafOnly, cached);
+    },
+    getCheckedNodes(leafOnly) {
+      const { checkedValue, multiple } = this;
+      if (multiple) {
+        const nodes = this.getFlattedNodes(leafOnly);
+        return nodes.filter(node => node.checked);
+      } else {
+        return isEmpty(checkedValue)
+          ? []
+          : [this.getNodeByValue(checkedValue)];
+      }
+    },
+    clearCheckedNodes() {
+      const { config, leafOnly } = this;
+      const { multiple, emitPath } = config;
+      if (multiple) {
+        this.getCheckedNodes(leafOnly)
+          .filter(node => !node.isDisabled)
+          .forEach(node => node.doCheck(false));
+        this.calculateMultiCheckedValue();
+      } else {
+        this.checkedValue = emitPath ? [] : null;
+      }
+    }
+  }
+};
+</script>

packages/cascader-panel/src/node.js

+import { isEqual, capitalize } from 'element-ui/src/utils/util';
+import { isDef } from 'element-ui/src/utils/shared';
+
+let uid = 0;
+
+export default class Node {
+
+  constructor(data, config, parentNode) {
+    this.data = data;
+    this.config = config;
+    this.parent = parentNode || null;
+    this.level = !this.parent ? 1 : this.parent.level + 1;
+    this.uid = uid++;
+
+    this.initState();
+    this.initChildren();
+  }
+
+  initState() {
+    const { value: valueKey, label: labelKey } = this.config;
+
+    this.value = this.data[valueKey];
+    this.label = this.data[labelKey];
+    this.pathNodes = this.calculatePathNodes();
+    this.path = this.pathNodes.map(node => node.value);
+    this.pathLabels = this.pathNodes.map(node => node.label);
+
+    // lazy load
+    this.loading = false;
+    this.loaded = false;
+  }
+
+  initChildren() {
+    const { config } = this;
+    const childrenKey = config.children;
+    const childrenData = this.data[childrenKey];
+    this.hasChildren = Array.isArray(childrenData);
+    this.children = (childrenData || []).map(child => new Node(child, config, this));
+  }
+
+  get isDisabled() {
+    const { data, parent, config } = this;
+    const disabledKey = config.disabled;
+    const { checkStrictly } = config;
+    return data[disabledKey] ||
+      !checkStrictly && parent && parent.isDisabled;
+  }
+
+  get isLeaf() {
+    const { data, loaded, hasChildren, children } = this;
+    const { lazy, leaf: leafKey } = this.config;
+    if (lazy) {
+      const isLeaf = isDef(data[leafKey])
+        ? data[leafKey]
+        : (loaded ? !children.length : false);
+      this.hasChildren = !isLeaf;
+      return isLeaf;
+    }
+    return !hasChildren;
+  }
+
+  calculatePathNodes() {
+    const nodes = [this];
+    let parent = this.parent;
+
+    while (parent) {
+      nodes.unshift(parent);
+      parent = parent.parent;
+    }
+
+    return nodes;
+  }
+
+  getPath() {
+    return this.path;
+  }
+
+  getValue() {
+    return this.value;
+  }
+
+  getValueByOption() {
+    return this.config.emitPath
+      ? this.getPath()
+      : this.getValue();
+  }
+
+  getText(allLevels, separator) {
+    return allLevels ? this.pathLabels.join(separator) : this.label;
+  }
+
+  isSameNode(checkedValue) {
+    const value = this.getValueByOption();
+    return this.config.multiple && Array.isArray(checkedValue)
+      ? checkedValue.some(val => isEqual(val, value))
+      : isEqual(checkedValue, value);
+  }
+
+  broadcast(event, ...args) {
+    const handlerName = `onParent${capitalize(event)}`;
+
+    this.children.forEach(child => {
+      if (child) {
+        // bottom up
+        child.broadcast(event, ...args);
+        child[handlerName] && child[handlerName](...args);
+      }
+    });
+  }
+
+  emit(event, ...args) {
+    const { parent } = this;
+    const handlerName = `onChild${capitalize(event)}`;
+    if (parent) {
+      parent[handlerName] && parent[handlerName](...args);
+      parent.emit(event, ...args);
+    }
+  }
+
+  onParentCheck(checked) {
+    if (!this.isDisabled) {
+      this.setCheckState(checked);
+    }
+  }
+
+  onChildCheck() {
+    const { children } = this;
+    const validChildren = children.filter(child => !child.isDisabled);
+    const checked = validChildren.length
+      ? validChildren.every(child => child.checked)
+      : false;
+
+    this.setCheckState(checked);
+  }
+
+  setCheckState(checked) {
+    const totalNum = this.children.length;
+    const checkedNum = this.children.reduce((c, p) => {
+      const num = p.checked ? 1 : (p.indeterminate ? 0.5 : 0);
+      return c + num;
+    }, 0);
+
+    this.checked = checked;
+    this.indeterminate = checkedNum !== totalNum && checkedNum > 0;
+  }
+
+  syncCheckState(checkedValue) {
+    const value = this.getValueByOption();
+    const checked = this.isSameNode(checkedValue, value);
+
+    this.doCheck(checked);
+  }
+
+  doCheck(checked) {
+    if (this.checked !== checked) {
+      if (this.config.checkStrictly) {
+        this.checked = checked;
+      } else {
+        // bottom up to unify the calculation of the indeterminate state
+        this.broadcast('check', checked);
+        this.setCheckState(checked);
+        this.emit('check');
+      }
+    }
+  }
+}

packages/cascader-panel/src/store.js

+import Node from './node';
+import { coerceTruthyValueToArray } from 'element-ui/src/utils/util';
+
+const flatNodes = (data, leafOnly) => {
+  return data.reduce((res, node) => {
+    if (node.isLeaf) {
+      res.push(node);
+    } else {
+      !leafOnly && res.push(node);
+      res = res.concat(flatNodes(node.children, leafOnly));
+    }
+    return res;
+  }, []);
+};
+
+export default class Store {
+
+  constructor(data, config) {
+    this.config = config;
+    this.initNodes(data);
+  }
+
+  initNodes(data) {
+    data = coerceTruthyValueToArray(data);
+    this.nodes = data.map(nodeData => new Node(nodeData, this.config));
+    this.flattedNodes = this.getFlattedNodes(false, false);
+    this.leafNodes = this.getFlattedNodes(true, false);
+  }
+
+  appendNode(nodeData, parentNode) {
+    const node = new Node(nodeData, this.config, parentNode);
+    const children = parentNode ? parentNode.children : this.nodes;
+
+    children.push(node);
+  }
+
+  appendNodes(nodeDataList, parentNode) {
+    nodeDataList = coerceTruthyValueToArray(nodeDataList);
+    nodeDataList.forEach(nodeData => this.appendNode(nodeData, parentNode));
+  }
+
+  getNodes() {
+    return this.nodes;
+  }
+
+  getFlattedNodes(leafOnly, cached = true) {
+    const cachedNodes = leafOnly ? this.leafNodes : this.flattedNodes;
+    return cached
+      ? cachedNodes
+      : flatNodes(this.nodes, leafOnly);
+  }
+
+  getNodeByValue(value) {
+    if (value) {
+      value = Array.isArray(value) ? value[value.length - 1] : value;
+      const nodes = this.getFlattedNodes(false, !this.config.lazy)
+        .filter(node => node.value === value);
+      return nodes && nodes.length ? nodes[0] : null;
+    }
+    return null;
+  }
+
+}

packages/cascader/index.js

-import Cascader from './src/main';
+import Cascader from './src/cascader';
 
 /* istanbul ignore next */
 Cascader.install = function(Vue) {

packages/theme-chalk/src/common/var.scss

@@ -474,19 +474,14 @@ $--cascader-menu-font-color: $--color-text-regular !default;
 /// color||Color|0
 $--cascader-menu-selected-font-color: $--color-primary !default;
 $--cascader-menu-fill: $--fill-base !default;
-$--cascader-menu-border: $--border-base !default;
-$--cascader-menu-border-width: $--border-width-base !default;
-$--cascader-menu-color: $--color-text-regular !default;
-$--cascader-menu-option-color-active: $--color-text-secondary !default;
-$--cascader-menu-option-fill-active: rgba($--color-text-secondary, 0.12) !default;
-$--cascader-menu-option-color-hover: $--color-text-regular !default;
-$--cascader-menu-option-fill-hover: rgba($--color-text-primary, 0.06) !default;
-$--cascader-menu-option-color-disabled: #999 !default;
-$--cascader-menu-option-fill-disabled: rgba($--color-black, 0.06) !default;
-$--cascader-menu-option-empty-color: #666 !default;
-$--cascader-menu-shadow: 0 1px 2px rgba($--color-black, 0.14), 0 0 3px rgba($--color-black, 0.14) !default;
-$--cascader-menu-option-pinyin-color: #999 !default;
-$--cascader-menu-submenu-shadow: 1px 1px 2px rgba($--color-black, 0.14), 1px 0 2px rgba($--color-black, 0.14) !default;
+$--cascader-menu-font-size: $--font-size-base !default;
+$--cascader-menu-radius: $--border-radius-base !default;
+$--cascader-menu-border: solid 1px $--border-color-light !default;
+$--cascader-menu-shadow: $--box-shadow-light !default;
+$--cascader-node-background-hover: $--background-color-base !default;
+$--cascader-node-color-disabled:$--color-text-placeholder !default;
+$--cascader-color-empty:$--color-text-placeholder !default;
+$--cascader-tag-background: #f0f2f5;
 
 /* Group
 -------------------------- */