<template> <div style="display: flex; justify-content: center; margin-top: 200px;"> <el-cascader ref="cascader" v-model="addrCode" :options="options" :props="{ checkStrictly: true, expandTrigger: 'hover', emitPath: false }"> <template slot-scope="{ node, data }"> <div @click="cascaderClick(data)"> <span>{{ data.label }}</span> <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span> </div> </template> </el-cascader> </div> </template> <script> export default { data () { return { options: [ { "label": "广东", "value": "440000", "children": [{ "label": "广州", "value": "440100" }, { "label": "深圳", "value": "440300" }] }, { "label": "宁夏", "value": "640000", "children": [{ "label": "银川", "value": "640100" }] } ], addrCode: undefined, }; }, methods: { cascaderClick (nodeData) { this.addrCode = nodeData.value; this.$refs.cascader.checkedValue = nodeData.value; this.$refs.cascader.computePresentText(); this.$refs.cascader.toggleDropDownVisible(false); this.$message({ message: '已选择:' + nodeData.label, type: 'success', duration: 1000 }); }, } }; </script>