当前位置：网站首页>011_ Cascader cascade selector

011_ Cascader cascade selector

2022-06-24 04:55:00 【Free and bound javajavascript】

1. Cascader Cascade selector

1.1. When a data set has a clear hierarchy , You can view and select... Step by step through the cascade selector .

1.2. Cascader attribute

Parameters	explain	type	Optional value	The default value is
value / v-model	Selected item binding value	nothing	nothing	nothing
options	Optional data sources , Key names can be accessed through Props Attribute configuration	array	nothing	nothing
props	configuration option , See the following table for details	object	nothing	nothing
size	Size	string	medium / small / mini	nothing
placeholder	Input field footprint text	string	nothing	Please select
disabled	Whether to disable	boolean	nothing	false
clearable	Whether the empty option is supported	boolean	nothing	false
show-all-levels	Whether to display the full path of the selected value in the input box	boolean	nothing	true
collapse-tags	Whether to fold in multiple selection mode Tag	boolean	nothing	false
separator	Option separator	string	nothing	Slash ' / '
filterable	Search options	boolean	nothing	nothing
filter-method	Custom search logic , The first parameter is the node node, The second parameter is the search keyword keyword, By returning a Boolean value to indicate whether it hit	function(node, keyword)	nothing	nothing
debounce	Deblurring delay of search keyword input , millisecond	number	nothing	300
before-filter	Hook before screening , The parameter is the input value , If returns false Or return Promise And be reject, Stop filtering	function(value)	nothing	nothing
popper-class	Custom floating layer class name	string	nothing	nothing

1.3. Cascader event

Event name	explain	Callback Arguments
change	Trigger when the selected node changes	The value of the selected node
expand-change	Trigger when the deployment node changes	An array of parent option values
blur	Trigger when focus is lost	(event: Event)
focus	Trigger when focus is obtained	(event: Event)
visible-change	The drop-down box appears / Trigger when hidden	When it appears, it is true, Hidden is false
remove-tag	In multi select mode , remove Tag Trigger when	Removed Tag Value of the corresponding node

1.4. Cascader Method

Event name	explain	Parameters
getCheckedNodes	Get the selected node	(leafOnly) Is it just a leaf node , The default value is false

1.5. Cascader Slots

name	explain
-	Customize the node content of the alternative , Parameter is { node, data }, Are the current node's Node Objects and data
empty	Content without matching options

1.6. CascaderPanel attribute

Parameters	explain	type
value / v-model	Selected item binding value	nothing
options	Optional data sources , Key names can be accessed through Props Attribute configuration	array
props	configuration option , See the following table for details	object

1.7. CascaderPanel event

Event name	explain	Callback Arguments
change	Trigger when the selected node changes	The value of the selected node
expand-change	Trigger when the deployment node changes	An array of parent option values

1.8. CascaderPanel Method

Method name	explain	Parameters
getCheckedNodes	Get the selected node array	(leafOnly) Is it just a leaf node , The default value is false
clearCheckedNodes	Clear the selected node	nothing

1.9. CascaderPanel Slots

name	explain
-	Customize the node content of the alternative , Parameter is { node, data }, Are the current node's Node Objects and data

1.10. Props

Parameters	explain	type	Optional value	The default value is
expandTrigger	How to expand the secondary menu	string	click / hover	'click'
multiple	Whether to choose more than one	boolean	nothing	false
checkStrictly	Whether to strictly abide by the parent-child node is not related to each other	boolean	nothing	false
emitPath	When the selected node changes , Whether to return an array composed of the values of the menu at all levels where the node is located , If set false, Only the value of the node is returned	boolean	nothing	true
lazy	Whether to load child nodes dynamically , Need and lazyLoad Methods used in combination	boolean	nothing	false
lazyLoad	How to load dynamic data , Only in lazy by true Effective when	function(node, resolve), node For the current node that you click on , resolve Callback completed for data loading ( Must call )	nothing	nothing
value	Specifies that the value of the option is a property value of the option object	string	nothing	'value'
label	Specifies that the option label is a property value of the option object	string	nothing	'label'
children	Specifies that the sub option of the option is a property value of the option object	string	nothing	'children'
disabled	Specifies that the option is disabled as an attribute value of the option object	string	nothing	'disabled'
leaf	Specifies that the flag bit of the leaf node of the option is an attribute value of the option object	string	nothing	'leaf'

