element ui 中获取级联积极下拉框的示例

 

 

<el-form-item label="班组" prop="bz">

                            <el-cascader :options="orgTreeData" ref="bzNameRef" :show-all-levels="false"

                                :props="{ checkStrictly: true, emitPath: false, value: 'id', label: 'name' }"

                                placeholder="请选择班组" clearable class="w100" v-model="datagx.bz"

                                @change="setRwjsr(datagx.bz)">

                                <template #default="{ node, data }">

                                    <span>{{ data.name }}</span>

                                    <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>

                                </template>

                            </el-cascader>

                        </el-form-item>

 

const bzNameRef = ref();

 

var selectedBz = bzNameRef.value.getCheckedNodes();
if (selectedBz && selectedBz[0]) {
console.info(selectedBz[0]);
datagx.value.cj = selectedBz[0].parent.value;
datagx.value.cjName = selectedBz[0].parent.label;
datagx.value.bzName = selectedBz[0].label;
}

 

下拉框

<el-form-item label="单位" prop="unit">

                            <el-select clearable class="w100" ref="unitRef" v-model="ruleForm.unit" placeholder="请选择单位">

                                <el-option v-for="(item, index) in dwdata" :key="index" :value="item.jldwmc" :label="item.jldwmc">{{ item.jldwmc }}</el-option>

                            </el-select>

                        </el-form-item>

const unitRef = ref();

ruleForm.value.dwmc = unitRef.value.selectedLabel;