【记录】iview 面板+多选实现一个树形结构

Bumblebee-Wxr

于 2020-05-28 09:16:50 发布

阅读量479

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/qq_40580988/article/details/106396531

版权

本文记录了如何利用iview组件库，在Vue项目中创建一个具备多选功能的树形结构面板，详细介绍了配置和使用过程。

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

<template>
    <Card style="height:100%;" :title="title">
         <Collapse v-model="panel" @on-change="openPanel">
           <Panel name="goods" hide-arrow>
             <span @click.stop.prevent="handleCheckAll('goods')">
               <Checkbox 
                 :indeterminate="indeterminates.goods"
                 :value="isSelectAll.goods"
                 >商品管理</Checkbox>
             </span>
             <div slot="content">
               <CheckboxGroup v-model="selectArr.goods" @on-change="checkAllGroupChange('goods')">
                 <Checkbox v-for="(item,index) in data.goods" :label="item" :key="index" ></Checkbox>
               </CheckboxGroup>
             </div>
           </Panel>
           <Panel name="order" hide-arrow>
             <span @click.stop.prevent="handleCheckAll('order')">  
               <Checkbox 
                 :indeterminate="indeterminates.order"
                 :