2. Cascader Cascade selector example

2.1. Use the scaffold to create a new one named element-ui-cascader Front end projects , At the same time to install Element plug-in unit .

2.2. edit index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Cascader from '../components/Cascader.vue'
import DisabledCascader from '../components/DisabledCascader.vue'
import ClearableCascader from '../components/ClearableCascader.vue'
import MultipleCascader from '../components/MultipleCascader.vue'
import CheckStrictlyCascader from '../components/CheckStrictlyCascader.vue'
import LazyCascader from '../components/LazyCascader.vue'
import SearchCascader from '../components/SearchCascader.vue'
import ScopedCascader from '../components/ScopedCascader.vue'
import PanelCascader from '../components/PanelCascader.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', redirect: '/Cascader' },
  { path: '/Cascader', component: Cascader },
  { path: '/DisabledCascader', component: DisabledCascader },
  { path: '/ClearableCascader', component: ClearableCascader },
  { path: '/MultipleCascader', component: MultipleCascader },
  { path: '/CheckStrictlyCascader', component: CheckStrictlyCascader },
  { path: '/LazyCascader', component: LazyCascader },
  { path: '/SearchCascader', component: SearchCascader },
  { path: '/ScopedCascader', component: ScopedCascader },
  { path: '/PanelCascader', component: PanelCascader }
]

const router = new VueRouter({
  routes
})

export default router

2.3. stay components Create Cascader.vue

<template>
  <div>
    <h1> Basic usage - There are two ways to trigger a submenu </h1>
    <h4> Just for Cascader Of options Property to specify an array of options to render a cascade selector . adopt props.expandTrigger You can define the trigger method for expanding the child menu .</h4>
    <el-row>
      <el-col :span="5">
        <span> Default click Touch the submenu : </span>
        <el-cascader v-model="value" :options="options" @change="handleChange"></el-cascader>
      </el-col>
      <el-col :span="5">
        <span>hover Touch the submenu : </span>
        <el-cascader v-model="value" :options="options" :props="{ expandTrigger: 'hover' }" @change="handleChange"></el-cascader>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data () {
    return {
      value: [],
      options: [{
        value: 'zhinan',
        label: ' guide ',
        children: [{
          value: 'shejiyuanze',
          label: ' Design principles ',
          children: [{
            value: 'yizhi',
            label: ' Agreement '
          }, {
            value: 'fankui',
            label: ' feedback '
          }, {
            value: 'xiaolv',
            label: ' efficiency '
          }, {
            value: 'kekong',
            label: ' controllable '
          }]
        }, {
          value: 'daohang',
          label: ' Navigation ',
          children: [{
            value: 'cexiangdaohang',
            label: ' Lateral navigation '
          }, {
            value: 'dingbudaohang',
            label: ' Top navigation '
          }]
        }]
      }, {
        value: 'ziyuan',
        label: ' resources ',
        children: [{
          value: 'axure',
          label: 'Axure Components'
        }, {
          value: 'sketch',
          label: 'Sketch Templates'
        }, {
          value: 'jiaohu',
          label: ' Component interaction document '
        }]
      }]
    }
  },
  methods: {
    handleChange (value) {
      console.log(value)
    }
  }
}
</script>

2.4. stay components Create DisabledCascader.vue

<template>
  <div>
    <h1> Disable options - By setting disabled Field to declare that the option is disabled </h1>
    <h4>options The first element in the specified array contains disabled: true Key value pair ,  So it's forbidden . By default , Cascader Will check the data for each item disabled Is the field true,  If the field name in your data that indicates the meaning of disable is not disabled,  Can pass props.disabled Property to specify ( Please see below API form ). Of course , value、label and children These three field names can also be specified in the same way .</h4>
    <el-cascader :options="options"></el-cascader>
  </div>
</template>

