解决封装el-table时出现的循环引用问题

在写项目时遇到一个需求，需要添加一个展开列的功能，用以显示多余的行属性。

由于已经封装过element的table组件，所以这次就想着直接在封装过的组件上添加该功能。

先看一看element官方对于展开列的描述。

 那就开始做吧，先看看正确的写法，以下写法不会导致循环引用问题（Converting circular structure to JSON）。

封装的myTable组件，注意其中的{row}写法。

<template>
<el-table id="iTable" :data="tableList"
              ref="mutipleTable"
              :default-expand-all="options.expandAll"
              row-key="id">
      <!--展开列 -> 展开多余的属性-->
      <el-table-column v-if="options.expandColumn" type="expand">
        <template slot-scope="{row}">
          <slot name="exCol" :exRow="row"></slot>
        </template>
      </el-table-column>
</el-table>
</template>

调用组件时，注意其中的{row}写法。

<my-tables-test v-bind="tab">
    <template slot="exCol" slot-scope="{exRow}">
        <el-row>
            <div>id: {{exRow.id}}</div>
            <div>remark: {{exRow.remark}}</div>
        </el-row>
    </template>
</my-tables-test>

效果如下

以上是正确的写法，下面来看看之前有问题的写法，导致的循环引用问题！

 

封装的myTable组件，（有问题的组件写法）。

<template>
<el-table id="iTable" :data="tableList"
              ref="mutipleTable"
              :default-expand-all="options.expandAll"
              row-key="id">
      <!--展开列 -> 展开多余的属性-->
      <el-table-column v-if="options.expandColumn" type="expand">
        <template slot-scope="row">
          <slot name="exCol" :exRow="row"></slot>
        </template>
      </el-table-column>
</el-table>
</template>

调用组件时，（有问题的调用写法）。

<my-tables-test v-bind="tab">
    <template slot="exCol" slot-scope="exRow">
        <el-row>
            <div>id: {{exRow.id}}</div>
            <div>remark: {{exRow.remark}}</div>
        </el-row>
    </template>
</my-tables-test>

报错如下

Converting circular structure to JSON

原因：未正确的使用传递的属性，在封装的组件el-table的row（<template slot-scope="row">）是插槽传递的属性，是一个对象，里面实际有三个属性（row,cloumn,$index），在调用事传递的exRow(<template slot="exCol" slot-scope="exRow">)实际上也是一个对象，里面有一个属性（exRow:{exRow:{...}}）。所以才导致出现循环依赖的问题。而加上{}之后实际上使用的是解构语法，表示只取出被传递的属性的某一个属性，所以就不会出现问题了。