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,
                        }
                    }) : []
        };
    });
})

效果:

相关文章
|
2月前
|
JavaScript 前端开发 API
vue element plus Cascader 级联选择器
vue element plus Cascader 级联选择器
287 0
element中el-cascader级联 下拉选择-可单独多选(整理)
element中el-cascader级联 下拉选择-可单独多选(整理)
|
9月前
|
JavaScript 数据格式
vue里使用elementui的级联选择器el-cascader进行懒加载的怎么实现数据回显?
vue里使用elementui的级联选择器el-cascader进行懒加载的怎么实现数据回显?
258 0
vue里使用elementui的级联选择器el-cascader进行懒加载的怎么实现数据回显?
Element el-select 选择器(下拉框)详解
本文目录 1. 用途 2. 数据绑定 2.1 固定选项 2.2 选项绑定数组 3. 功能效果 3.1 可清空选项 3.2 多选 3.3 可搜索 4. 事件响应 5. 小结
4798 0
Element el-select 选择器(下拉框)详解
|
11天前
技术经验分享:Cascader级联选择器Element的使用和总结
技术经验分享:Cascader级联选择器Element的使用和总结
|
2月前
|
JavaScript
vue element plus Select 选择器
vue element plus Select 选择器
140 0
|
8月前
|
存储 JavaScript 前端开发
Jquery 如何获取子元素。如何找到所有 HTML select 标签的选中项。jQuery 里的 ID 选择器和 class 选择器有何不同
Jquery 如何获取子元素。如何找到所有 HTML select 标签的选中项。jQuery 里的 ID 选择器和 class 选择器有何不同
76 1
|
11月前
|
数据可视化 JavaScript
element-plus 树形控件用法
element-plus 树形控件是一种常用的可视化组件,可以展示树型结构的数据。以下是 element-plus 树形控件的用法。
428 0
|
12月前
element Plus 表格嵌套其他组件的使用
element Plus 表格嵌套其他组件的使用
130 0
|
前端开发
CSS之选择器(十一):focus-within
CSS之选择器(十一):focus-within
CSS之选择器(十一):focus-within