html怎么实现表单相同复制,Clipboard中success重复提示处理，顺带记录表格复制

重复提示处理

原因: 因为多次定义了Clipboard，所以会重复提示

需要销毁多余的定义，利用 clipboard.destroy() 进行清除

触发按钮

data-clipboard-action="copy"

:id="`copyBtn${tableKey}`"

:data-clipboard-target="`#copyTextarea${tableKey}`"

>

复制表格

需要复制的表格

v-for="(temp,key) in tableColums" :key="key" >{{temp.name||temp.text||temp.title}}

v-for="(item,index) in copyTableList"

:key="index"

>

v-for="(temp,key) in tableColums"

:key="key"

>

`{{item[temp.label]||'0'}}`//自定义渲染内容

需要用到textarea

经过复制的内容放入textarea中，然后去除textarea 的value，就可以去除表格自带样式，只取表格数据内容

name=""

:id="`copyTextarea${tableKey}`"

cols="30"

rows="10"

>

data

data(){

return {

tableKey: 'helloword',

tableColums: [

{

name: "姓名",

label: "name"

},

{

name: "性别",

label: "sex"

},

{

name: "年龄",

label: "age"

}

],

copyTableList: [

{

name: '张三',

sex: '男',

age: '20',

},

{

name: '李四',

sex: '女',

age: '30',

}

]

}

}

模板初始化

initCopy() {

let self = this;

Vue.nextTick(function() {

if (self.xTableObj.afterFullData.length > 0) {

self.copyTableList = self.xTableObj.afterFullData;

}

let copybtn = document.getElementById(`copyBtn${self.tableKey}`);

let copyTable = document.getElementById(`copyTable${self.tableKey}`);

textarea.value = "";

setTimeout(() => {

textarea.value = copyTable.innerText;

if(self.clipboard){

self.clipboard.destroy();

}

let clipboard = new Clipboard(copybtn);

self.clipboard = clipboard;

self.clipboard.on("success", function(e) {

self.$message({

message: "表格复制成功",

type: "success"

});

self.clipboard.destroy();

});

}, 500);

});

}

总结

由于表格带有排序、筛选的操作，需要每次操作完后，复制的是操作后的表格内容，因此会多次调用初始化方法，需要每次定义之前，或者成功复制之后进行清除。

这样既可保证，只有一个复制模板的定义，也就不会在多次操作排序或者筛选之后，弹多个提示。

注意

表格中用到的tableKey，用来指定唯一表格。单页应用，经常可能会取到多个，需要进行区分。

关于找一找教程网

本站文章仅代表作者观点，不代表本站立场，所有文章非营利性免费分享。

本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章，希望广大程序员努力学习，让我们用科技改变世界。

[Clipboard中success重复提示处理，顺带记录表格复制]http://www.zyiz.net/tech/detail-140164.html