这里以Element-plus的示例为例
<template>
<el-cascader v-model="value" :options="options" :props="{multiple: true}" filterable @change="handleChange">
<template #default="{ node, data }">
<span>{
{
data.label }}</span>
<span v-if="!node.isLeaf"> ({
{
data.children.length }}) </span>
</template>
</el-cascader>
</template>
<script lang="ts" setup>
import {
setupElementPlus } from './element-plus.js'
setupElementPlus()
const options = [
{
value: 'guide',
label: 'Guide',
children: [
{
value: 'disciplines',
label: 'Disciplines',
children: [
{
value: 'consistency',
label: 'Consistency',
},
{
value: 'feedback',
label: 'Feedback',
},
{
value: 'efficiency',
label: 'Efficiency',
},
{
value: 'controllability',
label: 'Controllability',
},
],
},
{
value: 'navigation',
label: 'Navigation',
children: [
{
value: 'side nav',
label: 'Side Navigation',
}