Element Ui 级联选择器获取选中子节点的所有数据

第一次写这种需求，花了两个小时时间，为了这个第一次做一个记录，如有更好的方法可评论告知 [抱拳]

这是要获取的数据，这是一个行业的选择，选中的结果是每一种行业的最后一级
需求就是图中所表达的，选中最后一级数据进行渲染，并且拿到最后一级的除了Value与Label的其他值

使用的是Element ui 中的级联选择器进行开发

HTML代码

1. 使用options绑定我们的树形结构
2. 使用props属性配置所需要参数
3. 使用ref获取dom元素
4. 绑定change事件使用getCheckedNodes方法获取选中子节点的数据并进行赋值

js数据展示

js样式

可复制代码

html

                    <el-form-item label="行业："
                                  prop="industryCode">
                        <el-cascader v-model="ruleForm.industryCode"
                                     style="width:433px;"
                                     :show-all-levels="false"
                                     placeholder="请选择行业类型"
                                     :options="industryList"
                                     :props="defaultParams">
                        </el-cascader>
                    </el-form-item>

data

  			industryList: [], // 树形结构行业列表的所有数据
            IndustryQualification: '', // 树形结构中的其他字段
            defaultParams: {     // 树形结构的展示字段
                multiple: false,
                emitPath: false,
                label: 'industryName',
                value: 'industryCode',
                children: 'subIndustryList'
            },

js

        handleChange (val) {
            let nodesInfo = this.$refs['cascader'].getCheckedNodes()
            console.log('nodesInfo>>>>>', nodesInfo) // 获取选中的子节点的全部字段
            this.IndustryQualification = nodesInfo[0].data.industryQualification // 获取子节点中想要的字段
        },
        getList () {
            // 查询行业列表
            adIndustryList().then(res => {
                this.industryList = res.data
                console.log(res.data);
            })
        },

第一次写这样的需求，如有更好的方法，请大佬告知 [抱拳]

本文转自 https://blog.csdn.net/AC_Surprise/article/details/119543719，如有侵权，请联系删除。