<script>
export default {
  data () {
    return {
      options: [{
        value: 'zhinan',
        label: ' guide ',
        disabled: true,
        children: [{
          value: 'shejiyuanze',
          label: ' Design principles ',
          children: [{
            value: 'yizhi',
            label: ' Agreement '
          }, {
            value: 'fankui',
            label: ' feedback '
          }, {
            value: 'xiaolv',
            label: ' efficiency '
          }, {
            value: 'kekong',
            label: ' controllable '
          }]
        }, {
          value: 'daohang',
          label: ' Navigation ',
          children: [{
            value: 'cexiangdaohang',
            label: ' Lateral navigation '
          }, {
            value: 'dingbudaohang',
            label: ' Top navigation '
          }]
        }]
      }, {
        value: 'ziyuan',
        label: ' resources ',
        children: [{
          value: 'axure',
          label: 'Axure Components'
        }, {
          value: 'sketch',
          label: 'Sketch Templates'
        }, {
          value: 'jiaohu',
          label: ' Component interaction document '
        }]
      }]
    }
  }
}
</script>

2.5. stay components Create ClearableCascader.vue

<template>
  <div>
    <h1> Can be emptied </h1>
    <h4> adopt clearable Set the input box to clear .</h4>
    <el-cascader :options="options" clearable></el-cascader>

    <h1> Show only the last level </h1>
    <h4> You can display only the label at the last level of the selected item in the input box ,  Instead of the full path of the selected item . attribute show-all-levels Defines whether to display the complete path ,  Assign it to false Only the last level is displayed .</h4>
    <el-cascader :options="options" :show-all-levels="false"></el-cascader>
  </div>
</template>

<script>
export default {
  data () {
    return {
      options: [{
        value: 'zhinan',
        label: ' guide ',
        children: [{
          value: 'shejiyuanze',
          label: ' Design principles ',
          children: [{
            value: 'yizhi',
            label: ' Agreement '
          }, {
            value: 'fankui',
            label: ' feedback '
          }, {
            value: 'xiaolv',
            label: ' efficiency '
          }, {
            value: 'kekong',
            label: ' controllable '
          }]
        }, {
          value: 'daohang',
          label: ' Navigation ',
          children: [{
            value: 'cexiangdaohang',
            label: ' Lateral navigation '
          }, {
            value: 'dingbudaohang',
            label: ' Top navigation '
          }]
        }]
      }, {
        value: 'ziyuan',
        label: ' resources ',
        children: [{
          value: 'axure',
          label: 'Axure Components'
        }, {
          value: 'sketch',
          label: 'Sketch Templates'
        }, {
          value: 'jiaohu',
          label: ' Component interaction document '
        }]
      }]
    }
  }
}
</script>

2.6. stay components Create MultipleCascader.vue

<template>
  <div>
    <h1> multi-select </h1>
    <h4> It can be done by props.multiple = true To turn on multiple selection mode . After turning on multi-choice mode ,  By default, all selected options will be displayed Tag,  You can use collapse-tags To fold Tag.</h4>
    <el-row>
      <el-col :span="5">
        <span> By default, all Tag: </span>
        <el-cascader :options="options" :props="props" clearable></el-cascader>
      </el-col>
      <el-col :span="5">
        <span> Folding display Tag: </span>
        <el-cascader :options="options" :props="props" collapse-tags clearable></el-cascader>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data () {
    return {
      props: { multiple: true },
      options: [{
        value: 1,
        label: ' Southeast ',
        children: [{
          value: 2,
          label: ' Shanghai ',
          children: [
            { value: 3, label: ' Putuo ' },
            { value: 4, label: ' Whampoa ' },
            { value: 5, label: ' Xuhui ' }
          ]
        }, {
          value: 7,
          label: ' jiangsu ',
          children: [
            { value: 8, label: ' nanjing ' },
            { value: 9, label: ' Suzhou ' },
            { value: 10, label: ' wuxi ' }
          ]
        }, {
          value: 12,
          label: ' Zhejiang ',
          children: [
            { value: 13, label: ' Hangzhou ' },
            { value: 14, label: ' ningbo ' },
            { value: 15, label: ' jiaxing ' }
          ]
        }]
      }, {
        value: 17,
        label: ' The northwest ',
        children: [{
          value: 18,
          label: ' shaanxi ',
          children: [
            { value: 19, label: ' Xi'an ' },
            { value: 20, label: ' yanan ' }
          ]
        }, {
          value: 21,
          label: ' Xinjiang Uygur Autonomous Region ',
          children: [
            { value: 22, label: ' urumqi ' },
            { value: 23, label: ' karamay ' }
          ]
        }]
      }]
    }
  }
}
</script>

