nx-admin element ui conventional method

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
    },
    }
}    

 

Guess you like

Origin www.cnblogs.com/MJ-MY/p/11078130.html