devbox
繁依Fanyi0
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：繁依Fanyi0 | 2024-03-14 01:04:39

赞

踩

移动端树形控件

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

以下是目录结构

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

然后直接上代码 

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

组件说明：

  1. * 组件说明：树形组件
  2.   itemActive:是否需要高亮显示  Boolean
  3.   data:树形组件的数据 Array类型
  4.   props:组件属性  Object {id:'',children:'',name:''}
  5.   lazy:是否开启懒加载 Boolean 
  6.   @load:懒加载回调方法 Funciton  返回当前点击项的所有数据
  7.   @click:点击事件方法 Funciton 返回当前点击项的所有数据
  8.   clickableConditions: 可以点击的条件 Object
  9.     {
  10.         //所有的列表是否可以点击
  11.         all: {
  12.           enable: true
  13.         },
  14.  
  15.       //部分的列表可以点击 
  16.       //以下条件说明【 orgType = 1或orgType = 2时可以点击】
  17.       part: {
  18.         prop: "orgType", 
  19.         value: [1,2]
  20.       }
  21.     },

WarningMessage.vue

  1.  
  2. /*
  3.  * @Autor: Mr Lu
  4.  * @Version: 1.0
  5.  * @Date: 2019-12-03
  6.  * @LastEditors: OBKoro1
  7.  * @LastEditTime: 2019-12-03
  8.  * @Description:  预警信息
  9.  * 组件说明：树形组件
  10.   itemActive:是否需要高亮显示  Boolean
  11.   data:树形组件的数据 Array类型
  12.   props:组件属性  Object {id:'',children:'',name:''}
  13.   lazy:是否开启懒加载 Boolean 
  14.   @load:懒加载回调方法 Funciton  返回当前点击项的所有数据
  15.   @click:点击事件方法 Funciton 返回当前点击项的所有数据
  16.   clickableConditions: 可以点击的条件 Object
  17.     {
  18.         //所有的列表是否可以点击
  19.         all: {
  20.           enable: true
  21.         },
  22.  
  23.       //部分的列表可以点击 
  24.       //以下条件说明【 orgType = 1或orgType = 2时可以点击】
  25.       part: {
  26.         prop: "orgType", 
  27.         value: [1,2]
  28.       }
  29.     },
  30.  */
  31. <template>
  32.   <div id="WarningMessage" class="p-box">
  33.     <div class="p-return">
  34.       <mu-appbar color="primary" class="lan-header">
  35.         <mu-button icon slot="left" v-close>
  36.           <i class="iconfont angle-left iconangle-left"></i>
  37.         </mu-button>预警信息
  38.       </mu-appbar>
  39.     </div>
  40.     <div class="p-content">
  41.       <wallModule name="预警总计(个)" :total="totalCount" :bgImage="wallBgImage" />
  42.       <div class="t-box">
  43.         <div class="t-title">质量检查</div>
  44.         <div class="t-content">
  45.           <div class="t-header">
  46.             <span class="name">超期未整改</span>
  47.             <span class="total">{{totalCount}}</span>
  48.           </div>
  49.           <div class="t-body">
  50.             <mTree
  51.               v-show="tree.data.length"
  52.               :data="tree.data"
  53.               :props="tree.defaultProps"
  54.               :lazy="true"
  55.               @load="loadData"
  56.               :clickableConditions="tree.clickableConditions"
  57.               @click="skipPage"
  58.               :showTotal="true"
  59.             ></mTree>
  60.             <NoData v-if="!tree.data.length&&!tree.loading" />
  61.           </div>
  62.         </div>
  63.       </div>
  64.     </div>
  65.   </div>
  66. </template>
  67.  
  68. <script>
  69. import WeatherModule from "@/weather/WeatherModule";
  70. import wallModule from "@/wall/wallModule";
  71. import mTree from "@/tree/mTree";
  72. export default {
  73.   name: "WarningMessage",
  74.   components: {
  75.     WeatherModule,
  76.     mTree,
  77.     wallModule
  78.   },
  79.   data() {
  80.     return {
  81.       totalCount: 0,
  82.       overflowDateCount: 0,
  83.       wallBgImage: require("#/assets/img/wall/wall.png"),
  84.       tree: {
  85.         loading: false,
  86.         defaultProps: {
  87.           id: "orgId",
  88.           name: "orgName",
  89.           children: "children"
  90.         },
  91.         clickableConditions: {
  92.           all: {
  93.             //所有的是否可以点击
  94.             enable: false
  95.           },
  96.           part: {
  97.             //部分的可以点击的条件
  98.             prop: "orgType",
  99.             value: [1]
  100.           }
  101.         },
  102.         data: []
  103.       }
  104.     };
  105.   },
  106.   computed: {},
  107.   created() {
  108.     this.initPage();
  109.   },
  110.   mounted() {},
  111.   watch: {},
  112.   methods: {
  113.     skipPage(treeRowData) {},
  114.     initPage() {
  115.       this.getTotal();
  116.       let params = {
  117.         orgId: this.$A.GS("orgInfo")["orgId"],
  118.         type: this.$A.GS("orgInfo")["type"],
  119.         alarmStatus: 2
  120.       };
  121.  
  122.       this.getData(params).then(response => {
  123.         if (response.code == 200) {
  124.           this.tree.data =
  125.             response.body && response.body.length ? response.body : [];
  126.         } else {
  127.           this.tree.data = [];
  128.         }
  129.       });
  130.     },
  131.     getTotal() {
  132.       let params = {
  133.         orgId: this.$A.GS("orgInfo")["orgId"],
  134.         type: this.$A.GS("orgInfo")["type"]
  135.       };
  136.       this.$A.Go("get", "/safety/qualityTotalAlarm/statistic", params).then(
  137.         response => {
  138.           if (response.code == 200) {
  139.             this.totalCount = response.body.totalAlarmCount;
  140.           }
  141.         },
  142.         err => {
  143.           console.log(err);
  144.         }
  145.       );
  146.     },
  147.     loadData(treeRowData) {
  148.       let params = {
  149.         orgId: treeRowData.orgId,
  150.         type: treeRowData.orgType,
  151.         alarmStatus: 2
  152.       };
  153.       this.getData(params).then(response => {
  154.         if (response.code == 200) {
  155.           if (response.body && response.body.length) {
  156.             var newArray = response.body;
  157.             newArray.forEach(element => {
  158.               element.level = treeRowData.level + 1;
  159.             });
  160.             this.$set(treeRowData, "children", newArray);
  161.             this.$set(treeRowData, "expanded", true);
  162.           } else {
  163.             this.$set(treeRowData, "isLeaf", true);
  164.           }
  165.         } else {
  166.         }
  167.       });
  168.     },
  169.     getData(params) {
  170.       this.$openLoading();
  171.       this.tree.loading = true;
  172.       let p = new Promise((resolve, reject) => {
  173.         this.$A.Go("post", "/safety/importantRectLayer/statistic", params).then(
  174.           response => {
  175.             this.$closeLoading();
  176.             this.tree.loading = false;
  177.             resolve(response);
  178.           },
  179.           err => {
  180.             this.$closeLoading();
  181.             this.tree.loading = false;
  182.             console.log(err);
  183.           }
  184.         );
  185.       });
  186.       return p;
  187.     }
  188.   },
  189.   destroyed() {}
  190. };
  191. </script>
  192.  
  193. <style lang="scss">
  194. #WarningMessage {
  195.     //树形组件样式
  196. .treeList {
  197.   border-top: 0.01rem solid $borderColor;
  198.  
  199.  
  200.  
  201.   [role="tree-content"] {
  202.     background-color: #fff;
  203.     -webkit-box-sizing: border-box;
  204.     box-sizing: border-box;
  205.     color: inherit;
  206.     height: 0.55rem;
  207.     display: block;
  208.     overflow: hidden;
  209.     position: relative;
  210.     text-decoration: none;
  211.     display: flex;
  212.     align-items: center;
  213.     border-bottom: 0.01rem solid #e0e0e0;
  214.  
  215.  
  216.     [role="title"].active {
  217.       >.tree-content-icon {
  218.         background: $themeColoro;
  219.       }
  220.     }
  221.  
  222.     [role="title"].active {
  223.       >.tree-content-label {
  224.         background: $themeColoro;
  225.       }
  226.     }
  227.  
  228.     [role="title"] {
  229.       height: 100%;
  230.       width: 100%;
  231.       display: flex;
  232.       align-items: center;
  233.  
  234.       .tree-content-icon {
  235.         display: flex;
  236.         align-items: center;
  237.         justify-content: center;
  238.         color: $themeColor;
  239.         height: 100%;
  240.         padding: 0 0.14rem;
  241.         border-right: 0.01rem solid rgba(224, 224, 224, 1);
  242.  
  243.         .iconfont {
  244.           margin-left: 0.03rem;
  245.           font-size: 0.08rem;
  246.         }
  247.       }
  248.  
  249.       .tree-content-icon.disabled {
  250.         color: $themeColoro;
  251.         cursor: not-allowed;
  252.       }
  253.  
  254.       .tree-content-label {
  255.         flex: 1;
  256.         height: 100%;
  257.         display: flex;
  258.         min-width: 0;
  259.         align-items: center;
  260.         justify-content: space-between;
  261.         padding: 0 0.14rem;
  262.  
  263.         .name {
  264.           flex: 1;
  265.           white-space: nowrap;
  266.           text-overflow: hidden;
  267.           text-overflow: ellipsis;
  268.           overflow: hidden;
  269.         }
  270.  
  271.         .icon {
  272.           display: flex;
  273.           height: 100%;
  274.           align-items: center;
  275.           margin-left: 0.05rem;
  276.  
  277.           .iconfont {
  278.             margin-left: 0.15rem;
  279.             color: #dbdbdb;
  280.           }
  281.         }
  282.       }
  283.     }
  284.   }
  285.  
  286.   [role="tree-children"] {
  287.     background: #fff;
  288.   }
  289.  
  290.   [role="tree-children"]::before {
  291.     content: "";
  292.   }
  293.  
  294.   .iconfont.iconhidden {
  295.     visibility: hidden;
  296.   }
  297.  
  298.   .iconfont.iconnone {
  299.     display: none;
  300.   }
  301. }
  302.  
  303. }
  304. </style>

