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

最新推荐文章于 2025-04-02 15:54:40 发布

momo_mom177

最新推荐文章于 2025-04-02 15:54:40 发布

阅读量1.7k

点赞数 9

分类专栏： vue 文章标签： ui vue.js javascript

本文链接：https://blog.youkuaiyun.com/momo_mom177/article/details/135549177

版权

本文介绍如何在Element UI中配置穿梭框以支持两层树形结构，主要涉及Vue.js和JavaScript技术，通过示例代码展示了具体实现方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码如下

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