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

雨点打透心脏的1/2处 2021-09-25 02:58 728阅读 0赞

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

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1bnRfZXI_size_16_color_FFFFFF_t_70][]

那就开始做吧，先看看正确的写法，以下写法不会导致循环引用问题（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>

效果如下

![20210129141346282.png][]

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

封装的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:\{...\}\}）。所以才导致出现循环依赖的问题。而加上\{\}之后实际上使用的是解构语法，表示只取出被传递的属性的某一个属性，所以就不会出现问题了。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1bnRfZXI_size_16_color_FFFFFF_t_70]: /images/20210923/f0b189f3def3440abb0f049261b706d3.png
[20210129141346282.png]: /images/20210923/364164ca860042beb529b362a515188b.png