element-plus中 el-segmented的使用

Element Plus 是一套基于 Vue.js 的 UI 组件库，它对 Element UI 进行了现代化的改造和优化。`el-segmented` 是 Element Plus 中的一个组件，通常称为“分段条”或“选项卡栏”，用于展示一组可以切换的选择项。

在 Element Plus 中，`el-segmented` 的基本用法如下：

<template>
  <el-segmented>
    <el-segment v-for="segment in segments" :key="segment.name">
      <template #default>
        {{ segment.name }}
      </template>
      <!-- 可选：添加额外的内容如图标 -->
      <template #icon>
        <i class="el-icon-menu"></i>
      </template>
    </el-segment>
  </el-segmented>
</template>

<script>
export default {
  data() {
    return {
      segments: [
        { name: 'Option 1', icon: 'el-icon-setting' },
        { name: 'Option 2' },
        { name: 'Option 3', active: true }
      ]
    };
  }
};
</script>

在这个例子中，`segments` 数组包含了每个分段条的配置，包括名称和可选的图标。`active` 属性用于设置默认选中的分段。你可以通过绑定 `@click` 事件监听分段条的切换。