Vuetify: [Feature Request] Add a cascade to the select component

Created on 19 Jan 2018  Â·  5Comments  Â·  Source: vuetifyjs/vuetify

New Functionality

vuetify is awesome! And I want it to be more perfect! Please let me describe the feature request. For example, I want to choose a address where send the goods I buy, and my address is from province to the building I live now like XX city XX street XX Community room 1111, Unit 2, D Building .。 But now, I can only choose one address such as city , street and so on. If there is a cascade selector , I can choose these addresses in one select, and needn't produce any more select components.

Improvements

I can choose the cascaded address in one select component.

Bugs or Edge Cases it Helps Avoid

The adjacent cascade doesn't align.

VAutocomplete VSelect enhancement

Most helpful comment

Another scenario is when you have to select a category that has children categories.

                 ----- Category Four
                 -
                 -
Category One ----- Category Three ----- Category Five
                 -                ----- Category Seven
                 -
                 ----- Category Six


                 ----- Category Twelve
                 -
                 -
Category Two ----- Category Eight ----- Category Ten
                 -                ----- Category Eleven
                 -
                 ----- Category Nine
const categories = [
  { 
    label: 'Category One',
    value: 1, 
    children: [
      { label: 'Category Four', value: 4 },
      { 
        label: 'Category Tree',
        value: 3,
        children:  [
          { label: 'Category Five', value: 5 },
          { label: 'Category Seven', value: 7 }
        ]
      },
      { label:  'Category Six', value: 6 }
    ]
  },
  // ...
]

A more intuitive example can be seen here.

All 5 comments

Another scenario is when you have to select a category that has children categories.

                 ----- Category Four
                 -
                 -
Category One ----- Category Three ----- Category Five
                 -                ----- Category Seven
                 -
                 ----- Category Six


                 ----- Category Twelve
                 -
                 -
Category Two ----- Category Eight ----- Category Ten
                 -                ----- Category Eleven
                 -
                 ----- Category Nine
const categories = [
  { 
    label: 'Category One',
    value: 1, 
    children: [
      { label: 'Category Four', value: 4 },
      { 
        label: 'Category Tree',
        value: 3,
        children:  [
          { label: 'Category Five', value: 5 },
          { label: 'Category Seven', value: 7 }
        ]
      },
      { label:  'Category Six', value: 6 }
    ]
  },
  // ...
]

A more intuitive example can be seen here.

would be usefull !

I just uploaded a repository, Maybe it would be helpful: cyyssly/vue-vuetify-cascade

Any response?

Was this page helpful?
0 / 5 - 0 ratings