fx-platform-ui

Appearance

Return to top
On this page

树形结构 tree

多选用法

html
<template>
  <view>
    <uni-section class="mb-10" title="多选用法" type="line">
      <PlUniTree
        ref="PlTreeRef"
        :data="roomTreeData"
        :field="{
            label: 'name',
            key: 'id',
            showArrow: 'haveChild',
            checkedShow: 'haveChild'
          }"
        :default-expanded-keys="['1']"
        :load-api="onLoadData"
        checkbox-placement="right"
        load-mode
        :show-checkbox="showCheckbox"
        :show-radio-icon="false"
        :default-checked-keys="defaultCheckedKeysValue"
        @change="change"
      ></PlUniTree>
    </uni-section>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { getLazyQueryOrgTree } from '@/api/org'
// 初始化
const roomTreeData = ref<API.TreeType[]>([])
// 请求参数
const params = ref<API.LazyQueryOrgTreeType>({
  isInit: true,
  orgId: '',
  keyword: '',
  loadCurrentOrg: true,
  orgType: 140
})
const showCheckbox = ref(true)
const defaultCheckedKeysValue = ref([])
const PlTreeRef = ref()

// 点击change事件
const change = (key) => {
  // 多选的情况下，如果父级选中，子级也会选中，所以需要过滤掉子级
  if (showCheckbox.value) {
    const nodes = PlTreeRef.value.getCheckedNodes()
    const valueSet = new Set(key)
    const checkboxItem = nodes.filter((key) => {
      return !valueSet.has(key.parentKey)
    })
    console.log('多选:', checkboxItem)
  }
}

// 懒加载请求数据
const onLoadData = async (item) => {
  Object.assign(params.value, {
    isInit: false,
    orgId: item.key
  })
  const [err, res] = await getLazyQueryOrgTree(params.value)
  if (err) return
  return res
}

// 首次加载树形数据
const _getLazyQueryOrgTree = async (obj: API.LazyQueryOrgTreeType) => {
  const [err, res] = await getLazyQueryOrgTree(obj)
  if (err) return
  roomTreeData.value = res
}

onShow(() => {
  _getLazyQueryOrgTree(params.value)
})
</script>

单选用法

html
<template>
  <view>
    <uni-section class="mb-10" title="单选用法" type="line">
      <PlUniTree
        ref="PlTreeRef"
        :data="roomTreeData"
        :field="{
            label: 'name',
            key: 'id',
            showArrow: 'haveChild',
            checkedShow: 'haveChild'
          }"
        :default-expanded-keys="['1']"
        :load-api="onLoadData"
        checkbox-placement="right"
        load-mode
        :show-checkbox="showCheckbox"
        :show-radio-icon="true"
        :default-checked-keys="defaultCheckedKeysValue"
        @change="change"
      ></PlUniTree>
    </uni-section>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { getLazyQueryOrgTree } from '@/api/org'
// 初始化
const roomTreeData = ref<API.TreeType[]>([])
// 请求参数
const params = ref<API.LazyQueryOrgTreeType>({
  isInit: true,
  orgId: '',
  keyword: '',
  loadCurrentOrg: true,
  orgType: 140
})
const showCheckbox = ref(false)
const defaultCheckedKeysValue = ref([])
const PlTreeRef = ref()

// 点击change事件
const change = (key) => {
  // 多选的情况下，如果父级选中，子级也会选中，所以需要过滤掉子级
  console.log('单选:', key)
}

// 懒加载请求数据
const onLoadData = async (item) => {
  Object.assign(params.value, {
    isInit: false,
    orgId: item.key
  })
  const [err, res] = await getLazyQueryOrgTree(params.value)
  if (err) return
  return res
}

// 首次加载树形数据
const _getLazyQueryOrgTree = async (obj: API.LazyQueryOrgTreeType) => {
  const [err, res] = await getLazyQueryOrgTree(obj)
  if (err) return
  roomTreeData.value = res
}

onShow(() => {
  _getLazyQueryOrgTree(params.value)
})
</script>

API

参数说明类型默认值
datatree的数据Array[]
themeColor主题颜色String
defaultCheckedKeys默认选中的节点，注意单选时为单个key，多选时为key的数组Array | String | Number--
checkboxPlacement选择框的位置，可选 left/rightStringleft
defaultExpandAll是否默认展开全部Booleanfalse
defaultExpandedKeys默认展开的节点Array--
indent子项缩进距离，默认40，单位rpxNumber40
field字段对应内容名称，默认为{label: 'label',key: 'key', children: 'children', disabled: 'disabled', append: 'append', showArrow: 'showArrow', checkedShow: 'showArrow'} 

{   
    label: 'label', //展示的内容
    key: 'key', //唯一标识
    children: 'children', //子项
    disabled: 'disabled', //是否禁用
    append: 'append', //是否有副标题
    showArrow: 'showArrow',//是否有箭头
    checkedShow: 'checkedShow' //是否有选择框
}
Object

{   
    label: 'label', //展示的内容
    key: 'key', //唯一标识
    children: 'children', //子项
    disabled: 'disabled', //是否禁用
    append: 'append', //是否有副标题
    showArrow: 'showArrow',//是否有箭头
    checkedShow: 'checkedShow' //是否有选择框
}
showCheckbox是否开启多选，默认单选Booleanfalse
showRadioIcon是否显示单选图标，默认显示tBooleantrue
onlyRadioLeaf单选时只允许选中末级，默认可随意选中Booleanfalse
checkStrictly多选时，是否执行父子不关联的任意勾选，默认父子关联Booleanfalse
loadMode为 true 时，空的 children 数组会显示展开图标Booleanfalse
loadApi异步加载接口Function--
checkedDisabled是否渲染禁用值Booleanfalse
packDisabledkey是否返回已禁用的但已选中的keyBooleantrue
expandChecked选择时是否展开当前已选的所有下级节点，默认不展开Booleanfalse
checkedShow开启根据判断是否展示单选或复选框iconBooleantrue
maxTagCount多选时候最大个数Number--

事件

事件名称说明回调参数
change选择完成后的回调(key, originItem, item) => void
expand点击啊箭头展开收缩(expand, currentItem || originItem || null) => void

方法 ref内部事件（使用通过ref获取内部事件）

事件名称说明回调参数
getCheckedKeys返回已选的 key--
setCheckedKeys根据key设置已选Function(keys, checked = true)
getHalfCheckedKeys返回半选的 key--
getUncheckedKeys返回未选的 key--
getExpandedKeys返回已展开的 key--
getUnexpandedKeys返回未展开的 key--
setExpandedKeys根据key展开/收起Function(keys, expand = true)
getCheckedNodes返回已选的节点--
getHalfCheckedNodes返回半选的节点--
getUncheckedNodes返回未选的节点--
getExpandedNodes返回已展开的节点--
getUnexpandedNodes返回未展开的节点--

Released under the MIT License.

Copyright © 2023-present fangxu