重复提示处理

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

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

触发按钮

<button    data-clipboard-action="copy"    :id="`copyBtn${tableKey}`"    :data-clipboard-target="`#copyTextarea${tableKey}`">复制表格</button>

需要复制的表格

<div style="position: absolute; top: -1000000px;left:-1000000px">    <!-- <div id="copyDomBox"> -->    <div :id="`copyHeadTable${tableKey}`">        <table border>          <tr>            <th              v-for="(temp,key) in tableColums"              :key="key"            >{{temp.name||temp.text||temp.title}}</th>          </tr>          <tr            v-for="(item,index) in copyTableList"            :key="index"          >            <td              v-for="(temp,key) in tableColums"              :key="key"            >             `<span>{{item[temp.label]||'0'}}</span>`//自定义渲染内容            </td>          </tr>        </table>    </div></div>

需要用到textarea

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

<textarea    name=""    :id="`copyTextarea${tableKey}`"    cols="30"    rows="10"></textarea>

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，用来指定唯一表格。单页应用，经常可能会取到多个，需要进行区分。