展开收起vue3

最新推荐文章于 2024-06-07 17:49:09 发布

喵喵酱仔__

最新推荐文章于 2024-06-07 17:49:09 发布

阅读量108

点赞数 3

分类专栏： vue3项目文章标签： vue.js

本文链接：https://blog.csdn.net/qq_38210427/article/details/138890564

版权

vue3项目专栏收录该内容

15 篇文章 0 订阅

订阅专栏

   <div style="display: flex; flex-direction: column">
                  <div class="checkAll">
                    <el-button type="primary" link @click="areConditionFold">
                      <!-- {{ conditionFold ? '展开' : '收起' }} -->
                      <el-icon v-if="conditionFold"><ArrowDown /></el-icon>
                      <el-icon v-else><ArrowUp /></el-icon>
                    </el-button>
                    <el-checkbox
                      style="margin-right: 20px"
                      :indeterminate="isIndeterminate"
                      v-model="departmentCheckAll"
                      @change="handleCheckAllChange"
                    >
                      广告账户管理
                    </el-checkbox>
                  </div>
                  <div
                    class="checkItem"
                    v-show="conditionFold"
                    style="margin-left: 20px"
                  >
                    <el-checkbox-group
                      v-model="selectedItems"
                      @change="handleCheck(selectedItems)"
                    >
                      <el-checkbox
                        v-for="item in department"
                        :key="item.id"
                        :label="item.id"
                      >
                        {{ item.name }}
                      </el-checkbox>
                    </el-checkbox-group>
                  </div>
                </div>




// 展开关闭
const conditionFold = ref(true)
const areConditionFold = () => {
  conditionFold.value = !conditionFold.value
}