The functionality provided by UI libraries is becoming more and more powerful. For example, the Element Cascader is so powerful that it can be used directly when the data is ready.

So why encapsulate it? One is to encapsulate a unified style of form controls so they can be managed uniformly,

The other is to tinker with the data structure.

Cascader’s default data structure is the “nesting doll” structure favored by the front end, which is fine for the front end, but is a headache for the back end because it needs to be converted. I won’t say more about this, so as not to cause an argument.

The data in the back-end database are all in horizontal columns and brother structure. It is more convenient to give multiple separate data. The data given by nesting dolls should probably be modified in a recursive way.

So can you just use it without changing the data structure? Of course it can. Cascader provides a way to load dynamically, which we can do with this callback function.

Default data structure

const options = [
{
    value: 'zhinan'.label: 'guide'.children: [{
      value: 'shejiyuanze'.label: 'Design Principles'.children: [{
        value: 'yizhi'.label: 'consistent'
      }, {
        value: 'fankui'.label: 'feedback'
      }, {
        value: 'xiaolv'.label: 'efficiency'
      }, {
        value: 'kekong'.label: 'control'}]}, {value: 'daohang'.label: 'navigation'.children: [{
        value: 'cexiangdaohang'.label: 'Lateral navigation'
      }, {
        value: 'dingbudaohang'.label: 'Top navigation'}}]]}, {value: 'zujian'.label: 'components'.children: [{
      value: 'basic'.label: 'Basic'.children: [{
        value: 'layout'.label: 'Layout Layout'
      }, {
        value: 'color'.label: 'Color Color'
      }, {
        value: 'typography'.label: 'Typography font'
      }, {
        value: 'icon'.label: 'Icon Icon'
      }, {
        value: 'button'.label: 'Button Button'}]}, {value: 'form'.label: 'Form'.children: [{
        value: 'radio'.label: 'Radio Checkbox '
      }, {
        value: 'checkbox'.label: 'Checkbox multiple checkboxes'
      }, {
        value: 'input'.label: 'Input field '
      }, {
        value: 'input-number'.label: 'InputNumber counter '
      }, {
        value: 'select'.label: 'Select selector '
      }, {
        value: 'cascader'.label: 'Cascader cascade selector '
      }, {
        value: 'switch'.label: 'the Switch Switch'
      }, {
        value: 'slider'.label: 'the Slider thumb'
      }, {
        value: 'time-picker'.label: 'TimePicker TimePicker '
      }, {
        value: 'date-picker'.label: 'DatePicker DatePicker '
      }, {
        value: 'datetime-picker'.label: 'DateTimePicker DateTimePicker '
      }, {
        value: 'upload'.label: 'the Upload Upload'
      }, {
        value: 'rate'.label: 'what score'
      }, {
        value: 'form'.label: 'Form Form'}]}, {value: 'data'.label: 'Data'.children: [{
        value: 'table'.label: 'the Table form'
      }, {
        value: 'tag'.label: 'the Tag label'
      }, {
        value: 'progress'.label: 'Progress bar '
      }, {
        value: 'tree'.label: 'Tree control '
      }, {
        value: 'pagination'.label: 'Pagination paging'
      }, {
        value: 'badge'.label: 'Badge markers'}]}, {value: 'notice'.label: 'Notice'.children: [{
        value: 'alert'.label: 'Alert warning'
      }, {
        value: 'loading'.label: 'Loading Loading'
      }, {
        value: 'message'.label: 'Message prompt '
      }, {
        value: 'message-box'.label: 'MessageBox play box'
      }, {
        value: 'notification'.label: 'Notification notice'}]}, {value: 'navigation'.label: 'Navigation'.children: [{
        value: 'menu'.label: 'NavMenu '
      }, {
        value: 'tabs'.label: 'Tabs'
      }, {
        value: 'breadcrumb'.label: 'Breadcrumb '
      }, {
        value: 'dropdown'.label: 'Dropdown '
      }, {
        value: 'steps'.label: 'Steps bar '}]}, {value: 'others'.label: 'Others'.children: [{
        value: 'dialog'.label: 'Dialog '
      }, {
        value: 'tooltip'.label: 'Tooltip text prompt '
      }, {
        value: 'popover'.label: 'Popover Popover '
      }, {
        value: 'card'.label: 'Card Card'
      }, {
        value: 'carousel'.label: 'Carousel '
      }, {
        value: 'collapse'.label: 'Collapse panel '}}}]]]Copy the code

This is the example data from the official website, which is intercepted by two big categories. To be honest, it is not clear. To be clear, it depends on the auxiliary functions brought by the editor, such as this:

When you fold up the children, it looks a little clearer.

Common data structures on the back end

const foo = {
  levelName: ['foo1'.'foo2'.'foo3'].foo1: [{value: 'zhinan'.label: 'guide 1' },
    { value: 'zujian'.label: Components' 1 ' },
    { value: 'ziyuan'.label: Resources' 1 '}].foo2: [{pId: 'zhinan'.value: 'shejiyuanze'.label: 'Design Principles' },
    { pId: 'zhinan'.value: 'daohang'.label: 'navigation'.leaf: true },
    { pId: 'zujian'.value: 'basic'.label: 'basic'.leaf: true },
    { pId: 'zujian'.value: 'form'.label: 'form'.leaf: true}].foo3: [{pId: 'shejiyuanze'.value: 'yizhi'.label: 'consistent'.leaf: true },
    { pId: 'shejiyuanze'.value: 'fankui'.label: 'feedback'.leaf: true}}]Copy the code

Well, that’s not pretty either, so let’s not talk about that, but let’s see how the code works.

Foo1 is the first level of data, foo2 is the second level of data, and foo3 is the third level of data.

Support back-end data directly with lazyLoad

Let’s look at the code

    lazyLoad (node, resolve) { // The response function
      console.log('node', node)
      const { level } = node
      // Determine if the series exceeds the array subscript
      if (levelName.length >= level) {
        // Find the subdata -
        console.log(levelName[level])
        const key = levelName[level]
        const newNode = data[key].filter((item) = > item.pId === node.value)
        resolve(newNode) // Pass it to the component
      } else {
        resolve([{
          value: '22'.label: 'option 11'.leaf: true}}}])Copy the code

Filter pId === = select the selected value of the data, and then return to cascader.

Ok, the above code is a bit rough, it seems that the else part is not executed, and there is also the need to set the leaf property. This is also a bit of trouble, I will improve it later.

Anyway, this way Cascader can use the sibling data directly on the back end.

You see, none of us have changed the data format, doesn’t he smell good?

This function can also be encapsulated and used uniformly, rather than written every time.

insufficient

Of course, Cascader also provides a “searchable” function, which is also very good, but this is in the doll’s data to query, which means that the code I wrote above is invalid.

Filter-method = filter-method = filter-method = filter-method = filter-method = filter-method = filter-method = filter-method

So if you have to use the search function, it’s probably the only way to do it, or it’s another way to do it.

Other features haven’t been tested yet…