利用箭头函数解决vue使用setTimeout的this问题和使用小技巧
注:箭头函数本身没有执行作用域,是继承其父的执行上下文,所以箭头函数的this指向绑定其父的作用域1、在vue里面使用setTimeout发现this失效原因是setTimeout的this指向的windows解决:setTimeout的第一个参数的function用箭头函数来代替,原因文章开头已解释了箭头函数的作用2、vue的方法想要同时传入事件对象和自定义参数解决方法:1、方法名($event
·
注:箭头函数本身没有执行作用域,是继承其父的执行上下文,所以箭头函数的this指向绑定其父的作用域
1、在vue里面使用setTimeout发现this失效
原因是setTimeout的this指向的windows
解决:setTimeout的第一个参数的function用箭头函数来代替,原因文章开头已解释了箭头函数的作用
2、vue的方法想要同时传入事件对象和自定义参数
解决方法:
1、方法名($event,定义参数)$event为自定义参数
2、使用箭头函数(val)=>{方法名(val,自定义参数)}
用一个小例子展示:table操作栏的下拉选择改变的时候想要对应改变这一列的值
<template>
<div class="indexPage">
<el-table
v-loading="loading"
:data="tableData"
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
<el-table-column label="性别" prop="sex">
<template slot-scope="scope">
<el-select v-model="scope.row.sex" @change="(val)=>{changeSex(val,scope.$index)}" placeholder="请选择">
<!--或者 changeSex($event,scope.$index) -->
<el-option
v-for="item in sexData"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
name: 'Index',
data () {
return {
tableData: [{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
sex:'男'
}, {
date: '2016-05-02',
name: '叶晓欣',
address: '广东广州',
sex:'女'
}, {
date: '2016-05-04',
name: '钱新倩',
address: '北京朝阳',
sex:'男'
}],
loading: true,
sexData:[
{
label:'女',
value:'女'
},
{
label:'男',
value:'男'
}
]
};
},
mounted() {
this.loading = false
setTimeout(()=>{
console.log(this)
},500)
},
methods: {
changeSex(data,index){
this.tableData[index].sex = data
console.log(this.tableData[index])
}
}
}
</script>
<style scoped lang="scss">
.indexPage{
/deep/ .el-table thead th{
background-color:#ccc;
}
// ::v-deep .el-table thead th{
// background-color:pink;
// }
}
</style>
效果如下:
更多推荐
已为社区贡献2条内容
所有评论(0)