element ui 穿梭框支持 树形结构(仅支持2层)

代码如下 

<div class="el-transfer flex-space-between-center padding-0-20">
      <div class="el-transfer-panel">
        <p class="el-transfer-panel__header">
          <el-checkbox
            v-model="leftObj.checkAll"
            :indeterminate="leftObj.isIndeterminate"
            :disabled="leftObj.allCount === 0"
            @change="(val) => checkboxChange(val, 'leftObj')"
          >全部城市</el-checkbox>
          <span class="count-float-right">{
  { leftObj.chooseCount }}/{
  { leftObj.allCount }}</span>
        </p>
        <div class="el-transfer-panel__body">
          <div v-if="!leftObj.treeData.length" class="el-transfer-panel__empty">无数据</div>
          <el-tree
            v-else
            :ref="leftObj.treeRef"
            class="transfer-tree"
            :data="leftObj.treeData"
            show-checkbox
            node-key="code"
            :props="defaultProps"
            @check-change="checkLeftChange"
          />
        </div>
      </div>
      <div class="el-transfer__buttons">
        <el-button type="primary"
  • 9
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Element UI提供了一个强大的组件el-tree,用于展示树形结构的数据。你可以通过直接通过后台数据接口请求获取树型数据,并利用el-tree组件进行数据的绑定和展示。 el-tree组件还提供了一些内置方法,比如handleNodeClick,用于获取树型数据中点击的具体数据。你可以在该方法中通过判断数据的级来进行相应的操作,比如判断是否是最后两级的数据,然后进行相应的处理逻辑。 通过以上方式,你可以利用Element UI的el-tree组件实现树形结构的展示和交互功能。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vue.jselement-ui实现菜单树形结构的解决方法](https://download.csdn.net/download/weixin_38685793/12957540)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [Elementui树形结构](https://blog.csdn.net/qq_44316317/article/details/120399245)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值