ant-design-vue:a-table使用之在某一行的某一列數據中發送（獲取）所在行整行數據：slot-scope的大用處

先看一個簡單的需求：在table表內插入<a/>連接：動態獲取a連接數據：

這個實現起來比較簡單只需在columns指定列obj內添加：scopedSlots: { customRender: 'tags' },

然后在<a-table>內添加<div slot="tags" slot-scope="tags" class="searchlist">

其中slot：指定內部布局都會顯示在要顯示在tags那一列

slot-scope:指定傳入進來的數據，比如后端數據是data = [

{
key: '1',
id:"20120120",
yongliang:"",
tags: [1,2,3,4],
},]

那么數據會導入到這個插入的插槽div內：既可以通過遍歷獲取所有tags內標簽

代碼：

columns=[ {
       title: '圖紙(僅顯示 .PcbDoc/.pdf/.dwg)',
       key: 'tags',
       dataIndex: 'tags',
       scopedSlots: { customRender: 'tags' },
       ellipsis: true,
       width:300
      },]
data= {
        key: '1',
        id:"20120120",
        yongliang:"",
        tags: [
{
href:"www.baidu.com",
name:"baidu",
...
},{...}],
        },

 <a-table >
<div slot="tags" slot-scope="tags">
    <div v-for="tag in tags">
      <a :href="tag.href">    {{tag.name}}</a>
    </div>
</div>
</a-table>

現在增加需求了：

如果想要加一項：在該項中添加輸入框和按鈕，輸入內容點擊按鈕會保存數據到后端：既發送后端編輯的內容和本行的行號等也就是說所在整行的數據要獲取

那么怎么做呢：

a-table內的數據插槽指定的是本第插槽：怎么才能獲取同級別的所有數據

這個時候slot-scope就起大的作用了：

只需要把slot-scope=“tags"  改為 slot-scope=“text, record, index”即可,text 是本行本列值，record是整行的值，index是所在的第幾行

不過需要注意的是這時tag in tags 就得改成tag in record.tags

代碼：

         <!-- 插槽 -下載圖紙-->
               <div slot="tags" slot-scope="text, record, index" class="searchlist">
                   <template v-if='record.tags.length<1'>
                       <a-spin></a-spin>
                   </template>
                   <template>
                       <p>
                               要映射其它列的數據:比如子建編號:{{record.id}}
                       </p>
                       <div v-if="record.tags == '查詢無結果'">
                        無
                       </div>
                       <div v-else v-for="tag in record.tags">
                              <!-- <a style="color:#1888ff" :href="tag.file_url" title="點擊下載圖標料號">{{tag.filename}}</a><br/> -->
                           <div v-if="tag.status=='已發布'">
                               <span style="color:#0db442;">[ {{tag.status}} ]:</span>  <a style="color:red;border-bottom:1px solid #e80509;" @click="fnTagAHref(tag)" href="javascript:;" title="點擊下載圖標料號">{{tag.filename}}</a>
                           </div>
                           <div v-else>
                             <span  style="color:#964551;"> [  {{tag.status}} ]:</span> <span style="color:#964551;">{{tag.filename}}</span>
                           </div>
                           <br/>
                       </div>
                   </template>
               </div>