2.7. stay components Create CheckStrictlyCascader.vue

<template>
  <div>
    <h1> Choose any level of options </h1>
    <h4> In radio mode ,  You can only select leaf nodes ;  And in multi-choice mode ,  Check the parent node. All the selected nodes are leaf nodes . When this feature is enabled ,  The parent-child node can be disassociated ,  Choose any level of options . It can be done by props.checkStrictly = true To set the parent-child node to deselect the Association ,  So as to achieve the purpose of selecting any level of options .</h4>
    <el-row>
      <el-col :span="5">
        <span> Single select to select any level of options : </span>
        <el-cascader :options="options" :props="{ checkStrictly: true }" clearable></el-cascader>
      </el-col>
      <el-col :span="5">
        <span> Select any level of options : </span>
        <el-cascader :options="options" :props="{ multiple: true, checkStrictly: true }" collapse-tags clearable></el-cascader>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data () {
    return {
      options: [{
        value: 'zhinan',
        label: ' guide ',
        children: [{
          value: 'shejiyuanze',
          label: ' Design principles ',
          children: [{
            value: 'yizhi',
            label: ' Agreement '
          }, {
            value: 'fankui',
            label: ' feedback '
          }, {
            value: 'xiaolv',
            label: ' efficiency '
          }, {
            value: 'kekong',
            label: ' controllable '
          }]
        }, {
          value: 'daohang',
          label: ' Navigation ',
          children: [{
            value: 'cexiangdaohang',
            label: ' Lateral navigation '
          }, {
            value: 'dingbudaohang',
            label: ' Top navigation '
          }]
        }]
      }, {
        value: 'ziyuan',
        label: ' resources ',
        children: [{
          value: 'axure',
          label: 'Axure Components'
        }, {
          value: 'sketch',
          label: 'Sketch Templates'
        }, {
          value: 'jiaohu',
          label: ' Component interaction document '
        }]
      }]
    }
  }
}
</script>

2.8. stay components Create LazyCascader.vue

<template>
  <div>
    <h1> Dynamic loading - When elected to a certain level ,  Dynamically load the options under this level </h1>
    <h4> adopt lazy Turn on dynamic loading ,  And pass lazyload To set the method to load the data source .lazyload Method has two parameters ,  The first parameter node For the current node that you click on ,  the second resolve Callback completed for data loading ( Must call ). In order to display the status of nodes more accurately ,  You can also add flag bits to the node data whether it is a leaf node ( The default field is leaf,  It can be done by props.leaf modify ),  Otherwise, it will simply judge whether it is a leaf node with or without child nodes .</h4>
    <el-cascader :props="props"></el-cascader>
  </div>
</template>

<script>
let id = 0

export default {
  data () {
    return {
      props: {
        lazy: true,
        lazyLoad (node, resolve) {
          const { level } = node
          setTimeout(() => {
            const nodes = Array.from({ length: level + 1 })
              .map(item => ({
                value: ++id,
                label: ` Options ${id}`,
                leaf: level >= 2
              }))
            //  By calling resolve Return the data of child nodes to ,  Notify component data loading complete 
            resolve(nodes)
          }, 1000)
        }
      }
    }
  }
}
</script>

2.9. stay components Create SearchCascader.vue

