suitTree 树形组件

说明

1、可以以树形组件展示，并且可以进行过滤筛选; 2、只作为树形组件使用，进行内容展示；

使用 1

<template>
	<view>
		<suit-tree
			:apiDealFun="apiDealFun"
			:apiName="apiName"
			:apiParams="{buttonStatus: 0, tendersId: tendersId}"
			:subLevel="3"
			ref="tree"
			@clickItem="checked"
			:config="{ showLeafChecked: true, showLevel: 4 }"
			:bufferScale="1"
			itemH="112rpx"
			:estimatedItemHeight="56"
			:loading="loading"
		></suit-tree>
	</view>
</template>
<script>
export default {
	data() {
		return {
            apiName: getFillList,
            loading:false,
		}
	},
    methods: {
        apiDealFun(list, context) {
			allGetList = list.filter(it => {
				if (it.treeLevel > 2 || it.treeLevel === undefined) {
					if (it.treeLevel === 3) {
						it.parentId = undefined;
					}
					if (it.mbsId) {
						it.id = it.mbsId; // 树形结构必须有id和parentId
						it.name = it.mbsName;
					}
					return true;
				} else {
					return false;
				}
			})
        },
        checked(val) {
            console.log(val)
		},
    }
}
</script>

使用 2

<template>
	<view class="qualityAcceptance_index" style="background-color: #f5f5f5; height: 100%;">
		<suit-tree
			:loading="loading"
			:apiDealFun="apiDealFun"
			:apiName="apiName"
			:apiParams="params"
			ref="tree"
			itemH="112rpx"
			:estimatedItemHeight="56"
			@clickItem="checked"
		></suit-tree>
	</view>
</template>

<script>
import { getTreeDetails } from '@/api/qualityAcceptance.js';
export default {
	data() {
		return {
            loading:false,
            apiName: getTreeDetails,
            params: {
				status: null,
				tendersId: null
			},
		}
    },
    methods:{
        // 接口数据处理
		apiDealFun(list, context) {
			allTreeData = list.map(item => item);
			context.rootNode = list || list[0];
		},
        //点击树结构，获取数据展示在下方
		checked(val, list) {
            console.log(val,list)
		},
    }
}
</script>

参数说明

属性

属性	描述	类型	可选值	默认值
estimatedItemHeight	预估高度	Number	——	——
lineColor	底部线条的颜色	String	——	rgba(0,0,0,0.12)
bufferScale	缓冲区比例	Number	——	2
height	容器高度	String	——	100%
expandAll	是否全部展开	Boolean	true、false	falae
defaultExpandedKeys	默认展开的数据item	Array	——	[]
subLevel	需要过滤的等级最小等级	Number	——	1
treeStructure	是否是树形结构	Boolean	true、false	falae
itemH	每一个元素的高度	String	——	auto
config	参数配置，例如下划线	Object	——	{}
singleChecked	是否单选	Boolean	true、false	falae
apiName	传递过来的接口	Function	——	""
apiParams	传递过来的接口参数	Object	——	{}
apiDealFun	不同页面需要处理不同的数据	Function	——	[]
loading	是否loading	Boolean	true、false	true
initFun	组件初始化	Function	——	null

组件源码及综合示例参考

组件源码 (opens new window) 综合实例1 (opens new window) 综合实例2 (opens new window)