数据项占位文本

通过 item.placeholder 属性可以设置数据项的占位文本。当数据项为空时，会显示该占位文本；item.editAttrDisabeld 可以设置编辑状态下此属性类型不可切换。

<template>
  <ClientOnly>
    <tiny-search-box v-model="tags" :items="items" editable />
  </ClientOnly>
</template>
<script setup lang="ts">
import { ref } from "vue";

const items = ref([
  {
    label: "名称",
    field: "testName",
    replace: true,
    placeholder: "我是自定义名称的占位符",
    options: [
      {
        label: "ecs-1",
      },
      {
        label: "obs-2",
      },
      {
        label: "vpc-1",
      },
      {
        label: "evs-2",
      },
      {
        label: "tms-1",
      },
    ],
  },
  {
    label: "可用地区",
    field: "testRegion",
    type: "checkbox",
    mergeTag: true,
    allowCreate: true,
    placeholder: "我是自定义可选地区的占位符",
    editAttrDisabled: true, // 编辑状态此属性禁用，不可变更
    options: [
      {
        label: "华南区",
        id: "2-1",
      },
      {
        label: "华北区",
        id: "2-2",
      },
      {
        label: "西北区",
        id: "2-3",
      },
      {
        label: "西南区",
        id: "2-4",
      },
      {
        label: "东南区",
        id: "2-5",
      },
      {
        label: "东北区",
        id: "2-6",
      },
      {
        label: "华东区",
        id: "2-7",
      },
      {
        label: "华西区",
        id: "2-8",
      },
    ],
  },
  {
    label: "大小",
    field: "size",
    type: "numRange",
    placeholder: "我是自定义大小的占位符",
    unit: "GB",
    start: -1,
    min: -1,
    max: 20,
  },
]);

const tags = ref([
  {
    field: "testRegion",
    label: "可用地区",
    type: "checkbox",
    value: "华南区 | 西北区 | 华北区 | 西南区 | 东南区",
    options: [
      {
        label: "华南区",
        id: "2-1",
      },
      {
        label: "西北区",
        id: "2-3",
      },
      {
        label: "华北区",
        id: "2-2",
      },
      {
        label: "西南区",
        id: "2-4",
      },
      {
        label: "东南区",
        id: "2-5",
      },
    ],
  },
]);
</script>