Clipboard中success重複提示處理，順帶記錄表格複製

重複提示處理

緣由: 由於屢次定義了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，用來指定惟一表格。單頁應用，常常可能會取到多個，須要進行區分。