vue树形组件封装（移动端）

置顶 已于 2022-03-13 14:35:28 修改
阅读量1w 收藏 10
点赞数 2
分类专栏： vue 文章标签： vue移动端树形组件
于 2019-12-10 09:38:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37899792/article/details/103469116
版权

最近在做移动端的项目，由于没有找见移动端树形组件，所以封装了一个。包含加载所有数据的功能以及懒加载功能。

以下是目录结构

以下是完成后的ui  点击左侧切换“展开”、“收起”   点击右侧其他操作

然后直接上代码 

以下是懒加载的例子，一次性全部加载的就不放了

组件说明：

* 组件说明：树形组件
  itemActive:是否需要高亮显示  Boolean
  data:树形组件的数据 Array类型
  props:组件属性  Object {id:'',children:'',name:''}
  lazy:是否开启懒加载 Boolean 
  @load:懒加载回调方法 Funciton  返回当前点击项的所有数据
  @click:点击事件方法 Funciton 返回当前点击项的所有数据
  clickableConditions: 可以点击的条件 Object
    {
        //所有的列表是否可以点击
        all: {
          enable: true
        },

      //部分的列表可以点击 
      //以下条件说明【 orgType = 1或orgType = 2时可以点击】
      part: {
        prop: "orgType", 
        value: [1,2]
      }
    },

WarningMessage.vue


/*
 * @Autor: Mr Lu
 * @Version: 1.0
 * @Date: 2019-12-03
 * @LastEditors: OBKoro1
 * @LastEditTime: 2019-12-03
 * @Description:  预警信息
 * 组件说明：树形组件
  itemActive:是否需要高亮显示  Boolean
  data:树形组件的数据 Array类型
  props:组件属性  Object {id:'',children:'',name:''}
  lazy:是否开启懒加载 Boolean 
  @load:懒加载回调方法 Funciton  返回当前点击项的所有数据
  @click:点击事件方法 Funciton 返回当前点击项的所有数据
  clickableConditions: 可以点击的条件 Object
    {
        //所有的列表是否可以点击
        all: {
          enable: true
        },

      //部分的列表可以点击 
      //以下条件说明【 orgType = 1或orgType = 2时可以点击】
      part: {
        prop: "orgType", 
        value: [1,2]
      }
    },
 */
<template>
  <div id="WarningMessage" class="p-box">
    <div class="p-return">
      <mu-appbar color="primary" class="lan-header">
        <mu-button icon slot="left" v-close>
          <i class="iconfont angle-left iconangle-left"></i>
        </mu-button>预警信息
      </mu-appbar>
    </div>
    <div class="p-content">
      <wallModule name="预警总计(个)" :total="totalCount" :bgImage="wallBgImage" />
      <div class="t-box">
        <div class="t-title">质量检查</div>
        <div class="t-content">
          <div class="t-header">
            <span class="name">超期未整改</span>
            <span class="total">{{totalCount}}</span>
          </div>
          <div class="t-body">
            <mTree
              v-show="tree.data.length"
              :data="tree.data"
              :props="tree.defaultProps"
              :lazy="true"
              @load="loadData"
              :clickableConditions="tree.clickableConditions"
              @click="skipPage"
              :showTotal="true"
            ></mTree>
            <NoData v-if="!tree.data.length&&!tree.loading" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import WeatherModule from "@/weather/WeatherModule";
