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>