vue-ant-a-table:表格內插入操作按鈕快速使用

vue-ant-a-table:表格內插入操作按鈕快速使用：

具體更多需求看官網和案例自己總結（官網的比較亂而且沒有直接解釋出來，查詢總結試驗比較費勁）

現列出自己常用到的比較快速使用的方式總結：

a-table表格-某列的行內添加標簽元素：

比較常見的是沒一行的某一列通常最后一列有個編輯和刪除按鈕：

1：給column添加某列的屬性

      {
        title: '操作',
        dataIndex: 'tags',
        key: 'tags',
        scopedSlots: { customRender: 'tags' },
      },

scopedSlots: { customRender: 'tags' },一定不能少不然渲染不了html標簽

2：在a-table 標簽內插入想要顯示的內容（插槽形式）：

                     <a-table
                          :row-selection="{ selectedRowKeys: selectedRowKeys,selectedRows:selectedRows, onChange: onSelectChange }"
                          :columns="columns"
                          :data-source="data"
                    >
                        <p slot="tags" slot-scope="text,tags,i">
                            <a-button @click="edit(text,tags,i)">編輯</a-button>
                            <a-button>刪除</a-button>
                        </p>
                    </a-table>

其中：slot="tags" 一定要和column內定義的dataIndex 統一

slot-scope="text,tags,i"：slot-scope是內容內要用到的參數值，打印出來分別是console.log(text,tags,i)//點擊本文本，本行數據，本行的索引

3：可動態數據填寫也可靜態填寫：data數據內的tags值// tags:'qweqw'

 

主要點是：

slot="tags"

scopedSlots: { customRender: 'tags' },