mirror of
https://github.com/element-plus/element-plus.git
synced 2025-01-30 11:16:12 +08:00
docs(components): [cascader] better presentation (#10780)
This commit is contained in:
parent
200eca3498
commit
31b5b92edd
@ -1,14 +1,10 @@
|
||||
<template>
|
||||
<div class="example-block">
|
||||
<span class="example-demonstration"
|
||||
>Select any level of options (Single selection)</span
|
||||
>
|
||||
<div class="m-4">
|
||||
<p>Select any level of options (Single selection)</p>
|
||||
<el-cascader :options="options" :props="props1" clearable />
|
||||
</div>
|
||||
<div class="example-block">
|
||||
<span class="example-demonstration"
|
||||
>Select any level of options (Multiple selection)</span
|
||||
>
|
||||
<div class="m-4">
|
||||
<p>Select any level of options (Multiple selection)</p>
|
||||
<el-cascader :options="options" :props="props2" clearable />
|
||||
</div>
|
||||
</template>
|
||||
@ -292,12 +288,3 @@ const options = [
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.example-block {
|
||||
margin: 1rem;
|
||||
}
|
||||
.example-demonstration {
|
||||
margin: 1rem;
|
||||
}
|
||||
</style>
|
||||
|
@ -1,12 +1,10 @@
|
||||
<template>
|
||||
<div class="example-block">
|
||||
<span class="example-demonstration"
|
||||
>Child options expand when clicked (default)</span
|
||||
>
|
||||
<div class="m-4">
|
||||
<p>Child options expand when clicked (default)</p>
|
||||
<el-cascader v-model="value" :options="options" @change="handleChange" />
|
||||
</div>
|
||||
<div class="example-block">
|
||||
<span class="example-demonstration">Child options expand when hovered</span>
|
||||
<div class="m-4">
|
||||
<p>Child options expand when hovered</p>
|
||||
<el-cascader
|
||||
v-model="value"
|
||||
:options="options"
|
||||
@ -298,12 +296,3 @@ const options = [
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.example-block {
|
||||
margin: 1rem;
|
||||
}
|
||||
.example-demonstration {
|
||||
margin: 1rem;
|
||||
}
|
||||
</style>
|
||||
|
@ -1,14 +1,14 @@
|
||||
<template>
|
||||
<div class="example-block">
|
||||
<span class="example-demonstration">Filterable (Single selection)</span>
|
||||
<div class="m-4">
|
||||
<p>Filterable (Single selection)</p>
|
||||
<el-cascader
|
||||
placeholder="Try searchingL Guide"
|
||||
:options="options"
|
||||
filterable
|
||||
/>
|
||||
</div>
|
||||
<div class="example-block">
|
||||
<span class="example-demonstration">Filterable (Multiple selection)</span>
|
||||
<div class="m-4">
|
||||
<p>Filterable (Multiple selection)</p>
|
||||
<el-cascader
|
||||
placeholder="Try searchingL Guide"
|
||||
:options="options"
|
||||
@ -292,12 +292,3 @@ const options = [
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.example-block {
|
||||
margin: 1rem;
|
||||
}
|
||||
.example-demonstration {
|
||||
margin: 1rem;
|
||||
}
|
||||
</style>
|
||||
|
@ -1,14 +1,14 @@
|
||||
<template>
|
||||
<div class="example-block">
|
||||
<span class="example-demonstration">Display all tags (default)</span>
|
||||
<div class="m-4">
|
||||
<p>Display all tags (default)</p>
|
||||
<el-cascader :options="options" :props="props" clearable />
|
||||
</div>
|
||||
<div class="example-block">
|
||||
<span class="example-demonstration">Collapse tags</span>
|
||||
<div class="m-4">
|
||||
<p>Collapse tags</p>
|
||||
<el-cascader :options="options" :props="props" collapse-tags clearable />
|
||||
</div>
|
||||
<div class="example-block">
|
||||
<span class="example-demonstration">Collapse tags tooltip</span>
|
||||
<div class="m-4">
|
||||
<p>Collapse tags tooltip</p>
|
||||
<el-cascader
|
||||
:options="options"
|
||||
:props="props"
|
||||
@ -106,12 +106,3 @@ const options = [
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.example-block {
|
||||
margin: 1rem;
|
||||
}
|
||||
.example-demonstration {
|
||||
margin: 1rem;
|
||||
}
|
||||
</style>
|
||||
|
Loading…
Reference in New Issue
Block a user