element-Cascader级联选择器用法?

简介: element-Cascader级联选择器用法?

html

<el-form-item label="行业选择" :label-width="formLabelWidth">
                    <div class="m-4">
                        <el-cascader v-model="form.tradeid" :options="options" :props="props" />
                    </div>
                </el-form-item>

script

const options = ref([]);
// 行业id
axios({
    url: '接口数据',
    params: {},
}).then(res => {
    console.log(res);
    options.value = res.data.data.map((item) => {
        return {
            value: item.name,
            label: item.name,
            children:
                item.children.length > 0
                    ? item.children.map((item2) => {
                        return {
                            value: item2.name,
                            label: item2.name,
                        }
                    }) : []
        };
    });
})

效果:

相关文章
element中el-cascader级联 下拉选择-可单独多选(整理)
element中el-cascader级联 下拉选择-可单独多选(整理)
|
8月前
|
JavaScript 前端开发 API
vue element plus Cascader 级联选择器
vue element plus Cascader 级联选择器
685 0
|
JavaScript 数据格式
vue里使用elementui的级联选择器el-cascader进行懒加载的怎么实现数据回显?
vue里使用elementui的级联选择器el-cascader进行懒加载的怎么实现数据回显?
868 0
|
6月前
【el-cascader-plus亲测有限】el-cascader级联选择器懒加载+多选功能回显失败解决方案
【el-cascader-plus亲测有限】el-cascader级联选择器懒加载+多选功能回显失败解决方案
399 0
|
6月前
|
定位技术 API 数据格式
Element UI【详解】el-cascader 级联选择器 - 行政区划选择(可以选择任意一级),限定选择范围,获取并解析选中的节点
Element UI【详解】el-cascader 级联选择器 - 行政区划选择(可以选择任意一级),限定选择范围,获取并解析选中的节点
802 0
|
7月前
技术经验分享:Cascader级联选择器Element的使用和总结
技术经验分享:Cascader级联选择器Element的使用和总结
110 0
|
数据可视化 JavaScript
element-plus 树形控件用法
element-plus 树形控件是一种常用的可视化组件,可以展示树型结构的数据。以下是 element-plus 树形控件的用法。
604 0
|
数据格式
Element el-cascader 级联选择器详解
本文目录 1. 概述 2. 数据绑定 2.1 默认数据绑定 2.2 指定绑定数据格式 3. 常用功能 3.1 修改触发方式 3.2 增加清空按钮 3.3 可搜索 3.4 选中项只显示最后一级 3.5 可选中任意一级 3.6 面板样式 3.7 自定义节点内容 4. 动态加载下级 5. 小结
3520 0
element Plus 表格嵌套其他组件的使用
element Plus 表格嵌套其他组件的使用
220 0

热门文章

最新文章