xtf-tree-select

组件说明

xtf-tree-select 是常驻双栏树形选择器。左侧显示当前层级分类，右侧显示子节点；节点可继续进入下一级，适合商品分类、运营标签和权限分组等任意深度的树数据。

基础用法

<template>
  <xtf-tree-select v-model="selected" title="运营分类" :options="options" />
</template>

<script>
export default {
  data() {
    return {
      selected: 'shelf-check',
      options: [
        {
          text: '入库处理', value: 'inbound', children: [
            { text: '上架确认', value: 'shelf-check' }
          ]
        }
      ]
    }
  }
}
</script>

多选

<xtf-tree-select v-model="selectedValues" multiple :options="options" />

多选模式的 v-model 始终为值数组；单选模式则为单个值。节点的 disabled 字段可禁用选择，字段名可通过 fieldNames 映射。

属性

属性	类型	默认值	说明
modelValue	String | Number | Array	''	单选值或多选值数组
options	Array	[]	树形选项数据
multiple	Boolean	false	是否允许多选
title	String	''	顶部标题
selectedText	String	'已选'	已选数量文字
showSelected	Boolean	true	是否显示已选数量入口
emptyText	String	'暂无可选项'	空子级文案
fieldNames	Object	{ text, value, children, disabled }	字段映射
height	String | Number	420	双栏内容区高度，数字按 rpx 处理
navItemStyle	String | Object	''	左侧普通分类项样式
navActiveItemStyle	String | Object	''	左侧激活分类项样式
itemStyle	String | Object	''	右侧普通子项样式
selectedItemStyle	String | Object	''	右侧选中子项样式
customClass	String	''	根节点自定义类名
customStyle	String | Object	''	根节点自定义样式

事件

事件	参数	说明
update:modelValue	value	选中值变化
change	{ value, selected, path }	叶子节点选择变化
click-nav	{ item, index, path }	左侧分类点击
click-selected	{ value }	已选数量入口点击