import wallModule from "@/wall/wallModule";
import mTree from "@/tree/mTree";
export default {
  name: "WarningMessage",
  components: {
    WeatherModule,
    mTree,
    wallModule
  },
  data() {
    return {
      totalCount: 0,
      overflowDateCount: 0,
      wallBgImage: require("#/assets/img/wall/wall.png"),
      tree: {
        loading: false,
        defaultProps: {
          id: "orgId",
          name: "orgName",
          children: "children"
        },
        clickableConditions: {
          all: {
            //所有的是否可以点击
            enable: false
          },
          part: {
            //部分的可以点击的条件
            prop: "orgType",
            value: [1]
          }
        },
        data: []
      }
    };
  },
  computed: {},
  created() {
    this.initPage();
  },
  mounted() {},
  watch: {},
  methods: {
    skipPage(treeRowData) {},
    initPage() {
      this.getTotal();
      let params = {
        orgId: this.$A.GS("orgInfo")["orgId"],
        type: this.$A.GS("orgInfo")["type"],
        alarmStatus: 2
      };

      this.getData(params).then(response => {
        if (response.code == 200) {
          this.tree.data =
            response.body && response.body.length ? response.body : [];
        } else {
          this.tree.data = [];
        }
      });
    },
    getTotal() {
      let params = {
        orgId: this.$A.GS("orgInfo")["orgId"],
        type: this.$A.GS("orgInfo")["type"]
      };
      this.$A.Go("get", "/safety/qualityTotalAlarm/statistic", params).then(
        response => {
          if (response.code == 200) {
            this.totalCount = response.body.totalAlarmCount;
          }
        },
        err => {
          console.log(err);
        }
      );
    },
    loadData(treeRowData) {
      let params = {
        orgId: treeRowData.orgId,
        type: treeRowData.orgType,
        alarmStatus: 2
      };
      this.getData(params).then(response => {
        if (response.code == 200) {
          if (response.body && response.body.length) {
            var newArray = response.body;
            newArray.forEach(element => {
              element.level = treeRowData.level + 1;
            });
            this.$set(treeRowData, "children", newArray);
            this.$set(treeRowData, "expanded", true);
          } else {
            this.$set(treeRowData, "isLeaf", true);
          }
        } else {
        }
      });
    },
    getData(params) {
      this.$openLoading();
      this.tree.loading = true;
      let p = new Promise((resolve, reject) => {
        this.$A.Go("post", "/safety/importantRectLayer/statistic", params).then(
          response => {
            this.$closeLoading();
            this.tree.loading = false;
            resolve(response);
          },
          err => {
            this.$closeLoading();
            this.tree.loading = false;
            console.log(err);
          }
        );
      });
      return p;
    }
  },
  destroyed() {}
};
</script>

<style lang="scss">
#WarningMessage {
    //树形组件样式
.treeList {
  border-top: 0.01rem solid $borderColor;



  [role="tree-content"] {
    background-color: #fff;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: inherit;
    height: 0.55rem;
    display: block;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    display: flex;
    align-items: center;
    border-bottom: 0.01rem solid #e0e0e0;


    [role="title"].active {
      >.tree-content-icon {
        background: $themeColoro;
      }
    }

    [role="title"].active {
      >.tree-content-label {
        background: $themeColoro;
      }
    }

    [role="title"] {
      height: 100%;
      width: 100%;
      display: flex;
      align-items: center;

      .tree-content-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        color: $themeColor;
        height: 100%;
        padding: 0 0.14rem;
        border-right: 0.01rem solid rgba(224, 224, 224, 1);

        .iconfont {
          margin-left: 0.03rem;
          font-size: 0.08rem;
        }
      }

      .tree-content-icon.disabled {
        color: $themeColoro;
        cursor: not-allowed;
      }

      .tree-content-label {
        flex: 1;
        height: 100%;
        display: flex;
        min-width: 0;
        align-items: center;
        justify-content: space-between;
        padding: 0 0.14rem;

        .name {
          flex: 1;
          white-space: nowrap;
          text-overflow: hidden;
          text-overflow: ellipsis;
          overflow: hidden;
        }

        .icon {
          display: flex;
          height: 100%;
          align-items: center;
          margin-left: 0.05rem;

          .iconfont {
            margin-left: 0.15rem;
            color: #dbdbdb;
          }
        }
      }
    }
  }

  [role="tree-children"] {
    background: #fff;
  }

  [role="tree-children"]::before {
    content: "";
  }

  .iconfont.iconhidden {
    visibility: hidden;
  }

  .iconfont.iconnone {
    display: none;
  }
}

}
</style>

mTree.vue

<template>
  <div role="tree" class="treeList">
    <treeItem :node="node" v-bind="$attrs" v-on="$listeners" ref="tree" />
  </div>
