<template>
      <div> {{ currentData }}</div>
      <uvButton @click="open">
        打开
      </uvButton>
      <uvCascader
        ref="cascaderRef"
        :list="list"
        :popup-props="{title:'请选择数据'}"
        @finish="finish"
      />
</template>

<script setup>
import { uvButton, uvCascader, Toast } from 'uv-ui'
import { ref } from 'vue'

const cascaderRef = ref(null)

const open = () => {
  cascaderRef.value.open()
}

const finish = (e) => {
  console.log(e)
  currentData.value = e
}

const list = [
  {
    value: '1',
    label: 'Level1',
    children: [
      {
        value: '1-1',
        label: 'Level1-1',
        children: [
          {
            value: '1-1-1',
            label: 'Level1-1-1'
          }
        ]
      },
      {
        value: '1-2',
        label: 'Level1-2'
      },
      {
        value: '1-3',
        label: 'Level1-3'
      }
    ]
  },
  {
    value: '2',
    label: 'Level2',
    children: [
      {
        value: '2-1',
        label: 'Level2-1',
        children: [
          {
            value: '2-1-1',
            label: 'Level2-1-1'
          }
        ]
      },
      {
        value: '2-2',
        label: 'Level2-2',
        children: [
          {
            value: '2-2-1',
            label: 'Level2-2-1'
          }
        ]
      }
    ]
  }
]
</script>

<template>
      <uvButton @click="open1">
        打开
      </uvButton>
      <uvCascader
        ref="cascaderRef1"
        :list="list1"
        :popup-props="{title:'请选择数据'}"
        @change="change"
      />
</template>

<script setup>
import { uvButton, uvCascader, Toast } from 'uv-ui'
import { ref } from 'vue'

const cascaderRef1 = ref(null)

const open1 = () => {
  cascaderRef1.value.open()
}

const change = (e) => {
  const toast = Toast({
    message: '加载中',
    type: 'loading',
    duration: 0
  })
  setTimeout(() => {
    list1.value[0].children = [
      {
        value: '1-1',
        label: 'Level1-1'
      },
      {
        value: '1-2',
        label: 'Level1-2'
      },
      {
        value: '1-3',
        label: 'Level1-3'
      }
    ]

    toast.clear()
  }, 2000)
}

const list1 = ref([
  {
    value: '1',
    label: 'Level1',
    children: []
  }
])
</script>