|
AVM框架 封装树形分类选择组件 组件递归调用
[复制链接]
由于项目中,需要用到追加表单项目的功能,而表单项目在PC端是树形列表的形式展现,而且要实现多选功能,依上述需求开发了树形分类选择组件。
组件开发中用到的知识要点是:组件递归调用,组件递归调用不仅可以用来实现树形分类选择器,也可以用来实现多级菜单展示。
注意点:
由于AVM框架有自己的一套触发和监听子组件事件的方式,监听子组件事件
子组件内部递归调用的时候也需要进行事件的监听,同时进行“this.fire”进行触发。如果在递归调用的子组件中不进行监听的话,会导致父组件只能监听到第一层级触发的事件,从第二级开始触发的时间父组件无法监听到。
fire方法有两个参数,第一个参数为事件名称,第二个参数为要传递的自定义数据,在父组件监听方法里面通过e.detail获取传递的数据。 在递归调用子组件的监听方法中给父组件传递参数的时候需要去e.detail,不能直接传e,否则会出现多个detail的层级。
组件代码
- <template>
- <view class="easy-tree-box">
- <view v-for="(item,index) in listdata">
- <view class="easy-tree-node" >
- <view class="easy-tree-option" v-if="item.itemType==3" >
- <image class="easy-tree-ico" src='../../image/tree-ico.png' mode="widthFix"></image>
- <text class="easy-tree-title">{item.itemName}</text>
- </view>
- <view class="easy-tree-option" v-else-if="item.itemType==6" >
- <checkbox color="#3b72e6" data-item={item} name="item-option" onchange="checkItem"/>
- <text class="easy-tree-item">{item.itemName}</text>
- </view>
- <easy-tree :listdata='item.children' v-if="item.children" onselectitem="checkNode"></easy-tree>
- </view>
- </view>
- </view>
- </template>
- <script>
- export default {
- name: 'easy-tree',
- installed(){
- // this.fire('selectitem','3333');
- },
- props:{
- listdata:Object
- },
- data() {
- return{
- result:{}
- }
- },
- methods: {
- checkItem(e){
- // console.log(JSON.stringify(e));
- // console.log(JSON.stringify(e.dataset.item.formJson));
- this.data.result={
- type:e.dataset.item.fieldType,
- name:e.dataset.item.itemName,
- options:JSON.parse(e.dataset.item.formJson).options,
- model:e.dataset.item.id,
- key:e.dataset.item.id,
- isCheck:e.detail.checked
- }
- this.fire('selectitem',this.data.result);
- },
- checkNode(e){
- // console.log(JSON.stringify(e)+"委托");
- this.fire('selectitem',e.detail);
- }
- }
- }
- </script>
- <style>
- .easy-tree-box {
- background-color: #ffffff;
- padding-top: 10px;
- padding-right: 10px;
- }
- .easy-tree-node{
- padding-left: 10px;
- }
- .easy-tree-title{
- font-size: 15px;
- }
- .easy-tree-item{
- font-size: 13px;
- padding-left: 10px;
- }
- .easy-tree-option{
- flex-flow: row nowrap;
- justify-content: flex-start;
- align-items: center;
- }
- .easy-tree-ico{
- width: 20px;
- }
- </style>
复制代码 组件调用示例
- <template>
- <scroll-view class="page">
- <safe-area></safe-area>
- <easy-tree :listdata={listdata} onselectitem="checkNode"></easy-tree>
- </scroll-view>
- </template>
- <script>
- import '../../components/easy-tree.stml'
- import {POST, GET} from "../../script/req.js"
- import $util from "../../utils/util.js"
- export default {
- name: 'activity-check-item',
- apiready(){
- this.queryItems();
- },
- data() {
- return{
- listdata: [],
- checkList:[]
- }
- },
- methods: {
- queryItems(){
- var option={
- headers: {
- 'token': ''
- }
- };
- var data={
- itemStatus:3
- };
- api.showProgress();
- POST('inspect/item/treeData', data, option).then(ret =>{
- // console.log(JSON.stringify(ret));
- if(ret.success){
- this.data.listdata = ret.treeData;
- }
- api.hideProgress();
- })
- },
- checkNode(e){
- // console.log(JSON.stringify(e));
- if(this.data.checkList.filter(item => item.model==e.detail.model).length>0){
- //判断是否已存在,存在则更新选中状态
- this.data.checkList.filter(item => item.model==e.detail.model)[0].isCheck=e.detail.isCheck;
- }
- else{
- //不存在直接更新数据
- this.data.checkList.push(e.detail);
- }
- // console.log(JSON.stringify(this.data.checkList));
- }
- }
- }
- </script>
- <style>
- .page {
- height: 100%;
- background-color: #ffffff;
- }
- </style>
复制代码 数据格式
- [
- {
- "id":"2ae030d494d647a79456effedb11f65a",
- "parentIds":"0,",
- "sort":30,
- "children":[
- ],
- "itemName":"测试专用",
- "itemType":"3",
- "fieldType":"",
- "formJson":""
- },
- {
- "id":"7cda428fa3cd43179e92e7585ccc321b",
- "itemName":"信息是否完善",
- "itemType":"3",
- "children":[
- {
- "id":"8ea6072328dc443eae46d17495ab7f2b",
- "children":[
- {
- "id":"8c372e0e3f01485486a707e79bdb00c4",
-
- "children":[
- ],
- "itemName":"信息公开,正副本是否齐全",
- "itemType":"6",
-
- "fieldType":"radio",
- "formJson":"{"type":"radio","name":"","options":{"inline": true,"showLabel": true,"options":[{"label":"齐全","value":"0"},{"label":"不齐全","value":"1"}]}}"
-
- },
- {
- "id":"eaf7af968cf84acbb939c9dda3b340e7",
-
- "children":[
- ],
- "itemName":"信息是否公开",
- "itemType":"6",
-
- "fieldType":"radio",
- "formJson":"{"type":"radio","name":"","options":{"inline": true,"showLabel": true,"options":[{"label":"已公开","value":"0"},{"label":"未公开","value":"1"}]}}"
- }
- ]
- }]
- }
- ]
复制代码 示例展示
|
本帖子中包含更多资源,您需要 登录 才可以下载或查看,没有帐号?立即注册
X
|