</template>
<script>
import treeItem from "./tree-item";
export default {
  name: "mTree",
  components: {
    treeItem
  },
  props: {
    data: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      node: []
    };
  },
  computed: {},
  created() {},
  mounted() {},
  watch: {
    data: {
      handler(val, oldVal) {
        this.node = this.dealTreeData(val, 1);
      },
      deep: true
    }
  },
  methods: {
    dealTreeData(tree, level) {
      let arr = [];
      tree.length &&
        tree.forEach((item, index) => {
          let obj = {};
          obj = this.deepCopy(item);
          obj.level = level;
          // obj.expanded = true;
          if (item.children && item.children.length) {
            obj.children = this.dealTreeData(item.children, level + 1);
          } else {
            if (!this.$attrs.lazy) {
              obj.isLeaf = true;
            } else {
              obj.isLeaf = false;
            }
          }
          arr.push(obj);
        });
      return arr;
    },
    deepCopy(obj) {
      var result = Array.isArray(obj) ? [] : {};
      for (var key in obj) {
        if (obj.hasOwnProperty(key)) {
          if (typeof obj[key] === "object" && obj[key] !== null) {
            result[key] = this.deepCopy(obj[key]); //递归复制
          } else {
            result[key] = obj[key];
          }
        }
      }
      return result;
    },
    postData(data) {
      // this.$emit("load", data);
    }
  },
  destroyed() {}
};
</script>

<style lang="scss">
</style>

treeItem.vue

<template>
  <div class>
    <div role="tree-item" class="treeItem" v-for="(item) in node" :key="item[$attrs.props.id]">
      <div role="tree-content">
        <div
          role="title"
          :class="item[$attrs.props.id]==currentId?'active':''"
          :style="{'background':`rgba(${255-colorLevel*(item.level-1)},${255-colorLevel*(item.level-1)},${255-colorLevel*(item.level-1)})`}"
        >
          <!-- 展开或收起 -->
          <!-- :style="{'visibility':item.isLeaf&&!item[$attrs.props.children]?'hidden':'visible'}" -->
          <span
            class="tree-content-icon"
            @click.stop="item.isLeaf&&!item[$attrs.props.children]?'':treeToggleClick(item)"
            :class="item.isLeaf&&!item[$attrs.props.children]?'disabled':''"
          >
            {{item.isLeaf&&!item[$attrs.props.children]?"展开":item['expanded']?'收起':"展开"}}
            <!-- <span
              class="iconfont"
              :class="item['expanded']?'iconangle-down':'iconangle-right'"
            ></span>-->
          </span>
          <!-- 标题 -->
          <!-- !enabledConfigClick?'':clickType == 'all'?treeConfigClick(item):(item[$attrs.clickableConditions.part.prop]==$attrs.clickableConditions.part.value?treeConfigClick(item):false) -->
          <label
            class="tree-content-label"
            @click.stop="!enabledConfigClick?'':clickType == 'all'?treeConfigClick(item):($attrs.clickableConditions.part.value.includes(item[$attrs.clickableConditions.part.prop])?treeConfigClick(item):false)"
          >
            <span class="name">{{ item[$attrs.props.name]}}</span>
            <span class="icon">
              <span v-if="$attrs.showTotal">{{item.projectCount}}</span>
              <i
                class="iconfont iconangle-right"
                v-if="!enabledConfigClick?false:clickType == 'all'?true:($attrs.clickableConditions.part.value.includes(item[$attrs.clickableConditions.part.prop])?true:false)"
              ></i>
              <i
                class="iconfont iconangle-right"
                v-else
                :class="$attrs.showTotal?'iconhidden':'iconnone'"
              ></i>
            </span>
          </label>
        </div>
      </div>
      <VerticalToggle>
        <!-- :style="{ 'padding-left':  .14 + 'rem' }" -->
        <div role="tree-children" v-if="item['expanded']">
          <treeItem :node="item[$attrs.props.children]" v-bind="$attrs" v-on="$listeners" />
        </div>
      </VerticalToggle>
    </div>
  </div>
