vue级联选择器组件

Vue 级联选择器组件可以通过使用 Vue.js 和 Element UI 库来实现。Element UI 是一种基于 Vue.js 的桌面端组件库，提供了一种可定制的 UI 组件集合，其中包括级联选择器组件。

以下是一个简单的 Vue 级联选择器组件示例：

<template>
  <div>
    <el-cascader
      :options="options"
      v-model="selectedItems"
      :props="{ value: 'id', label: 'name', children: 'children' }"
      @change="handleChange"
    ></el-cascader>
  </div>
</template>

<script>
import { Cascader } from 'element-ui'

export default {
  components: {
    'el-cascader': Cascader
  },
  data() {
    return {
      options: [{
        id: '1',
        name: 'Option 1',
        children: [{
          id: '1-1',
          name: 'Option 1-1'
        }, {
          id: '1-2',
          name: 'Option 1-2',
          children: [{
            id: '1-2-1',
            name: 'Option 1-2-1'
          }, {
            id: '1-2-2',
            name: 'Option 1-2-2'
          }]
        }]
      }, {
        id: '2',
        name: 'Option 2'
      }],
      selectedItems: []
    }
  },
  methods: {
    handleChange(value) {
      console.log(value)
    }
  }
}
</script>

在上面的示例中，我们使用了 Element UI 提供的 `el-cascader` 组件来实现级联选择器。我们定义了一个 `options` 数组，其中包含了级联选择器的选项以及其子选项。我们还定义了 `selectedItems` 数组来存储用户当前选择的选项。我们通过 `v-model` 指令将 `selectedItems` 与 `el-cascader` 组件绑定，以便在用户选择选项时更新数据。我们还使用 `props` 属性来指定选项的 `value`、`label` 和 `children` 属性。最后，我们在 `change` 事件上监听用户的选项更改，并在控制台上打印出当前选中的选项。

这只是一个简单的示例，你可以根据你的需求来自定义级联选择器组件。