ElementUI Form：Cascader 级联选择器

ElementUI的Cascader级联选择器是一个用于选择分级数据的组件，如地区选择、类目选择等。以下是一个简单的使用示例：

<template>
  <el-form ref="form" :model="form" label-width="80px">
    <el-form-item label="地区选择">
      <el-cascader
        v-model="form.region"
        :options="regionOptions"
        @change="handleChange"
        placeholder="请选择地区"
      ></el-cascader>
    </el-form-item>
  </el-form>
</template>
 
<script>
export default {
  data() {
    return {
      form: {
        region: []
      },
      regionOptions: [
        {
          value: 'guidang',
          label: '浙东',
          children: [
            {
              value: 'hangzhou',
              label: 'hangzhou',
              children: [
                {
                  value: 'xihu',
                  label: '西湖区'
                }
                // ... 其他子选项
              ]
            }
            // ... 其他子选项
          ]
        },
        // ... 其他选项
      ]
    };
  },
  methods: {
    handleChange(value) {
      console.log(value); // 选中项的值
    }
  }
};
</script>

在这个例子中，el-cascader组件绑定了form.region作为其v-model，它的options属性设置了级联选择器的选项数据，每个选项是一个拥有value和label的对象，如果该选项下还有子选项，则通过children属性表示。当选项变化时，会触发@change事件，并通过handleChange方法处理。