Vue table通过slot插槽关联方法

这篇文章纯粹是给自己看，就是个笔记！防止自己忘记。毕竟好不容易写出来的东西马上要删掉了，因为和需求不符合。好奇怪，你就给我文字，我怎么可能画出来你真正想要的嘛。但是这个过程，还是学到了一些东西的。记下来，以便下次用到粘贴复制。

这个功能是，我table里面有数据，然后我想点击某条记录的某个字段，然后跳转到其他页面。这个好像只能用插槽搞？技术越先进，怎么就越难了呢。草！草！草！前端的基础不应该是js、html、css么？妈的！烦得一笔啊！什么臭傻逼vue！什么傻逼技术迭代！草他妈的！不管了，直接上代码。

先上VUE关联插槽部分的：

  private columns = [
    {
      title: '项目',
      dataIndex: 'projectName',
      align: 'center'
    },
    {
	   //这部分关联页面的插槽
       title: '查看子记录',
       dataIndex: 'action',
       width: '150px',
	   //slot="action"
       scopedSlots: { customRender: 'action' }
    }
  ]

再上页面定义插槽部分的：

    <s-table
      ref="table"
      size="default"
      rowKey="id"
      bordered="true"
      :columns="columns"
      :data="loadData"
      showPagination="auto"
    >
	
	  <--定义插槽，slot-scope里的record直接获取到记录对象-->
      <span
        slot="action"
        slot-scope="text, record"
      >
        <template>
          <a @click="openSonList(record)"
          > {{record.sonNumber}}</a>
        </template>
      </span>
    </s-table>

在上关点击事件具体方法内容：跳转到其他页面

  protected openSonList(record: ProgressAnalysis) {
    debugger
    console.log(this)
    this.$router.push({
      name: "ProgressAnalysisSonListPage",
      params: {parent: record.projectId.toString()}
      // params: { cid: activityResponse.id,enrollnum:activityResponse.enrollnum,display_name:activityResponse.display_name}
    });
  }

目标页面获取参数如下：

parameter.parent = this.$route.params.parent

基本上就这样。下次用可以直接抄了。最后草他妈比的vue，草他妈比的技术迭代，让老子加班。