vue专题-cascader获取label值

1、需求

编辑联级选择时，获取选中的文本值。

2、代码实现

前端页面展示代码：

<el-form-item label="服务分类"  prop="categoryId" >
                 <el-cascader  ref="cascaderCatergoryRef"  class="form-item-cascader w-[280px]" @change="handleCatergoryChange"
                    v-model="formData.categoryId"   placeholder="请选择服务分类"
                    :options="optionsData.categoryCate"
                    :props="{
                        value: 'id',
                        label: 'name',
                        children: 'children',
                        multiple: false,
                        emitPath: false
                    }"
                    clearable>
                 </el-cascader>
                </el-form-item>

change方法获取选中的label值

const handleCatergoryChange = async (data) => {
   formData.categoryDesc = cascaderCatergoryRef._rawValue.getCheckedNodes()[0].text;
}

3、解析

1. cascader中的options是获取数据源。
2. props是设置父子级关系的，自定义字段来维系父子级。
3. handleCatergoryChange方法是cascader获取label值，通过ref引用获取选中的text值。

4、页面展示