请选择 进入手机版 | 继续访问电脑版
帖子
帖子
用户
博客
课程
显示全部楼层
53
帖子
4
勋章
56
Y币

AVM框架 封装树形分类选择组件 组件递归调用

[复制链接]
发表于 2022-6-27 13:55:44
​ 由于项目中,需要用到追加表单项目的功能,而表单项目在PC端是树形列表的形式展现,而且要实现多选功能,依上述需求开发了树形分类选择组件。
组件开发中用到的知识要点是:组件递归调用组件递归调用不仅可以用来实现树形分类选择器,也可以用来实现多级菜单展示。
注意点:
由于AVM框架有自己的一套触发和监听子组件事件的方式,监听子组件事件


子组件内部递归调用的时候也需要进行事件的监听,同时进行“this.fire”进行触发。如果在递归调用的子组件中不进行监听的话,会导致父组件只能监听到第一层级触发的事件,从第二级开始触发的时间父组件无法监听到。
fire方法有两个参数,第一个参数为事件名称,第二个参数为要传递的自定义数据,在父组件监听方法里面通过e.detail获取传递的数据。 在递归调用子组件的监听方法中给父组件传递参数的时候需要去e.detail,不能直接传e,否则会出现多个detail的层级。

组件代码
  1. <template>
  2.         <view class="easy-tree-box">
  3.                 <view v-for="(item,index) in listdata">
  4.                         <view class="easy-tree-node" >
  5.                                 <view class="easy-tree-option" v-if="item.itemType==3" >
  6.                                         <image class="easy-tree-ico" src='../../image/tree-ico.png' mode="widthFix"></image>
  7.                                         <text class="easy-tree-title">{item.itemName}</text>
  8.                                 </view>
  9.                                 <view class="easy-tree-option" v-else-if="item.itemType==6" >
  10.                                         <checkbox color="#3b72e6" data-item={item} name="item-option" onchange="checkItem"/>
  11.                                         <text class="easy-tree-item">{item.itemName}</text>
  12.                                 </view>                               
  13.                                 <easy-tree :listdata='item.children' v-if="item.children" onselectitem="checkNode"></easy-tree>
  14.                         </view>               
  15.                 </view>
  16.         </view>
  17. </template>
  18. <script>
  19.         export default {
  20.                 name: 'easy-tree',
  21.                 installed(){
  22.                         // this.fire('selectitem','3333');
  23.                 },
  24.                 props:{
  25.                         listdata:Object
  26.                 },
  27.                 data() {
  28.                         return{
  29.                                 result:{}
  30.                         }
  31.                 },
  32.                 methods: {
  33.                         checkItem(e){                       
  34.                                 // console.log(JSON.stringify(e));
  35.                                 // console.log(JSON.stringify(e.dataset.item.formJson));
  36.                                 this.data.result={
  37.                                         type:e.dataset.item.fieldType,
  38.                                         name:e.dataset.item.itemName,
  39.                                         options:JSON.parse(e.dataset.item.formJson).options,
  40.                                         model:e.dataset.item.id,
  41.                                         key:e.dataset.item.id,
  42.                                         isCheck:e.detail.checked
  43.                                 }
  44.                                 this.fire('selectitem',this.data.result);                       
  45.                         },
  46.                         checkNode(e){
  47.                                 // console.log(JSON.stringify(e)+"委托");
  48.                                 this.fire('selectitem',e.detail);
  49.                         }
  50.                 }
  51.         }
  52. </script>
  53. <style>
  54.         .easy-tree-box {
  55.                 background-color: #ffffff;
  56.                 padding-top: 10px;
  57.                 padding-right: 10px;
  58.         }
  59.         .easy-tree-node{
  60.                 padding-left: 10px;
  61.         }
  62.         .easy-tree-title{
  63.                 font-size: 15px;
  64.         }
  65.         .easy-tree-item{
  66.                 font-size: 13px;
  67.                 padding-left: 10px;
  68.         }
  69.         .easy-tree-option{
  70.                 flex-flow: row nowrap;
  71.                 justify-content: flex-start;
  72.                 align-items: center;
  73.         }
  74.         .easy-tree-ico{
  75.                 width: 20px;
  76.         }
  77. </style>