mTree.vue

  1. <template>
  2.   <div role="tree" class="treeList">
  3.     <treeItem :node="node" v-bind="$attrs" v-on="$listeners" ref="tree" />
  4.   </div>
  5. </template>
  6. <script>
  7. import treeItem from "./tree-item";
  8. export default {
  9.   name: "mTree",
  10.   components: {
  11.     treeItem
  12.   },
  13.   props: {
  14.     data: {
  15.       type: Array,
  16.       default: []
  17.     }
  18.   },
  19.   data() {
  20.     return {
  21.       node: []
  22.     };
  23.   },
  24.   computed: {},
  25.   created() {},
  26.   mounted() {},
  27.   watch: {
  28.     data: {
  29.       handler(val, oldVal) {
  30.         this.node = this.dealTreeData(val, 1);
  31.       },
  32.       deep: true
  33.     }
  34.   },
  35.   methods: {
  36.     dealTreeData(tree, level) {
  37.       let arr = [];
  38.       tree.length &&
  39.         tree.forEach((item, index) => {
  40.           let obj = {};
  41.           obj = this.deepCopy(item);
  42.           obj.level = level;
  43.           // obj.expanded = true;
  44.           if (item.children && item.children.length) {
  45.             obj.children = this.dealTreeData(item.children, level + 1);
  46.           } else {
  47.             if (!this.$attrs.lazy) {
  48.               obj.isLeaf = true;
  49.             } else {
  50.               obj.isLeaf = false;
  51.             }
  52.           }
  53.           arr.push(obj);
  54.         });
  55.       return arr;
  56.     },
  57.     deepCopy(obj) {
  58.       var result = Array.isArray(obj) ? [] : {};
  59.       for (var key in obj) {
  60.         if (obj.hasOwnProperty(key)) {
  61.           if (typeof obj[key] === "object" && obj[key] !== null) {
  62.             result[key] = this.deepCopy(obj[key]); //递归复制
  63.           } else {
  64.             result[key] = obj[key];
  65.           }
  66.         }
  67.       }
  68.       return result;
  69.     },
  70.     postData(data) {
  71.       // this.$emit("load", data);
  72.     }
  73.   },
  74.   destroyed() {}
  75. };
  76. </script>
  77.  
  78. <style lang="scss">
  79. </style>

