写一个vue2的级联选择器,总共三级,每一级都可以全选,或者单独选中某一个,也可以取消选中,选了第一级某一个才有对应的第二级的数据,选了第二级才有第三极的数据

好的，我可以帮你写一个基于 Vue2 的级联选择器。首先，需要引入 Vue 和 ElementUI 组件库：

<template>
  <div class="cascader">
    <el-cascader
      :options="options"
      :props="props"
      v-model="selectedValues"
      @change="handleChange"
      @expand-change="handleExpandChange"
    ></el-cascader>
  </div>
</template>

<script>
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

export default {
  name: 'Cascader',
  props: {
    options: {
      type: Array,
      required: true,
      default: () => []
    },
    props: {
      type: Object,
      default: () => ({
        value: 'value',
        label: 'label',
        children: 'children'
      })
    }
  },
  data() {
    return {
      selectedValues: [],
      selectedOptions: [],
      expanded: false
    }
  },
  watch: {
    selectedValues(val) {
      if (val.length === 0) {
        this.selectedOptions = []
      }
    }
  },
  methods: {
    handleChange(val) {
      this.selectedOptions = val.map((value, index) => {
        const option = this.options[index].find(option => option[this.props.value] === value)
        return option
      })
      this.$emit('change', this.selectedOptions)
    },
    handleExpandChange(value) {
      this.expanded = value
    }
  }
}
</script>

<style scoped>
.cascader {
  display: inline-block;
}
</style>

其中，`options` 属性是级联选择器的所有选项数据，`props` 属性定义了选项的值、标签和子选项的字段名。`selectedValues` 是选中的值，`selectedOptions` 是选中的选项，`expanded` 表示当前是否展开了某一级的选项。

在模板中使用 `el-cascader` 组件来渲染级联选择器。通过绑定 `options`、`props` 和 `selectedValues` 属性，实现级联选择器的数据驱动。`@change` 事件在选项改变时触发，通过遍历 `selectedValues` 获取选中的选项，并通过 `$emit` 方法将选中的选项传递给父组件。`@expand-change` 事件在展开或收起选项时触发，通过 `expanded` 变量保存当前状态。

在父组件中，可以使用这个级联选择器组件来渲染三级级联选择器，并将选项数据传递给组件：

<template>
  <div>
    <cascader :options="options" @change="handleChange"></cascader>
  </div>
</template>

<script>
import Cascader from './Cascader.vue'

export default {
  components: {
    Cascader
  },
  data() {
    return {
      options: [
        [
          { value: '1', label: '选项1' },
          { value: '2', label: '选项2' },
          { value: '3', label: '选项3' }
        ],
        [],
        []
      ]
    }
  },
  methods: {
    handleChange(selectedOptions) {
      console.log(selectedOptions)
    }
  }
}
</script>

在 `options` 中定义了三级选项的数据，第一级有三个选项，第二级和第三级暂时为空。在 `handleChange` 方法中，可以获取到选中的选项数据，并进行相应的处理。