<template>
  <div class="demo-select-group">
    <ui-select
      v-model="value"
      :options="groupOptions"></ui-select>
  </div>
</template>
<script>
import { Select } from "amumu-ui"
export default {
  components: {
    "ui-select": Select,
  },
  data() {
    return {
      value: "1-1",
      groupOptions: [
        {
          label: "下拉选项1",
          options: [
            {
              label: "子选项1",
              value: "1-1",
            },
            {
              label: "子选项子选项子选项子选项子选项子选项2",
              value: "1-2",
            },
            {
              label: "子选项3",
              value: "1-3",
            },
          ],
        },
        {
          label: "下拉选项下拉选项下拉选项2",
          options: [
            {
              label: "子选项1",
              value: "2-1",
            },
            {
              label: "子选项2",
              value: "2-2",
            },
            {
              label: "子选项子选项子选项子选项子选项子选项3",
              value: "2-3",
            },
          ],
        },
        {
          label: "下拉选项3",
          options: [
            {
              label: "子选项1",
              value: "3-1",
            },
            {
              label: "子选项2",
              value: "3-2",
            },
            {
              label: "子选项子选项子选项子选项子选项子选项3",
              value: "3-3",
            },
          ],
        },
        {
          label: "下拉选项4",
          options: [
            {
              label: "子选项子选项子选项子选项子选项子选项1",
              value: "4-1",
            },
            {
              label: "子选项2",
              value: "4-2",
            },
            {
              label: "子选项3",
              value: "4-3",
            },
          ],
        },
      ],
    }
  },
}
</script>
