nx-admin element ui 常用方法

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

猜你喜欢

转载自www.cnblogs.com/MJ-MY/p/11078130.html