Element ui下拉选框（el-select）实现树下拉，全选功能

最新推荐文章于 2024-07-25 09:51:39 发布

番茄and西红柿

最新推荐文章于 2024-07-25 09:51:39 发布

阅读量3.4k

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/ddsuuny/article/details/126543090

版权

1、效果图

在这里插入图片描述

选框父子级不联动，点击全选时，联动子级一起选中

2、代码

2.1、建立一个vue文件，命名为：chooseAssest.vue, 改文件的代码如下

<template>
  <el-select
    clearable
    style="width: 90%"
    v-model="nonFixedClassifyCheck"
    :filter-method="assetsTypeFilter"
    placeholder="请选择资产分类"
    filterable
    multiple
    collapse-tags
    @change="selectAssetsTypeChange"
    @clear="assestClear"
    :disabled="isDisable"
  >
    <el-option :value="nonFixedClassifys" style="height: auto; padding: 0">
      <el-tree
        :data="classifyLists"
        :filter-node-method="filterNode"
        show-checkbox
        node-key="classifyId"
        ref="treeselect"
        highlight-current
        :props="defaultProps"
        :check-strictly="true"
        :expand-on-click-node="false"
        @check-change="handleCheckChange"
      >
        <div
          style="width: 100%"
          class="custom-tree-node"
          slot-scope="{ node, data }"
        >
          <span>{
  { node.label }}</span>
          <div
            v-if="data.children"
            style="float: right; margin-left: 5px; margin-right: 20px"
          >
            <el-button type="text" @click="checkAllTypes(data)" size="mini"
              >全选</el-button
            >
          </div>
        </div>
      </el-tree>