el-collapse 嵌套中 el-checkbox作为标题，选中复选框与el-tree联动

@小匠

已于 2023-09-27 16:52:18 修改

阅读量1k

点赞数 1

文章标签： vue.js javascript elementui

于 2023-09-27 16:42:51 首次发布

本文链接：https://blog.csdn.net/qq_45629145/article/details/133356668

版权

该文章详细介绍了如何在Vue项目中使用el-drawer和el-collapse展示应用授权功能，涉及数据获取、动态过滤和状态同步。

摘要由CSDN通过智能技术生成

<el-drawer
      title="应用授权"
      :visible.sync="menuDrawer">
      <el-collapse accordion style="padding: 15px">
        <el-collapse-item v-for="item in platList">
          <template slot="title">
            <el-checkbox v-model="item.isCheck" :label="item.platformName" @click.stop.native="()=>{}"
                         @change="checkedAll(item.platformId, item.isCheck, item.treeIdList)"></el-checkbox>
          </template>
          <el-input
          v-model="filterText"
            @input="(val) => handleInputFilter(val, item.platformId)"
            size="mini"
            placeholder="请输入内容"
            style="width: 100%">
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>
          <el-tree
            :ref="`tree${item.platformId}`"
            style="padding-top: 7px"
            :data="item.treeData"
            :filter-node-method="filterNode"
            show-checkbox
            highlight-current
            check-strictly
            node-key="menuId"
            empty-text="暂无数据" :props="{id: 'menuId',label: 'menuName'}">
          </el-tree>
        </el-collapse-item>
      </el-collapse>
    </el-drawer>

getPlatformList(tenantId) {
      const loading = this.$loading({
        lock: true,
        text: '拼命加载中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      allPlatform(tenantId).then(async response => {
        this.platList = response.data;
        for (let item of this.platList) {
          await getMenuListByPlatform(item.platformId).then(res => {
            item.treeData = this.handleTree(res.data.menus, 'menuId')
            item.treeIdList = res.data.menuIds
          })
        }
        getMenusByTenant(tenantId).then(res=>{
          if (res.code === 200) {
            this.platList.forEach(item => {
              this.$refs[`tree${item.platformId}`][0].setCheckedKeys(res.data);
            })
          }
        })
        loading.close()
        this.menuDrawer = true
      });
    },