1.select选择器呈现树状结构,并且同时获取value值和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:{ //知识分类change knowledgeTypeHandleChange(value) { //知识分类本节点编码 console.log(value) //知识分类数组中文名称 var currentLabels = this.$refs['cascaderKnowledge'].currentLabels } } }
2.select选择器多选,并且同时获取value值和label值
<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{ //角色编码 roleCodes:[], //角色分类 RoleTypeOptions:[ {roleName:'张三',roleCode:'a1'}, {roleName:'李四',roleCode:'b1'} ] } } methods:{ //角色分类 RoleTypeHandleChange(value){ consoel.log(value)//value let obj = []; this.RoleTypeOptions.find((item)=>{//这里的RoleTypeOptions就是上面遍历的数据源 value.find((items)=>{ if(item.roleCode==items){ obj.push(item.roleName) } }) }); console.log(obj);//label }, } }