vue + Ant Design table自定義表格、添加操作按鈕並獲取當前行數據，重寫列

今天搞了一下午可算搞懂了，網上我查了好多資料發現好像有點老了都

比如這種的：

<template slot="action" slot-scope="text,record">
        <a slot="action"  href="javascript:;" @click="onUser(record)">名稱</a>
        <a slot="action"  href="javascript:;" @click="onRole(record)">權限</a>
</template>
<script>
 columns: [
        {
          dataIndex: "checklistName",
          key: "checklistName",
          id: "1",
          title: this.$t("table.ChecklistName"),
          width: 160,
          fixed: "left",
          scopedSlots: { customRender: "name" },
        },]
</script>

slot、slot-scope、scopedSlots這幾個關鍵的元素好像是無效的，而且我查詢文檔發現都沒有scopedSlots這個方法了，應該是廢棄了，所以可見網上好多方法都是無效的，我就是特地來解救大家的，哈哈哈！廢話先說到這，我們開搞：

 

 

正確教程

第一步創建表格

注意#name是創建的插槽名稱，標簽內放自己想展示的內容，可以放按鈕，圖片，任何你想放的元素（#是創建插槽，name是自己定義的插槽名稱）

 <a-table :columns="columns" :data-source="data">//:columns列，描述數據對象
      <template #name="{ record }">              //:data數據
     <a-button type="primary" ghost @click="hide(record)">編輯</a-button>
      </template>
</a-table>
 
//record是固定寫法，記住不能變，以后獲取行信息用

第二步引用數據

注意是:columns綁定的數據里，寫上slots屬性，然后通過customRender綁定即可

const columns = [
  {
    title: "查看",
    key: "查看",
    dataIndex: "key",
    align: "center",
    slots: { customRender: "name" },//綁定插槽
  },]

第三步獲取對應行的數據

我這里用的是vue3寫的，上面標簽里record變量保存的就是行信息，這里就可以獲取到了

const hide = (e) => {
      console.log(e);
    };

最后效果圖