<template>
  <div>
    <h1> searchable - You can quickly search for options and choose </h1>
    <h4> take filterable The assignment is true You can open the search function ,  By default, it will match nodes label Or all the parent nodes label( from show-all-levels decision ) Contains the options for the input value . You can also use it filter-method Custom search logic ,  Accept a function ,  The first parameter is the node node,  The second parameter is the search keyword keyword,  By returning a Boolean value to indicate whether it hit .</h4>
    <el-row>
      <el-col :span="5">
        <span> Radio to search for : </span>
        <el-cascader placeholder=" Try searching :  guide " :options="options" filterable></el-cascader>
      </el-col>
      <el-col :span="5">
        <span> Multiple choices to search : </span>
        <el-cascader placeholder=" Try searching :  guide " :options="options" :props="{ multiple: true }" filterable></el-cascader>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data () {
    return {
      options: [{
        value: 'zhinan',
        label: ' guide ',
        children: [{
          value: 'shejiyuanze',
          label: ' Design principles ',
          children: [{
            value: 'yizhi',
            label: ' Agreement '
          }, {
            value: 'fankui',
            label: ' feedback '
          }, {
            value: 'xiaolv',
            label: ' efficiency '
          }, {
            value: 'kekong',
            label: ' controllable '
          }]
        }, {
          value: 'daohang',
          label: ' Navigation ',
          children: [{
            value: 'cexiangdaohang',
            label: ' Lateral navigation '
          }, {
            value: 'dingbudaohang',
            label: ' Top navigation '
          }]
        }]
      }, {
        value: 'ziyuan',
        label: ' resources ',
        children: [{
          value: 'axure',
          label: 'Axure Components'
        }, {
          value: 'sketch',
          label: 'Sketch Templates'
        }, {
          value: 'jiaohu',
          label: ' Component interaction document '
        }]
      }]
    }
  }
}
</script>

2.10. stay components Create ScopedCascader.vue

<template>
  <div>
    <h1> Custom node content - You can customize the node content of the alternate option </h1>
    <h4> Can pass scoped slot Customize the node content of the standby option of the cascade selector , scoped slot Two fields will be passed in node and data,  Respectively represents the Node Objects and data .</h4>
    <el-cascader :options="options">
      <template slot-scope="{ node, data }">
        <span>{
   { data.label }}</span>
        <span v-if="!node.isLeaf"> ({
   { data.children.length }}) </span>
      </template>
    </el-cascader>
  </div>
</template>

<script>
export default {
  data () {
    return {
      options: [{
        value: 'zhinan',
        label: ' guide ',
        children: [{
          value: 'shejiyuanze',
          label: ' Design principles ',
          children: [{
            value: 'yizhi',
            label: ' Agreement '
          }, {
            value: 'fankui',
            label: ' feedback '
          }, {
            value: 'xiaolv',
            label: ' efficiency '
          }, {
            value: 'kekong',
            label: ' controllable '
          }]
        }, {
          value: 'daohang',
          label: ' Navigation ',
          children: [{
            value: 'cexiangdaohang',
            label: ' Lateral navigation '
          }, {
            value: 'dingbudaohang',
            label: ' Top navigation '
          }]
        }]
      }, {
        value: 'ziyuan',
        label: ' resources ',
        children: [{
          value: 'axure',
          label: 'Axure Components'
        }, {
          value: 'sketch',
          label: 'Sketch Templates'
        }, {
          value: 'jiaohu',
          label: ' Component interaction document '
        }]
      }]
    }
  }
}
</script>

2.11. stay components Create PanelCascader.vue

<template>
  <div>
    <h1> Cascading panels </h1>
    <h4> Cascade panel is the core component of cascade selector ,  Same as cascade selector ,  There's a single choice 、 multi-select 、 Dynamic loading and other functions . Like cascading selectors ,  adopt options To specify the options ,  Can also pass props To set multiple choices 、 Dynamic loading and other functions ,  For details, see API.</h4>
    <el-cascader-panel :options="options"></el-cascader-panel>
  </div>
</template>

<script>
export default {
  data () {
    return {
      options: [{
        value: 'zhinan',
        label: ' guide ',
        children: [{
          value: 'shejiyuanze',
          label: ' Design principles ',
          children: [{
            value: 'yizhi',
            label: ' Agreement '
          }, {
            value: 'fankui',
            label: ' feedback '
          }, {
            value: 'xiaolv',
            label: ' efficiency '
          }, {
            value: 'kekong',
            label: ' controllable '
          }]
        }, {
          value: 'daohang',
          label: ' Navigation ',
          children: [{
            value: 'cexiangdaohang',
            label: ' Lateral navigation '
          }, {
            value: 'dingbudaohang',
            label: ' Top navigation '
          }]
        }]
      }, {
        value: 'ziyuan',
        label: ' resources ',
        children: [{
          value: 'axure',
          label: 'Axure Components'
        }, {
          value: 'sketch',
          label: 'Sketch Templates'
        }, {
          value: 'jiaohu',
          label: ' Component interaction document '
        }]
      }]
    }
  }
}
</script>

2.12. Run the project , visit http://localhost:8080/#/Cascader