在剪贴板中重复提示处理成功，顺便记录表格复制

时间：2023-04-02 23:04:10 HTML

重复提示处理的原因：因为Clipboard已经定义了多次，所以会反复提示销毁多余的定义。使用clipboard.destroy()清除触发按钮复制表格要复制的表格{{temp.name||temp.text||temp.title}}`{{item[temp.label]||'0'}}`//自定义渲染内容

需要使用复制的textarea内容放到textarea中，然后去掉textarea的值，可以去掉table自身的样式，并且只取表格数据内容datadata(){return{tableKey:'helloword',tableColums:[{name:"Name",label:"name"},{name:"gender",label:"sex"},{name:"age",label:"age"}],copyTableList:[{name:'张三',sex:'男',age:'20',},{name:'丽丝',sex:'女',age:'30',}]}}模板初始化initCopy(){让自己=这个;Vue.nextTick(function(){if(self.xTableObj.afterFullData.length>0){self.copyT}让copybtn=document.getElementById(`copyBtn${self.tableKey}`);让copyTable=document.getElementById(`copyTable${self.tableKey}`);textarea.value="";setTimeout(()=>{textarea.value=copyTable.innerText;if(self.clipboard){self.clipboard.destroy();}letclipboard=newClipboard(copybtn);self.clipboard=clipboard;self.clipboard.on("success",function(e){self.$message({message:"表格复制成功",type:"success"});self.clipboard.destroy();});},500);});}总结由于表有排序过滤操作，每次操作后都需要复制表的内容，所以会调用多次初始化方法，在每次定义前，或者复制成功后清空，可以保证只有一次复制模板定义，多次排序或过滤操作后不会弹出多个提示。注意表中使用的tableKey来指定一个唯一的表。对于单页应用，可能经常会出现多次fetch，需要区分。