uniapp中uni-data-select使用插槽

在 UniApp 中，`uni-data-select` 是一个用于选择数据的组件，它允许开发者从数据源中选择项并显示在 UI 上。为了自定义其样式或添加额外内容，`uni-data-select` 支持使用插槽（slot）进行扩展和定制。

插槽（slots）是 Vue.js 的一种强大功能，允许你将自定义内容插入到组件的特定部分。在 `uni-data-select` 中，你可以利用以下几个主要插槽来进行定制：

1. **default** 或 **template** 插槽：这是最常用的插槽，你可以在其中放置默认的选择列表项。这通常是输入框和下拉选项列表的组合。

<uni-data-select>
  <template slot="default">
    <div>
      <input type="text" placeholder="搜索...">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </div>
  </template>
</uni-data-select>

2. **item** 插槽：如果你想要自定义单个选中的选项项的外观，可以在这里添加内容。例如，你可以改变选项的图标、颜色等。

<uni-data-select>
  <template slot="item" slot-scope="{ item, $index }">
    <el-icon>{{ item.icon }}</el-icon> {{ item.label }}
  </template>
</uni-data-select>

3. **no-result** 插槽：当搜索结果为空时，可以在这个插槽中显示提示信息。

<uni-data-select>
  <template slot="no-result">没有匹配的结果</template>
</uni-data-select>