在写项目时遇到一个需求,需要添加一个展开列的功能,用以显示多余的行属性。
由于已经封装过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:{...}})。所以才导致出现循环依赖的问题。而加上{}之后实际上使用的是解构语法,表示只取出被传递的属性的某一个属性,所以就不会出现问题了。