el-cascader 回显问题

最新推荐文章于 2024-07-21 19:19:15 发布

是可爱的大福呀~

最新推荐文章于 2024-07-21 19:19:15 发布

阅读量4k

点赞数

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.csdn.net/henghahouhei/article/details/124095125

版权

vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何利用Element UI的`el-cascader`组件来显示和处理下拉树数据，特别是行政区划信息。在示例中，数据从localStorage获取并解析为JSON，然后绑定到级联选择器的选项上。同时，强调了处理数字和字符串类型的差异，以及在变更时的响应式更新。

摘要由CSDN通过智能技术生成

1.定义一个级联

<el-form :model="form" ref="form" :inline="true" :rules="rules" class="search-form search-form1">
          <el-form-item label="所属行政区域" prop="distric">
            <!-- <el-input
               v-model="addForm.address"
               placeholder="请输入"
               size="small"
             />-->
            <el-cascader size="small" placeholder="请选择" :props="defaultProps" filterable v-model="form.distric"
                         @change="handleItemChange"
                         :options="zoning" :show-all-levels="false" clearable></el-cascader>
          </el-form-item>
</el-form>

2.渲染数据

zoning: JSON.parse(localStorage.getItem("treeAll")), //下拉树数据
form: {
                 
                  distric: null,
},
                defaultProps: {
                    value: 'id',
                    children: 'children',
                    label: 'label'
                },








//获取数据

 this.form.distric = response.data.distric;

ps:注意，传入数据是否为字符串类型！element默认数字和字符串类型的数字是有区别的

是可爱的大福呀~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
el-cascader 回显问题

1.定义一个级联<el-form :model="form" ref="form" :inline="true" :rules="rules" class="search-form search-form1"> <el-form-item label="所属行政区域" prop="distric"> <!-- <el-input v-model="addForm.address"
复制链接

扫一扫

专栏目录