Vue Ant a-tree 获取半选的ID

最新推荐文章于 2024-04-09 19:48:11 发布

Teln_小凯

最新推荐文章于 2024-04-09 19:48:11 发布

阅读量762

点赞数

分类专栏： VUE 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq873113580/article/details/128734533

版权

VUE 专栏收录该内容

87 篇文章 0 订阅

订阅专栏

效果图：

选中的值+半选的值：this.menuTreeSelectKeys 就是拿到所有全选的数据

menuTreeOnCheck(nodes, e) {
      this.menuTreeSelectKeys=nodes.concat(e.halfCheckedKeys);
    },

<a-tree v-model="menuTreeCheckedKeys" checkable @check="menuTreeOnCheck" @expand="menuTreeOnExpand" :expanded-keys="menuTreeExpandedKeys" :auto-expand-parent="menuTreeAutoExpandParent" :tree-data="menuTreeData" :dropdown-style="{ maxHeight: '300px', overflow: 'auto' }" :replaceFields="{
                    children: 'children',
                    title:
                      $store.state.setting.lang == 'CN'
                        ? 'menu_name'
                        : 'menu_name_en',
                    key: 'menu_id',
                    value: 'menu_id',
                  }">
              <template slot="title" slot-scope="title">
                <span v-if="$store.state.setting.lang == 'CN' && title.menu_name.indexOf(menuTreeSearchValue) > -1">
                  {{ title.menu_name.substr(0, title.menu_name.indexOf(menuTreeSearchValue)) }}
                  <span style="color: #f50">{{ menuTreeSearchValue }}</span>
                  {{ title.menu_name.substr(title.menu_name.indexOf(menuTreeSearchValue) + menuTreeSearchValue.length) }}
                </span>
                <span v-else-if="$store.state.setting.lang == 'US' && title.menu_name_en.indexOf(menuTreeSearchValue) > -1">
                  {{ title.menu_name_en.substr(0, title.menu_name_en.indexOf(menuTreeSearchValue)) }}
                  <span style="color: #f50">{{ menuTreeSearchValue }}</span>
                  {{ title.menu_name_en.substr(title.menu_name_en.indexOf(menuTreeSearchValue) + menuTreeSearchValue.length) }}
                </span>
                <span v-else>{{ $store.state.setting.lang == 'CN'?title.menu_name: title.menu_name_en}}</span>
              </template>
            </a-tree>