treeItem.vue

  1. <template>
  2.   <div class>
  3.     <div role="tree-item" class="treeItem" v-for="(item) in node" :key="item[$attrs.props.id]">
  4.       <div role="tree-content">
  5.         <div
  6.           role="title"
  7.           :class="item[$attrs.props.id]==currentId?'active':''"
  8.           :style="{'background':`rgba(${255-colorLevel*(item.level-1)},${255-colorLevel*(item.level-1)},${255-colorLevel*(item.level-1)})`}"
  9.         >
  10.           <!-- 展开或收起 -->
  11.           <!-- :style="{'visibility':item.isLeaf&&!item[$attrs.props.children]?'hidden':'visible'}" -->
  12.           <span
  13.             class="tree-content-icon"
  14.             @click.stop="item.isLeaf&&!item[$attrs.props.children]?'':treeToggleClick(item)"
  15.             :class="item.isLeaf&&!item[$attrs.props.children]?'disabled':''"
  16.           >
  17.             {{item.isLeaf&&!item[$attrs.props.children]?"展开":item['expanded']?'收起':"展开"}}
  18.             <!-- <span
  19.               class="iconfont"
  20.               :class="item['expanded']?'iconangle-down':'iconangle-right'"
  21.             ></span>-->
  22.           </span>
  23.           <!-- 标题 -->
  24.           <!-- !enabledConfigClick?'':clickType == 'all'?treeConfigClick(item):(item[$attrs.clickableConditions.part.prop]==$attrs.clickableConditions.part.value?treeConfigClick(item):false) -->
  25.           <label
  26.             class="tree-content-label"
  27.             @click.stop="!enabledConfigClick?'':clickType == 'all'?treeConfigClick(item):($attrs.clickableConditions.part.value.includes(item[$attrs.clickableConditions.part.prop])?treeConfigClick(item):false)"
  28.           >
  29.             <span class="name">{{ item[$attrs.props.name]}}</span>
  30.             <span class="icon">
  31.               <span v-if="$attrs.showTotal">{{item.projectCount}}</span>
  32.               <i
  33.                 class="iconfont iconangle-right"
  34.                 v-if="!enabledConfigClick?false:clickType == 'all'?true:($attrs.clickableConditions.part.value.includes(item[$attrs.clickableConditions.part.prop])?true:false)"
  35.               ></i>
  36.               <i
  37.                 class="iconfont iconangle-right"
  38.                 v-else
  39.                 :class="$attrs.showTotal?'iconhidden':'iconnone'"
  40.               ></i>
  41.             </span>
  42.           </label>
  43.         </div>
  44.       </div>
  45.       <VerticalToggle>
  46.         <!-- :style="{ 'padding-left':  .14 + 'rem' }" -->
  47.         <div role="tree-children" v-if="item['expanded']">
  48.           <treeItem :node="item[$attrs.props.children]" v-bind="$attrs" v-on="$listeners" />
  49.         </div>
  50.       </VerticalToggle>
  51.     </div>
  52.   </div>
  53. </template>
  54. <script>
  55. import VerticalToggle from "./js/VerticalToggle";
  56. export default {
  57.   name: "treeItem",
  58.   components: {
  59.     VerticalToggle
  60.   },
  61.   props: {
  62.     node: {}
  63.   },
  64.   data() {
  65.     return {
  66.       tree: null,
  67.       data: [],
  68.       currentId: "",
  69.       enabledConfigClick: false,
  70.       clickType: "all",
  71.       colorLevel: 5
  72.     };
  73.   },
  74.   computed: {},
  75.   created() {
  76.     if (this.$attrs.clickableConditions) {
  77.       if (
  78.         this.$attrs.clickableConditions.all &&
  79.         this.$attrs.clickableConditions.all.enable
  80.       ) {
  81.         this.enabledConfigClick = true;
  82.         this.clickType = "all";
  83.       } else if (this.$attrs.clickableConditions.part) {
  84.         this.enabledConfigClick = true;
  85.         this.clickType = "part";
  86.       } else {
  87.         this.enabledConfigClick = false;
  88.       }
  89.     } else {
  90.       this.enabledConfigClick = false;
  91.     }
  92.   },
  93.   mounted() {},
  94.   watch: {},
  95.   methods: {
  96.     /**点击展开收起的事件 */
  97.     treeToggleClick(item) {
  98.       // this.currentId = item[this.$attrs.props.id];
  99.       if (this.$attrs.lazy) {
  100.         if (item.isLeaf || item[this.$attrs.props.children]) {
  101.           this.$set(item, "expanded", !item.expanded);
  102.         } else {
  103.           if (item.orgType && item.orgType == 1) {
  104.             this.$set(item, "expanded", !item.expanded);
  105.             this.$set(item, "isLeaf", true);
  106.           } else {
  107.             this.$parent.$emit("load", item);
  108.           }
  109.           //this.$parent.$emit("load", item);
  110.         }
  111.       } else {
  112.         this.$set(item, "expanded", !item.expanded);
  113.       }
  114.     },
  115.     /**点击右侧文字的事件 */
  116.     treeConfigClick(item) {
  117.       this.$attrs.itemActive
  118.         ? (this.currentId = item[this.$attrs.props.id])
  119.         : "";
  120.       this.$parent.$emit("click", item);
  121.     },
  122.     postData(item) {
  123.       debugger;
  124.     }
  125.   },
  126.   destroyed() {}
  127. };
  128. </script>
  129.  
  130. <style lang="scss">
  131. /*树形组件*/
  132. </style>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/231606
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号