實作在vue中使用dataTable并在最後一列加操作按鈕綁定事件

參考:https://blog.csdn.net/x763795151/article/details/102650400

想給導入的dataTable最後一列加操作按鈕，網上有很多教程，但都隻是加了按鈕但沒有綁定事件，或我嘗試後報各種錯誤，在此記錄成功方案。

舉例需求是寫一個删除按鈕，傳id給背景來删除

最開始我使用onclick

onclick=that.delete(row.id)
           

但發現重新整理頁面後不用點選就會直接執行delete方法，而且是一口氣把所有行的都執行了，後來得知是onclick事件處理器不能帶參數，試了很多網上的修改方法反正沒成功，報的啥錯我都忘了。

我嘗試把括号删了，直接that.delete，但又會報錯

Function statements require a name

我懷疑是因為把方法寫在了methods裡調用出了啥問題(datatable的代碼在mounted裡)，無力解決。

我以為是字元串拼接出了問題，找了很多辦法，改成

onclick=that.delete("'+row.id+'")
           

會報錯

that is not define

顯然我是定義了的，我以為是前面也得拼接才能調用

onclick='"+that.delete+"'"("'+row.id+'")"'
           

(别笑，這真的已經是我努力的結果)，可惜還是一直報錯沒法調用，還試了網上的加轉義符，在哪加都試了，單引号和雙引号已經把我搞昏了

終于放棄了onclick，在html拼接裡用onclick就是要倒黴，特别是在vue裡寫更是搞不好

我開始試圖直接在mounted裡寫delete方法

大概這樣，選擇id為del的按鈕，操作他的tr行，反正點了就沒反應

$('#del').on('click','tr',function(){ console.log("11");}
           

一度絕望，因為連錯都不報無從下手(可能是因為我太菜吧TAT)

最後正确的方法

直接貼代碼把,首先是columnDefs裡的render部分,let that = this寫在mounted下面

render: function (data, type, row) {
              var delBtn = "del"+row.garageId;
              $('#dataTable').undelegate('tbody #'+delBtn,'click');
              $('#dataTable').on('click','tbody #'+delBtn,function(){
                that.delGarage(row.garageId)
              })  
              return (
                '<button type="button" class="btn btn-block bg-gradient-info" id="'+delBtn+'">删除</button>'  
              );
            },
           

然後是methods部分

methods: {
    delGarage(id) {
      console.log(id);
       this.$axios.post('/api/garage/delGarage?garageId='+id+'')
      .then((res) => {
        alert(res.data)
        if(res.data=="删除成功"){
          this.$router.go(0)
        }
      });
    },
  },
           

這個undelegate網上說是删除由 delegate() 方法添加的一個或多個事件處理程式。其實我還沒太懂啥意思。。但試了如果沒有就會執行兩次一下成功一下失敗，如果有朋友懂歡迎能跟我講解一下。