DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Documenttitle>
<link rel="stylesheet" href="./vue/element_ui.css" />
<script src="./vue/vue.js">script>
<script src="./vue/unocss.js">script>
<script src="./vue/element_ui.js">script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
style>
head>
<body>
<div id="app" class="h-100vh">
<div class="h-full flex items-center justify-center">
<div class="flex flex-col gap-20px">
<div v-for="item in list" class="flex items-center gap-10px">
<el-cascader
class="!flex-1"
:options="options"
:props="props"
collapse-tags
:ref="`choose${item.id}`"
clearable
>el-cascader>
<el-button @click="showChoose(item.id)"
>展开{{item.label}}el-button
>
<el-button @click="closeChoose(item.id)"
>关闭{{item.label}}el-button
>
div>
div>
div>
div>
<script>
new Vue({
el: '#app',
data() {
return {
props: { multiple: true },
options: [
{
value: 'option1',
label: '选项1',
children: [
{
value: 'option11',
label: '选项1-1',
children: [
{ value: 'option111', label: '选项1-1-1' },
{ value: 'option112', label: '选项1-1-2' },
],
},
{
value: 'option12',
label: '选项1-2',
children: [
{ value: 'option121', label: '选项1-2-1' },
{ value: 'option122', label: '选项1-2-2' },
],
},
],
},
{
value: 'option2',
label: '选项2',
children: [
{
value: 'option21',
label: '选项2-1',
children: [
{ value: 'option211', label: '选项2-1-1' },
{ value: 'option212', label: '选项2-1-2' },
],
},
{
value: 'option22',
label: '选项2-2',
children: [
{ value: 'option221', label: '选项2-2-1' },
{ value: 'option222', label: '选项2-2-2' },
],
},
],
},
],
list: [
{
value: '',
label: '按钮1',
id: 1,
},
{
value: '',
label: '按钮2',
id: 2,
},
],
};
},
methods: {
showChoose(id) {
this.$nextTick(() => {
this.$refs[`choose${id}`][0].toggleDropDownVisible();
});
},
closeChoose(id) {
this.$refs[`choose${id}`][0].dropDownVisible = false;
},
},
});
script>
body>
html>
