element-ui的table数据源更新后,自定义指令的scope数据源未更新而方法的scope数据源已更新

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>

运行结果:
---自定义指令---

img


两个id对不上,log的id是第一页第一个的id

---追加---
详细测了一下,第二第三页点击时都log的是第一页对应行数的数据
---方法---

img


id对上了

为什么?应该怎么改?

1.可以加

this.$nextTick(() => {})

试试