el-cascader回显数据

在 Vue 中使用 Element UI 的 el-cascader 组件进行数据回显，可以通过 v-model 绑定一个数组来实现。具体步骤如下： 1. 在 Vue 的 data 中定义一个数组变量，用于存储回显数据，例如 `selectedOptions: []`。 2. 在 el-cascader 组件上使用 v-model 指令，将 selectedOptions 数组与组件的选中值进行双向绑定，例如 `v-model="selectedOptions"`。 3. 在 mounted 生命周期钩子中，将回显数据赋值给 selectedOptions 数组，例如 `this.selectedOptions = [1, 3, 5]`。 这样，el-cascader 组件就会根据 selectedOptions 数组中的值进行数据回显。 以下是一个简单的示例代码： ```html <template> <el-cascader v-model="selectedOptions" :options="options"></el-cascader> </template> <script> export default { data() { return { selectedOptions: [], options: [ { value: '1', label: 'Option 1', children: [ { value: '2', label: 'Option 1-1', children: [ { value: '3', label: 'Option 1-1-1' } ] } ] }, { value: '4', label: 'Option 2', children: [ { value: '5', label: 'Option 2-1', children: [ { value: '6', label: 'Option 2-1-1' } ] } ] } ] } }, mounted() { this.selectedOptions = [1, 3, 5]; // 设置回显数据 } } </script> ``` 在上述示例中，el-cascader 组件的 options 属性是一个嵌套的选项数组，用于显示级联选择器的选项。selectedOptions 数组中的值 [1, 3, 5] 就是要回显的数据，在 mounted 生命周期钩子中进行赋值。 注意：以上示例代码仅演示了 el-cascader 组件的基本用法，实际情况中可能需要根据具体需求进行适当的修改。