Element UI学习3--Cascader 级联选择器 约定不等于承诺〃 2023-01-03 04:16 468阅读 0赞 ## 1、基础用法 ## 1、默认 click 触发子菜单 <div class="block"> <span class="demonstration">默认 click 触发子菜单</span> <el-cascader v-model="value" :options="options" @change="handleChange"> </el-cascader> </div> <script> export default { data(){ return{ value:[], options:[ { value:'zhejiang', label:'浙江', children:[ { value:'hangzhou', label:'杭州', children:[ { value:'yuhang', label:'余杭' }, { value:'xiaoshan', label:'萧山' }, { value:'binjiang', label:'滨江' }, { value:'gongshu', label:'拱墅' } ] }, { value:'ningbo', label:'宁波', children:[ { value:'jiangbei', label:'江北' }, { value:'zhenhai', label:'镇海' }, { value:'beilun', label:'北仑' } ] } ] }, { value:'jiangxi', label:'江西', children:[ { value:'shangrao', label:'上饶', children:[ { value:'poyang', label:'鄱阳' }, { value:'yugan', label:'余干' }, { value:'yushan', label:'玉山' }, { value:'wannian', label:'万年' }, { value:'wuyuan', label:'婺源' } ] } ] } ] } }, methods:{ handleChange(value){ console.log(value) } } } </script> 如图: ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbnJhYmJpdA_size_16_color_FFFFFF_t_70_pic_center] 2、属性show-all-levels定义了是否显示完整的路径,将其赋值为false则仅显示最后一级 <div class="block"> <span class="demonstration">默认 click 触发子菜单</span> <el-cascader v-model="value" :options="options" @change="handleChange" :show-all-levels="false"> </el-cascader> </div> 如图: ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbnJhYmJpdA_size_16_color_FFFFFF_t_70_pic_center 1] 3、通过props.expandTrigger可以定义展开子级菜单的触发方式。 <div class="block"> <span class="demonstration">hover 触发子菜单</span> <el-cascader v-model="value" :options="options" :props="{ expandTrigger: 'hover' }" @change="handleChange"> </el-cascader> </div> 如图: ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbnJhYmJpdA_size_16_color_FFFFFF_t_70_pic_center 2] ## 2、多选 ## 1、默认显示所有Tag 可通过 props.multiple = true 来开启多选模式 <div class="block"> <span class="demonstration">默认显示所有Tag</span> <el-cascader :options="options" :props="props" clearable> </el-cascader> </div> <script> export default { data(){ return{ props:{ multiple:true}, options:[{ value: 1, label: '浙江', children:[{ value: 2, label: '杭州', children:[ { value: 3, label: '余杭' }, { value: 4, label: '拱墅' }, { value: 5, label: '萧山' } ] }, { value: 6, label: '宁波', children:[ { value: 7, label: '江北' }, { value: 8, label: '镇海' }, { value: 9, label: '北仑' } ] } ] }, { value: 10, label: '江西', children:[{ value: 11, label: '上饶', children:[ { value: 12, label: '鄱阳' }, { value: 13, label: '余干' }, { value: 14, label: '婺源' }, { value: 15, label: '玉山' } ] }, { value: 16, label: '南昌', children:[ { value: 17, label: '青山湖' }, { value: 18, label: '红谷滩' }, { value: 19, label: '高新' }, { value: 20, label: '向塘' } ] } ] } ] } } } 如图: ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbnJhYmJpdA_size_16_color_FFFFFF_t_70_pic_center 3] 2、折叠展示Tag 使用collapse-tags来折叠Tag <div class="block"> <span class="demonstration">折叠展示Tag</span> <el-cascader :options="options" :props="props" clearable collapse-tags> </el-cascader> </div> 如图: ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbnJhYmJpdA_size_16_color_FFFFFF_t_70_pic_center 4] ## 3、选择任意一级选项 ## 1、单选选择任意一级选项 可通过 props.checkStrictly = true 来设置父子节点取消选中关联,从而达到选择任意一级选项的目的。 <div class="block"> <span class="demonstration">单选选择任意一级选项</span> <el-cascader :options="options" :props="{ checkStrictly: true }" clearable></el-cascader> </div> 如图: ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbnJhYmJpdA_size_16_color_FFFFFF_t_70_pic_center 5] 2、多选选择任意一级选项 /div> --> <div class="block"> <span class="demonstration">多选选择任意一级选项</span> <el-cascader :options="options" :props="{ multiple: true,checkStrictly: true }" clearable></el-cascader> </div> 如图; ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbnJhYmJpdA_size_16_color_FFFFFF_t_70_pic_center 6] ## 4、自定义节点内容 ## 可以通过scoped slot对级联选择器的备选项的节点内容进行自定义, scoped slot会传入两个字段 node 和 data, 分别表示当前节点的 Node 对象和数据。 <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> 如图: ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbnJhYmJpdA_size_16_color_FFFFFF_t_70_pic_center 7] ## 5、级联面板 ## 级联面板是级联选择器的核心组件,与级联选择器一样,有单选、多选、动态加载等多种功能。 <el-cascader-panel :options="options"></el-cascader-panel> 如图: ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbnJhYmJpdA_size_16_color_FFFFFF_t_70_pic_center 8] [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbnJhYmJpdA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221119/bd86160caece41658d2c848286074646.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbnJhYmJpdA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221119/d5fd148055134a6cadf9f54a212ac071.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbnJhYmJpdA_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221119/3938c60f0a3b4001a9f6abfdb59080ca.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbnJhYmJpdA_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221119/239a46b8b28a4c918684d7461013668e.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbnJhYmJpdA_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221119/0324563634f54a47aa921088858c1d2b.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbnJhYmJpdA_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221119/d924c373e08a46938ee08cacc357cb3b.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbnJhYmJpdA_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221119/257a97d460434cec9cb6263f89d5cf29.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbnJhYmJpdA_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20221119/2ca09c92a373441893c443fdbe224b89.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbnJhYmJpdA_size_16_color_FFFFFF_t_70_pic_center 8]: /images/20221119/543206126ec249d787bf44bede47f420.png
还没有评论,来说两句吧...