TreeSelect 树选择器

基于 ElTreeSelect 封装，支持自定义字段映射。

基础用法

<template>
  <div>
    <p>单选 {{ moduleValue1 }}</p>
    <MTreeSelect v-model="moduleValue1" :data="data"></MTreeSelect>

    <p>选择框-多选 {{ moduleValue2 }}</p>
    <MTreeSelect
      v-model="moduleValue2"
      :data="data"
      :multiple="true"
      :show-checkbox="true"
    ></MTreeSelect>

    <MMarkdownView :value="readme"></MMarkdownView>
  </div>
</template>

<script setup lang="ts">
import readme from '@/components/treeSelect/README.md?raw'
import { ref } from 'vue'

const moduleValue1 = ref(4)
const moduleValue2 = ref([4])

const data = ref([
  {
    id: 1,
    name: 'Level one 1',
    children: [
      {
        id: 4,
        name: 'Level two 1-1',
        children: [
          {
            id: 5,
            name: 'Level two 1-1-1'
          }
        ]
      },
      {
        id: 6,
        name: 'Level two 1-2',
        children: [
          {
            id: 7,
            name: 'Level two 1-2-1'
          }
        ]
      }
    ]
  },
  {
    id: 8,
    name: 'Level one 2'
  }
])
</script>

<style lang="scss" scoped></style>

API

TreeSelect 属性

属性名	说明	类型	默认值
modelValue	v-model 单选或多选	any | any[]	—
data	展示数据	array	[]
fields	数据字段映射	TreeSelectFields	{}

$attrs

TreeSelect 的 $attrs会透传给 ElTreeSelect 组件，支持multiple、show-checkbox 等属性。

TreeSelectFields

属性名	说明	类型	默认值
value	唯一值字段名	string	'id'
label	标签字段名	string	'name'
children	子节点字段名	string	'children'