介绍

本文档主要用于描述 ShadcnDataFilter 组件的一些特性和用法。

用法

查看代码

<template>
    <ShadcnDataFilter v-model="value" :fields="fields" />
</template>

<script setup lang="ts">
  import { ref } from 'vue'

  const value = ref([])
  const fields = [
    { label: 'Name', value: 'name', type: 'string' },
    { label: 'Age', value: 'age', type: 'number' },
    { label: 'Created At', value: 'created_at', type: 'date' },
    { label: 'Is Active', value: 'is_active', type: 'boolean' }
  ]
</script>

分层数据过滤器 (Hierarchical Data Filter)

查看代码

<template>
    <ShadcnHierarchicalDataFilter v-model="value" :fields="fields" />
</template>

<script setup lang="ts">
  import { ref } from 'vue'

  const value = ref([])
  const fields = [
    { label: 'Name', value: 'name', type: 'string' },
    { label: 'Age', value: 'age', type: 'number' },
    { label: 'Created At', value: 'created_at', type: 'date' }
  ]
</script>

数据过滤 (Data Filter) 结构

数据过滤 (Data Filter) 属性

数据过滤 (Data Filter) 事件

分层数据过滤器 (Hierarchical Data Filter) 结构

分层数据过滤器 (Hierarchical Data Filter) 属性

分层数据过滤器 (Hierarchical Data Filter) 事件