element的日期选择插件，@change方法如何传递参数

Question

1. 由于页面需要根据 JSON 自己渲染，不能写死，所以在使用@change回调更改时间格式赋值的时候需要动态获取当前循环下的data绑定名，但是@change方法一旦传递参数就会覆盖原本的时间数据。所以请教一下大家如何处理。

2. 代码

   <div v-if="item.name == key && item.dataType == 'Date'">
       <el-date-picker v-model="editForm[item.name]" placeholder="选择日期"
           :editable="false" style="width:100%">
       </el-date-picker>
   </div>
                                       

3. 需要把回调值赋给editForm的item.name，因此我如何在@change的回调函数中获取item.name这个值呢？

Answer 1

在@change事件里用一个箭头函数来传递两个参数给函数 changeHandler

<div v-if="item.name == key && item.dataType == 'Date'">
    <el-date-picker v-model="editForm[item.name]" placeholder="选择日期"
        :editable="false" style="width:100%"
        @change="(value) => changeHandler(value, item.name)">
    </el-date-picker>
</div>

在changeHandler里就能取到你要的值了

methods: {
    // value是空间选择的值，itemName是你要的值
    changeHandler(value, itemName) {
        console.log('value', value)
        console.log('itemName', itemName)
    }
}

Answer 2

默认参数使用$event占位即可

<div v-if="item.name == key && item.dataType == 'Date'">
    <el-date-picker v-model="editForm[item.name]" placeholder="选择日期"
        :editable="false" style="width:100%"
        @change="changeHandler($event, item.name)">
    </el-date-picker>
</div>

Answer 3

这个问题我也想知道 有没有高手来解答

Answer 4

正好解决了我的问题，太赞了。突然感觉最近sf好给力，许多问题在上面找到了答案。