add international

packages/cascader/src/main.vue

@@ -15,6 +15,7 @@
     v-clickoutside="handleClickoutside"
   >
     <el-input
+      ref="input"
       :readonly="!filterable"
       :placeholder="displayValue ? undefined : placeholder"
       v-model="inputValue"
@@ -49,6 +50,7 @@ import ElInput from 'element-ui/packages/input';
 import Popper from 'element-ui/src/utils/vue-popper';
 import Clickoutside from 'element-ui/src/utils/clickoutside';
 import emitter from 'element-ui/src/mixins/emitter';
+import Locale from 'element-ui/src/mixins/locale';
 
 const popperMixin = {
   props: {
@@ -71,7 +73,7 @@ export default {
 
   directives: { Clickoutside },
 
-  mixins: [popperMixin, emitter],
+  mixins: [popperMixin, emitter, Locale],
 
   components: {
     ElInput
@@ -146,6 +148,9 @@ export default {
       this.menu.visible = true;
       this.menu.$on('pick', this.handlePick);
       this.updatePopper();
+      this.$nextTick(_ => {
+        this.menu.inputWidth = this.$refs.input.$el.offsetWidth - 2;
+      });
     },
     hideMenu() {
       this.menu.visible = false;
@@ -172,18 +177,24 @@ export default {
       });
 
       if (filteredFlatOptions.length > 0) {
-        this.menu.options = filteredFlatOptions.map(optionStack => {
+        filteredFlatOptions = filteredFlatOptions.map(optionStack => {
           return {
             __IS__FLAT__OPTIONS: true,
             value: optionStack.map(item => item.value),
-            label: this.renderRenderFilteredOption(value, optionStack)
+            label: this.renderFilteredOptionLabel(value, optionStack)
           };
         });
       } else {
-        return [{ label: 'not found content', value: '', disabled: true }];
+        filteredFlatOptions = [{
+          __IS__FLAT__OPTIONS: true,
+          label: this.t('el.cascader.noMatch'),
+          value: '',
+          disabled: true
+        }];
       }
+      this.menu.options = filteredFlatOptions;
     },
-    renderRenderFilteredOption(inputValue, optionsStack) {
+    renderFilteredOptionLabel(inputValue, optionsStack) {
       return optionsStack.map(({ label }, index) => {
         const node = label.indexOf(inputValue) > -1 ? this.highlightKeyword(label, inputValue) : label;
         return index === 0 ? node : [' / ', node];
@@ -203,8 +214,7 @@ export default {
         const optionsStack = ancestor.concat(option);
         if (!option.children) {
           flatOptions.push(optionsStack);
-        }
+        } else {
-        if (option.children) {
           flatOptions = flatOptions.concat(this.flattenOptions(option.children, optionsStack));
         }
       });

packages/cascader/src/menu.vue

@@ -4,6 +4,7 @@
 
     data() {
       return {
+        inputWidth: 0,
         options: [],
         visible: false,
         activeValue: [],
@@ -56,34 +57,19 @@
     },
 
     methods: {
-      selectItem(item, menuIndex) {
+      select(item, menuIndex) {
-        const len = this.activeOptions.length;
-        const closeMenu = !item.children;
-
         if (item.__IS__FLAT__OPTIONS) {
-          this.activeValue.splice(menuIndex, len, ...item.value);
+          this.activeValue = item.value;
         } else {
-          this.activeValue.splice(menuIndex, len, item.value);
+          this.activeValue.splice(menuIndex, 1, item.value);
-        }
-
-        if (this.changeOnSelect) {
-          this.$emit('pick', this.activeValue, closeMenu);
         }
+        this.$emit('pick', this.activeValue);
       },
-      expandItem(item, menuIndex) {
+      activeItem(item, menuIndex) {
         const len = this.activeOptions.length;
-        if (item.children) {
+        this.activeValue.splice(menuIndex, len, item.value);
-          this.activeValue.splice(menuIndex, len, item.value);
+        this.activeOptions.splice(menuIndex + 1, len, item.children);
-          this.activeOptions.splice(menuIndex + 1, len, item.children);
+        if (this.changeOnSelect) this.$emit('pick', this.activeValue, false);
-        }
-      },
-      handleItemClick(item, menuIndex) {
-        this.expandItem(item, menuIndex);
-        this.selectItem(item, menuIndex);
-
-        if (!item.children && !this.changeOnSelect) {
-          this.$emit('pick', this.activeValue);
-        }
       }
     },
 
@@ -96,17 +82,24 @@
         popperClass
       } = this;
 
-      const menus = this._l(activeOptions, (menu, index) => {
+      const menus = this._l(activeOptions, (menu, menuIndex) => {
+        let isFlat = false;
         const items = this._l(menu, item => {
           const events = {
             on: {}
           };
 
+          if (item.__IS__FLAT__OPTIONS) isFlat = true;
+
           if (!item.disabled) {
-            if (expandTrigger === 'click' || !item.children) {
+            if (item.children) {
-              events.on['click'] = () => { this.handleItemClick(item, index); };
+              let triggerEvent = {
+                click: 'click',
+                hover: 'mouseenter'
+              }[expandTrigger];
+              events.on[triggerEvent] = () => { this.activeItem(item, menuIndex); };
             } else {
-              events.on['mouseenter'] = () => { this.expandItem(item, index); };
+              events.on.click = () => { this.select(item, menuIndex); };
             }
           }
 
@@ -115,7 +108,7 @@
               class={{
                 'el-cascader-menu__item': true,
                 'el-cascader-menu__item--extensible': item.children,
-                'is-active': item.value === activeValue[index],
+                'is-active': item.value === activeValue[menuIndex],
                 'is-disabled': item.disabled
               }}
               {...events}
@@ -124,11 +117,31 @@
             </li>
           );
         });
-        return <ul class="el-cascader-menu">{items}</ul>;
+        let menuStyle = {};
+        if (isFlat) {
+          menuStyle.width = this.inputWidth + 'px';
+        }
+
+        return (
+          <ul
+            class={{
+              'el-cascader-menu': true,
+              'el-cascader-menu--flexible': isFlat
+            }}
+            style={menuStyle}>
+            {items}
+          </ul>
+        );
       });
       return (
         <transition name="el-zoom-in-top">
-          <div class={['el-cascader-menus', popperClass]} v-show={visible}>
+          <div
+            v-show={visible}
+            class={[
+              'el-cascader-menus',
+              popperClass
+            ]}
+          >
             {menus}
           </div>
         </transition>

packages/theme-default/src/cascader.css

@@ -150,5 +150,15 @@
         }
       }
     }
+
+    @m flexible {
+      height: auto;
+      max-height: 180px;
+      overflow: auto;
+
+      .el-cascader-menu__item {
+        overflow: visible;
+      }
+    }
   }
 }

src/locale/lang/en.js

@@ -56,6 +56,10 @@ export default {
       noData: 'No data',
       placeholder: 'Select'
     },
+    cascader: {
+      noMatch: 'No matching data',
+      placeholder: 'Select'
+    },
     pagination: {
       goto: 'Go to',
       pagesize: '/page',

src/locale/lang/zh-CN.js

@@ -56,6 +56,10 @@ export default {
       noData: '无数据',
       placeholder: '请选择'
     },
+    cascader: {
+      noMatch: '无匹配数据',
+      placeholder: '请选择'
+    },
     pagination: {
       goto: '前往',
       pagesize: '条/页',