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级联 下拉选择-可单独多选(整理)
|
7月前
|
JavaScript 前端开发 API
vue element plus Cascader 级联选择器
vue element plus Cascader 级联选择器
640 0
Element el-select 选择器(下拉框)详解
本文目录 1. 用途 2. 数据绑定 2.1 固定选项 2.2 选项绑定数组 3. 功能效果 3.1 可清空选项 3.2 多选 3.3 可搜索 4. 事件响应 5. 小结
6167 0
Element el-select 选择器(下拉框)详解
|
JavaScript 数据格式
vue里使用elementui的级联选择器el-cascader进行懒加载的怎么实现数据回显?
vue里使用elementui的级联选择器el-cascader进行懒加载的怎么实现数据回显?
816 0
vue里使用elementui的级联选择器el-cascader进行懒加载的怎么实现数据回显?
|
5月前
【el-cascader-plus亲测有限】el-cascader级联选择器懒加载+多选功能回显失败解决方案
【el-cascader-plus亲测有限】el-cascader级联选择器懒加载+多选功能回显失败解决方案
264 0
|
6月前
技术经验分享:Cascader级联选择器Element的使用和总结
技术经验分享:Cascader级联选择器Element的使用和总结
85 0
|
5月前
|
定位技术 API 数据格式
Element UI【详解】el-cascader 级联选择器 - 行政区划选择(可以选择任意一级),限定选择范围,获取并解析选中的节点
Element UI【详解】el-cascader 级联选择器 - 行政区划选择(可以选择任意一级),限定选择范围,获取并解析选中的节点
652 0
|
7月前
|
JavaScript
vue element plus Select 选择器
vue element plus Select 选择器
359 0
|
数据可视化 JavaScript
element-plus 树形控件用法
element-plus 树形控件是一种常用的可视化组件,可以展示树型结构的数据。以下是 element-plus 树形控件的用法。
572 0