element-ui的table数据源更新后,自定义指令的scope数据源未更新而方法的scope数据源已更新
main.js中的自定义指令
Vue.directive('copy',{
bind: function(el,binding){
el.style.cursor = "pointer"//更改光标形态
// 将复制方法保存在元素上
el.copy = ()=>{
console.log(binding.value);
if(!binding.value)return
if(navigator.clipboard){
navigator.clipboard.writeText(binding.value).then((res)=>{
Vue.prototype.$message.success('复制成功')
},(rej)=>{
Vue.prototype.$message.error('复制失败')
})
}else{
try {
let temp = document.createElement('input')
temp.setAttribute('value',binding.value)
document.body.appendChild(temp)
temp.select()
document.execCommand('copy')
document.body.removeChild(temp)
Vue.prototype.$message.success('复制成功')
} catch (error) {
Vue.prototype.$message.error('复制失败')
}
}
}
// 添加事件监听
el.addEventListener('click',el.copy)
},
unbind: function(el){
// 移除事件监听
el.removeEventListener('click',el.copy)
}
})
el-table中
---自定义指令---
<el-table-column prop="cipher" label="秘钥" width="100" align="center">
<template slot-scope="scope">
<div v-copy="scope.row.id">{{scope.row.cipher}}</div>
<!-- <div @click="copyCode(scope.row.cipher)" style="cursor:pointer;">{{scope.row.cipher}}</div> -->
</template>
</el-table-column>
---方法---
<el-table-column prop="cipher" label="秘钥" width="100" align="center">
<template slot-scope="scope">
<!-- <div v-copy="scope.row.id">{{scope.row.cipher}}</div> -->
<div @click="copyCode(scope.row.id)" style="cursor:pointer;">{{scope.row.cipher}}</div>
</template>
</el-table-column>
运行结果:
---自定义指令---
---追加---
详细测了一下,第二第三页点击时都log的是第一页对应行数的数据
---方法---
为什么?应该怎么改?
1.可以加
this.$nextTick(() => {})
试试