Vue2通过ref来操作循环中得el-cascader级联组件得展示与关闭

上优

于 2024-01-13 15:26:26 发布

阅读量1k

点赞数 17

文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/weixin_65084919/article/details/135570912

版权

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <!-- <link
      rel="stylesheet"
      href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    />
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.13/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@unocss/runtime"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script> -->

    <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>