antdvue用树结构实现省市联动

以下是使用antdvue实现省市联动的树形结构的示例代码：

<template>
  <a-tree
    :tree-data="treeData"
    :default-expanded-keys="[treeData[0].key]"
    :default-selected-keys="[treeData[0].children[0].key]"
    :selectable="false"
    @select="onSelect"
  >
    <template slot="title" slot-scope="{ key, title }">
      <a-checkbox :value="key" @change="onCheck">{{ title }}</a-checkbox>
    </template>
  </a-tree>
</template>

<script>
import { Tree, Checkbox } from 'ant-design-vue';
import { getProvinceCityData } from '@/api';

export default {
  name: 'ProvinceCityTree',
  components: {
    'a-tree': Tree,
    'a-checkbox': Checkbox,
  },
  data() {
    return {
      treeData: [],
      checkedKeys: [],
    };
  },
  created() {
    this.getTreeData();
  },
  methods: {
    async getTreeData() {
      const res = await getProvinceCityData();
      this.treeData = res.data;
    },
    onCheck(checkedKeys) {
      this.checkedKeys = checkedKeys;
    },
    onSelect(selectedKeys, info) {
      console.log('selected', selectedKeys, info);
    },
  },
};
</script>

在这个示例中，我们使用了antdvue的Tree和Checkbox组件来实现树形结构和多选框功能。我们通过调用getProvinceCityData()方法来获取省市数据，然后将其赋值给treeData。在模板中，我们使用了slot来自定义节点的标题，将Checkbox作为标题的内容，并将节点的key作为Checkbox的value。在onCheck方法中，我们将选中的节点的key保存在checkedKeys中，以便后续处理。在onSelect方法中，我们可以处理节点的选中事件。