做事器采取的是lnmp，后端框架利用ThinkPHP6,前端利用Element-vue来处理，都知道对付php来说将数组存储到数据库，只须要序列化一下就可以了，serialize()官方有现成的语法，反序列化只须要利用unserialize()，当然也可以保存成json格式的，利用json_encode,反序列化json_decode就可以了。
本日我们讲前后端分离的情形下，如何做数据的转换，这里我直接用框架中的语法了，tp6中集成的干系的东西，如果利用原生的也不是很麻烦。
tp6可以通过在模型中直接定义JSON字段的办法来自动序列化，这里我要序列化的字段是detail，这样我们在掌握器中就可以直策应用了，当存detail会自动序列化，同样取的时候也会自动帮你反序列化数据。
我们后端接口形成的数据是这样的
下边我们就须要把api接口获取到的数据显示出来，table中直接:data数据就行了，这里我采取dialog弹窗的办法显示缴费详细数据，涉及到父组件传子组件的问题,这里我只贴出来主要的代码部分，下边是点击函数。
dialog须要设置传输的数据，:detail=detail,在子组件就可以获取数据了，这里数据量不是特殊大，我是一次性获取所有的详细数据了，也可以采取ID要求的办法，须要的时候在从后台取数据。
下边我贴出来子组件的详细写法，仅供参考。
这里是直接$attrs中获取到父组件中的detail的数据，然后table展示干系数据，下边是终极效果图
总结：大致思路，这里没有展示如何存数据，道理是一样的，前端直接传输数组到tp后端，后端模型json序列化存储到数据库中，读取的时候，获取相应字段的数据，前端利用JSON.parse将字符串数据转换成工具，在循环输出干系内容就可以了，在程序设计中，数据库直接存储数组还是比较方便的。
