Matches Arco Cascader with a filled input and an arrowless panel. See the Element Plus docs for props.
Click the input to select a path; clearable allows clearing it.
<script setup lang="ts">
import { ref } from 'vue'
const value = ref<string[]>([])
const options = [
{ value: 'europe', label: 'Europe', children: [{ value: 'london', label: 'London' }, { value: 'paris', label: 'Paris' }] },
{ value: 'asia', label: 'Asia', children: [{ value: 'tokyo', label: 'Tokyo' }] },
{ value: 'other', label: 'Other', disabled: true },
]
</script>
<template>
<el-cascader v-model="value" :options="options" clearable placeholder="Select a city" style="width: 280px" />
</template>Use el-cascader-panel to display cascading options inline.
<script setup lang="ts">
import { ref } from 'vue'
const value = ref(['europe', 'london'])
const options = [
{ value: 'europe', label: 'Europe', children: [{ value: 'london', label: 'London' }, { value: 'paris', label: 'Paris' }] },
{ value: 'asia', label: 'Asia', children: [{ value: 'tokyo', label: 'Tokyo' }] },
{ value: 'other', label: 'Other', disabled: true },
]
</script>
<template>
<el-cascader-panel v-model="value" :options="options" />
</template>