</template>
<script>
import VerticalToggle from "./js/VerticalToggle";
export default {
  name: "treeItem",
  components: {
    VerticalToggle
  },
  props: {
    node: {}
  },
  data() {
    return {
      tree: null,
      data: [],
      currentId: "",
      enabledConfigClick: false,
      clickType: "all",
      colorLevel: 5
    };
  },
  computed: {},
  created() {
    if (this.$attrs.clickableConditions) {
      if (
        this.$attrs.clickableConditions.all &&
        this.$attrs.clickableConditions.all.enable
      ) {
        this.enabledConfigClick = true;
        this.clickType = "all";
      } else if (this.$attrs.clickableConditions.part) {
        this.enabledConfigClick = true;
        this.clickType = "part";
      } else {
        this.enabledConfigClick = false;
      }
    } else {
      this.enabledConfigClick = false;
    }
  },
  mounted() {},
  watch: {},
  methods: {
    /**点击展开收起的事件 */
    treeToggleClick(item) {
      // this.currentId = item[this.$attrs.props.id];
      if (this.$attrs.lazy) {
        if (item.isLeaf || item[this.$attrs.props.children]) {
          this.$set(item, "expanded", !item.expanded);
        } else {
          if (item.orgType && item.orgType == 1) {
            this.$set(item, "expanded", !item.expanded);
            this.$set(item, "isLeaf", true);
          } else {
            this.$parent.$emit("load", item);
          }
          //this.$parent.$emit("load", item);
        }
      } else {
        this.$set(item, "expanded", !item.expanded);
      }
    },
    /**点击右侧文字的事件 */
    treeConfigClick(item) {
      this.$attrs.itemActive
        ? (this.currentId = item[this.$attrs.props.id])
        : "";
      this.$parent.$emit("click", item);
    },
    postData(item) {
      debugger;
    }
  },
  destroyed() {}
};
</script>

<style lang="scss">
/*树形组件*/
</style>