复制代码
组件调用示例
  1. <template>
  2.         <scroll-view class="page">
  3.                 <safe-area></safe-area>
  4.                 <easy-tree :listdata={listdata} onselectitem="checkNode"></easy-tree>
  5.         </scroll-view>
  6. </template>
  7. <script>
  8.         import '../../components/easy-tree.stml'
  9.         import {POST, GET} from "../../script/req.js"
  10.         import $util from "../../utils/util.js"
  11.         export default {
  12.                 name: 'activity-check-item',
  13.                 apiready(){
  14.                         this.queryItems();       
  15.                 },
  16.                 data() {
  17.                         return{
  18.                                 listdata: [],
  19.                                 checkList:[]
  20.                         }
  21.                 },
  22.                 methods: {
  23.                         queryItems(){
  24.                                 var option={
  25.                                         headers: {
  26.                                                 'token': ''
  27.                                         }
  28.                                 };
  29.                                 var data={
  30.                                         itemStatus:3
  31.                                 };
  32.                                 api.showProgress();
  33.                                 POST('inspect/item/treeData', data, option).then(ret =>{
  34.                                         // console.log(JSON.stringify(ret));
  35.                                         if(ret.success){
  36.                                                 this.data.listdata = ret.treeData;
  37.                                         }
  38.                                         api.hideProgress();
  39.                                 })
  40.                         },
  41.                         checkNode(e){
  42.                                 // console.log(JSON.stringify(e));
  43.                                 if(this.data.checkList.filter(item => item.model==e.detail.model).length>0){
  44.                                         //判断是否已存在,存在则更新选中状态
  45.                                         this.data.checkList.filter(item => item.model==e.detail.model)[0].isCheck=e.detail.isCheck;
  46.                                 }
  47.                                 else{
  48.                                         //不存在直接更新数据
  49.                                         this.data.checkList.push(e.detail);
  50.                                 }
  51.                                 // console.log(JSON.stringify(this.data.checkList));                       
  52.                         }
  53.                 }
  54.         }
  55. </script>
  56. <style>
  57.         .page {
  58.                 height: 100%;
  59.                 background-color: #ffffff;
  60.         }
  61. </style>
复制代码
数据格式
  1. [
  2.     {
  3.         "id":"2ae030d494d647a79456effedb11f65a",
  4.         "parentIds":"0,",
  5.         "sort":30,
  6.         "children":[

  7.         ],
  8.         "itemName":"测试专用",
  9.         "itemType":"3",
  10.         "fieldType":"",
  11.         "formJson":""
  12.     },
  13.     {
  14.         "id":"7cda428fa3cd43179e92e7585ccc321b",
  15.          "itemName":"信息是否完善",
  16.         "itemType":"3",
  17.         "children":[
  18.             {
  19.                 "id":"8ea6072328dc443eae46d17495ab7f2b",
  20.                 "children":[
  21.                     {
  22.                         "id":"8c372e0e3f01485486a707e79bdb00c4",
  23.                     
  24.                         "children":[

  25.                         ],
  26.                         "itemName":"信息公开,正副本是否齐全",
  27.                         "itemType":"6",
  28.                      
  29.                         "fieldType":"radio",
  30.                         "formJson":"{"type":"radio","name":"","options":{"inline": true,"showLabel": true,"options":[{"label":"齐全","value":"0"},{"label":"不齐全","value":"1"}]}}"
  31.                         
  32.                     },
  33.                     {
  34.                         "id":"eaf7af968cf84acbb939c9dda3b340e7",
  35.                         
  36.                         "children":[

  37.                         ],
  38.                         "itemName":"信息是否公开",
  39.                         "itemType":"6",
  40.                         
  41.                         "fieldType":"radio",
  42.                         "formJson":"{"type":"radio","name":"","options":{"inline": true,"showLabel": true,"options":[{"label":"已公开","value":"0"},{"label":"未公开","value":"1"}]}}"
  43.                     }
  44.                 ]        
  45.             }]
  46.     }
  47. ]
复制代码
示例展示


本帖子中包含更多资源,您需要 登录 才可以下载或查看,没有帐号?立即注册

X
您需要登录后才可以回帖 登录

本版积分规则