1.select presentation of selectors tree, and at the same time get value value value and label
<el- cascader v-model="typeCode" ref="cascaderKnowledge" :options="knowledgeTypeOptions" :props="knowledgeTypeProps" @change="knowledgeTypeHandleChange"> </ El-cascader> export default{ data(){ return{ typeCode:[], knowledgeTypeOptions:[
{typeName:'张三',typeCode:'zs',
typeList:[
{typeName:'张三1',typeCode:'zs1'}
]
},
{typeName:'李四',typeCode:'ls',
typeList:[
{typeName:'李四1',typeCode:'ls1'}
]
},
], knowledgeTypeProps:{ children:'typeList', label:'typeName', value:'typeCode' } } }, methods:{ // Knowledge Class Change knowledgeTypeHandleChange (value) { // knowledge node classification encoding the console.log (value) // knowledge classification array Chinese name var the currentLabels = the this . Refs $ [ ' cascaderKnowledge ' ] .currentLabels } } }
2.select selector multiple choice, and at the same value and the value acquired label value
<el-select v-model="roleCodes" @change="RoleTypeHandleChange" multiple placeholder="请选择"> <el-option v-for="item in RoleTypeOptions" :key="item.roleCode" :label="item.roleName" :value="item.roleCode"> </el-option> </el-select> export default { data(){ return { // character encoding roleCodes: [], // character class RoleTypeOptions: [ roleName {: ' John Doe ' , roleCode: ' A1 ' }, roleName {: ' John Doe ' , roleCode: ' B1 ' } ] } } methods:{ // character class RoleTypeHandleChange (value) { consoel.log (value) // value the let obj = []; the this .RoleTypeOptions.find ((Item) => { // RoleTypeOptions herein above is traversed data source value.find ((items) => { IF ( == item.roleCode items) { obj.push(item.roleName) } }) }); console.log(obj);//label }, } }