<template>
    <div class="ht-base-select-group-demo">
        <ht-base-select v-model="model7" style="width:200px">
            <ht-base-option-group label="Hot Cities">
                <ht-base-option v-for="item in cityList1" :value="item.value" :key="item.value">{{ item.label }}</ht-base-option>
            </ht-base-option-group>
            <ht-base-option-group label="Other Cities">
                <ht-base-option v-for="item in cityList2" :value="item.value" :key="item.value">{{ item.label }}</ht-base-option>
            </ht-base-option-group>
        </ht-base-select>
    </div>
</template>

<script>
  export default {
    name: 'HtBaseSelectGroupDemo',
    data () {
      return {
        cityList: [
          {
            value: 'New York',
            label: 'New York'
          },
          {
            value: 'London',
            label: 'London'
          },
          {
            value: 'Sydney',
            label: 'Sydney'
          },
          {
            value: 'Ottawa',
            label: 'Ottawa'
          },
          {
            value: 'Paris',
            label: 'Paris'
          },
          {
            value: 'Canberra',
            label: 'Canberra'
          }
        ],
        cityList1: [
          {
            value: 'New York',
            label: 'New York'
          },
          {
            value: 'London',
            label: 'London'
          },
          {
            value: 'Sydney',
            label: 'Sydney'
          }
        ],
        cityList2: [
          {
            value: 'Ottawa',
            label: 'Ottawa'
          },
          {
            value: 'Paris',
            label: 'Paris'
          },
          {
            value: 'Canberra',
            label: 'Canberra'
          }
        ],
        model7: ''
      }
    }
  }
</script>
<style>
    .ht-base-select-group-demo {

    }
</style>