有蝉
关注
专栏目录
vue2/3 - 实现手机H5移动端树形无限级组件，在vue网页中使用tree树形菜单或下拉弹框树形节点菜单，支持某项禁用选中、自定义样式、可嵌套在弹框内等（详细示例组件源码，一键复制即可使用）
高级前端工程师
02-20 3907
vue，h5网页，vue手机端，树形菜单，tree，vue树形菜单，树形下拉框，树形下拉选择，树形目录，树形下拉列表，树形插件，树形列表，vue移动端树形控件插件，移动端树控件，vue树形列表（单选，多选）tree树组件，基于Vue的树形选择组件，Vue.js的移动端Tree树形组件，移动端树形选择组件，vue树形组件封装（移动端），vue递归组件树形控件实例代码，Vue2递归组件实现树形菜单，vue3使用递归组件实现树形目录的方法，vue手机h5网站树形控件，vue3之H5实现树形结构，vue实现自定义实
基于vue.js实现移动端树形结构的封装
weixin_34413357的博客
08-31 8266
前言 前些日子做了一个pc端树形表格的功能，由于项目需要，移动端也要一个树形展示，虽然很不情愿，个人觉得在移动端做多级树结构不是不合理，操作也不方便，但是没办法，给产品交（si）流（bi）很久还是乖乖去做。 主要技术点：vue子组件的递归实现及相关样式的实现 话不多说，先看效果图（在线预览）（数据和树表格是同一个）： 注：上面这个iPhoneX效果图是用Devices.css实现的，模拟...
移动端封装tree树形结构渲染
qq_1212的博客
08-02 995
子组件 <template> <div class="experTree"> <ul v-for="(item, index) in data" :key="index"> <li class="experTree_info anime_time active"> <div class="experTree_bar" @click="onOpenHandler(item, index)">
记录基于Vue.js的移动端Tree树形组件
Mr.小灰狼_随笔
06-09 1万+
Vue 树形选择器（ Vue tree select ）组件在搭建 Vue 的 app 中特别常用，Vue tree select 除了简单的树形结构外，还有非常多样的功能来配合不同场景的使用。比如搜索过滤，前端添加删除树枝，前端编辑修改子树名，拖拽排序，对用户操作事件记录等。本文记录了我自己使用多年最好用的 2款 Vue tree select 组件，每一款都经过我实际测试，推荐给大家。
Vue入门实践：Element-UI树形组件封装与组织机构树实现
最新发布
gitblog_09814的博客
09-06 269
Vue入门实践：Element-UI树形组件封装与组织机构树实现 新建文件夹.zip_0_1_2_3项目地址:https://gitcode.com/open-source-toolkit/72843 项目简介 本项目提供了一个基于Vue和Element-UI的树形组件封装资源，通过该资源，您可以轻松实现一个可编辑的组织机构树（editableTree）。项目的主要内容来源于CSDN博客文章《V...
基于vue app/h5的 手机端树状组件
zq1234sfg的博客
07-19 2042
最近有个手机端需求需要展示一个树状的树形菜单 发现开源的没有太好的轮子 结合了一些资料封装了一个树形组件。如有问题请私信 承接微信小程序 微信公众号 web网站 app开发等 如有需要请私信。tree.vue 代码如下。
Vue移动端树形控件实现（递归组件）
Jerry的博客
03-14 9989
写在前面 因项目中需要用到树形控件，第三方的组件也不满足项目的使用需求，就自己造了一个车轮子，用Vue递归组件的方式实现，代码简单易懂，直接复制即可使用。 效果图 子组件代码 <template> <ul v-if="data.length"> <li v-for="(item, i) in data" :key="i" @click.stop="sel...
移动端树形选择组件 -- 基于vant4+vue3 支持多选、单选、节点搜索
Jie0817的博客
07-24 6304
【代码】移动端树形选择组件 -- 基于vant4+vue3 支持多选、单选、节点搜索。
Vue2组件tree实现无限级树形菜单
08-31
1. 组件化思维：将树形菜单封装为独立的Vue组件。 2. 数据传递：通过`props`将数据从父组件传给子组件。 3. 事件监听：使用`v-on`或`@`语法处理节点点击事件。 4. 属性配置：通过`options`对象提供可配置的组件行为...
【Vue入门实践】Element-UI 树形组件el-tree的组件封装 =＞实现组织机构树Tree =＞ 使用vue-content-menu定制可编辑树结构editableTree
热门推荐
Sabrina_cc的博客
12-03 1万+
本文主要讲解了基础Element-ui中el-tree组件的使用，包括对组织机构树的组件封装，使用组织机构树进行查询，以及使用vue-content-menu修改editableTree
uni-app tree(树状) 组件
qq_42717015的博客
09-13 9251
uni-app tree(树状) 组件
移动端 日期，树...等控件的js插件
06-16
移动端 日期，树...等控件的js插件 if (!window.jQuery) { var jQuery = Zepto; (function (a) { [ 'width', 'height' ].forEach(function (k) { a.fn[k] = function (n) { var t, c = document.body, h = document.documentElement, b = k.replace(/./, function (a) { return a[0].toUpperCase() }); return void 0 === n ? this[0] == window ? h['client' + b] : this[0] == document ? Math.max(c['scroll' + b], c['offset' + b], h['client' + b], h['scroll' + b], h['offset' + b]) : (t = this.offset()) && t[k] : this.each(function () { a(this).css(k, n) }) } }); [ 'width', 'height'
vue2树形组件打造vue2下最简洁高效的树组件
08-12
vue2树形组件,打造vue2下最简洁高效的树组件
基于Vue的树形选择组件
08-08
基于 Vue 的树形选择组件
js移动端树型列表
10-18
简介，易修改的移动端js树型列表
h5移动端部门树展示
04-13
h5移动端树列表
vue element 写的登录页面_vue常用框架和组件代码，抓紧收藏转发吧
weixin_39631316的博客
11-25 818
因为上次整理了一下小程序的部分案例代码，很多小伙伴还是很喜欢的，有私信我的说能不能整理一下vue的框架和组件，那就满足你们的要求1.element-ui饿了么出品的基于Vue2.0的ui框架http://element-cn.eleme.io/#/zh-CN 2.iview 和element-ui差不多的组件库https://iviewui.com/3.mint-ui...
移动端树形结构
一个前端工作者的博客
04-10 1939
该组件依据需求来做，当前包含三种选择状态，选中，未选中，半选。由于不需要做树形的收缩展开故没有写相关内容。树形展开与收缩与选中类似，只需要在节点上挂载相关字段即可实现。由于需求需要增加不限的功能，所以改组件内部实现不限的勾选。
vue2 uniapp Tree 树形控件基础 组件
HHH917的博客
02-09 3136
【代码】vue2 uniapp Tree 树形控件基础 组件。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值