<template>
    <div class="ht-base-select-search-entry-demo">
      <ht-base-row>
        <ht-base-col span="12" style="padding-right:10px">
            <ht-base-select v-model="model17" filterable allow-create @on-create="handleCreate1">
                <ht-base-option v-for="item in cityList3" :value="item.value" :key="item.value">{{ item.label }}</ht-base-option>
            </ht-base-select>
        </ht-base-col>
        <ht-base-col span="12">
            <ht-base-select v-model="model18" filterable multiple allow-create @on-create="handleCreate2">
                <ht-base-option v-for="item in cityList4" :value="item.value" :key="item.value">{{ item.label }}</ht-base-option>
            </ht-base-select>
        </ht-base-col>
    </ht-base-row>
    </div>
</template>

<script>
  export default {
    name: 'HtBaseSelectSearchEntryDemo',
    data () {
          return {
              cityList3: [
                  {
                      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'
                  }
              ],
              cityList4: [
                  {
                      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'
                  }
              ],
              model17: '',
              model18: []
          }
      },
      methods: {
          handleCreate1 (val) {
              this.cityList3.push({
                  value: val,
                  label: val
              });
          },
          handleCreate2 (val) {
              this.cityList4.push({
                  value: val,
                  label: val
              });
          }
      }
  }
</script>
<style lang="less">
    .ht-base-select-search-entry-demo {

    }
</style>

