el-select 绑定对象obj + 传入参数(如:index下标等)

情景:

 el-select : @change方法需要传入(自定义)参数,还要接收select 选中的object对象

  • 绑定item(object对象)时,需要在 el-select 标签 绑定value-key属性(值为:value绑定的item中的一个唯一标识)
  • @change需要传入值时,写法如下。接收参数方法:
    • (确定参数数量)按顺序接收:props1 , props2 , props3 ...
    • (不缺定参数数量)用...操作符:
      • 一次性接收全部参数:...reset(rest值为一个 [ ] 数组,其中每一个参数项亦为一个数组。结构:[ [ props1 ] , [ props2 ] , [ props3 ]... ] )。
      • 接收部分参数,剩下的用...全部接收: ( 具体如下代码所示 )
        • 函数参数为 changeSelect( props1,...rest  ){ ... } :
        • 值为:
          • console.log( props1, rest ):props1 , [ [ props2 ] , [ props3 ]... ]
<el-select v-model="value" value-key="id" @change="(...arr) => select_assessmentType(propvalue,propObj, ...arr)" placeholder="请选择">
    <el-option v-for="item in rules" :key="item.id" :label="item.assess" :value="item" />
</el-select>
data() {
    return {
    value: '',
    propvalue: '我是change方法传入的参数',
    propObj: {
        name: '我是传入的obj属性name',
        age: '我是传入的obj属性age',
    },
    options: [{
        assess: "测试2",
        type: "2",
        id: "1"
    }, {
        assess: "测试3",
        type: "3",
        id: "2"
    }]
    }
},
methods: {
    // propvalue:传入的参1(基本数据类型:字符串), propObj:传入的参2(引用数据类型:object对象), select_options_item:el-select 选中的item值
    // 方法一:按顺序(挨个)接收传入的值
    select_assessmentType(propvalue, propObj, select_options_item) {
    console.log(propvalue, propObj, select_options_item)
    console.log(propvalue) // '我是change方法传入的参数'
    console.log(propObj) // { name: '我是传入的obj属性name', age: '我是传入的obj属性age' }
    console.log(select_options_item) // { assess: "测试2", type: "2", id: "1" }
    },
    // 方法二:用...操作符接收传入参数:...rest_props 数组最后一项为下拉框选中的item值
    select_assessmentType(propvalue, ...rest_props) {
    console.log(propvalue, rest_props) //  '我是change方法传入的参数' , [{ name: '我是传入的obj属性name', age: '我是传入的obj属性age' }, { assess: "测试2", type: "2", id: "1" }]
    },
}

猜你喜欢

转载自blog.csdn.net/Shimeng_1989/article/details/127009939
今日推荐