<template>
  <div class="demo-cascader-basic">
    <ui-cascader
      v-model="value"
      :on-change="onChange"
      change-on-select
      :options="options"
      @change="changeEvent">
    </ui-cascader>
  </div>
</template>
<script>
import { Cascader } from "amumu-ui"
export default {
  components: {
    "ui-cascader": Cascader,
  },
  data() {
    return {
      value: ["jiangsu", "nanjing", "zhonghuamen"],
      options: [
        {
          value: "zhejiang",
          label: "Zhejiang",
          children: [
            {
              value: "hangzhou",
              label: "Hangzhou",
              children: [
                {
                  value: "xihu",
                  label: "West Lake",
                },
              ],
            },
          ],
        },
        {
          value: "jiangsu",
          label: "Jiangsu",
          children: [
            {
              value: "nanjing",
              label: "Nanjing",
              children: [
                {
                  value: "zhonghuamen",
                  label: "Zhong Hua Men",
                },
              ],
            },
          ],
        },
      ],
    }
  },
  methods: {
    changeEvent(p, v) {
      console.log(p, v)
    },
    onChange(p, v) {
      console.log("我和上面一样的", p, v)
    },
  },
}
</script>
<style lang="scss">
.demo-cascader-basic {
  .mm-button {
    margin-right: 10px;
  }
}
</style>
