el-cascader组件默认
回显可通过以下几种方式实现：
### 基础设置
回显
在基础的
el-cascader组件中，通过`v
-mod
el`绑定值来实现默认
回显。示例代码如下：
```html
<
el-cascader v
-mod
el="place_value" :options="place_options" style="width:400px"></
el-cascader>
```
在
Vue实例里，为`place_value`赋予对应的值，就能让
组件默认
显示该值[^1]。
### 处理后端数据
回显
当后端返
回的数据需要处理之后才能
回显时，像后端返
回“2023
- 05
- 06”这种完整日期，前端要按“年
- 月
- 日”形式分割成三级联动，就得对后端返
回的数据进行处理，之后再设置给`v
-mod
el`绑定的值，从而实现
回显[^2]。
### 多选
回显
若要实现
el-cascader多选
回显，可参考官网案例。代码如下：
```html
<div class="block">
<span class="demonstration">折叠展示Tag</span>
<
el-cascader :options="options" :props="props" v
-mod
el="value" collapse
-tags clearable></
el-cascader>
</div>
<script>
export default {
data() {
return {
props: {
multiple: true
},
options: [
{
value: 1,
lab
el: '东南',
children: [
{ value: 2, lab
el: '上海', children: null },
{ value: 7, lab
el: '江苏', children: null },
{ value: 12, lab
el: '浙江', children: null }
]
},
{
value: 17,
lab
el: '西北',
children: [
{ value: 18, lab
el: '陕西', children: null },
{ value: 21, lab
el: '新疆维吾尔族自治区', children: null }
]
}
],
value: []
};
},
};
</script>
```
在这个例子中，给`props`设置`multiple: true`开启多选功能，然后为`value`数组赋予默认选中的值，就能实现多选
回显[^4]。
### 解决封装
组件后默认值改变无法
回显问题
在封装
el-cascader组件时，若默认值改变后无法
回显，要留意
Vue的响应式问题。不能利用索引直接设置数组项，也不能直接修改数组长度。例如：
```
javascript
var vm = new
Vue({
data: {
items: ['a', 'b', 'c']
}
})
vm
.items[1] = 'x'; // 不是响应性的
vm
.items
.length = 2; // 不是响应性的
```
要采用
Vue提供的响应式方法来更新数据，保证
组件能正确
回显默认值[^5]。
使用Vue的el-cascader实现动态支付方式级联选择
文章描述了如何在表单中使用ElementUI的el-cascader组件实现支付方式的多级选择，并展示了如何处理change事件和获取详细信息以更新级联选择。
最低0.47元/天 解锁文章
扫一扫
1048
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
