element-ui使用

select选择器的change事件中传递自定义参数

1.实际使用中触发change事件时可能不只需要传递被选中项的值，还要传递index过去

            <el-select v-model="selectValue" v-for="(item,index) in dataList" :key="item.id" placeholder="请选择"
                       @change="((value)=>{changeValue(value, index)})">
              <el-option :label="item.name" :value="item.id"></el-option>
            </el-select>

changeValue(value, index){
    /*业务处理*/
}

2.el-select change事件传递多个值

<el-form ref="form" :model="form">
     <el-form-item label="一级菜单">
            <el-select v-model="menuSelect" filterable placeholder="请选择" style="margin:0 auto  ;"
              size="medium" @change="selectOne">
                 <el-option v-for="item in form.menuSelectData" :key="item.value" :label="item.name" :value="item">
                   </el-option>
              </el-select>
      </el-form-item>
 </el-form>

selectOne(event, item) {     //change 触发事件
            //直接就拿到当前的这个对象了
        },

menuSelectData: [{    //数组格式
                    value: 'all',
                    name: '全部数据',
                    parentId: -1
                }],
menuSelect: '',    //需要在data上面添加这个属性

3.当用户选择select的时候change事件获取到当前的整个对象，:value的时候把整个item都传进去,用value-key接收就会传给change事件

   <el-select v-model="form.userName"  value-key="item" class="control" placeholder="请选择" @change="handleChange">
            <el-option v-for="(item,idx) of list" :key="idx" :label="item.userName" :value="item"/>
          </el-select>

但是会发现当赋值的时候数据有变但是视图不变;可以用change中修改

      handleChange(val) {
        this.form.userName = val.userName
        this.form.userCode = val.userCode
      }