表格父子表

由于有的表格包含了父子表，在父表填写的完后还要填写子表的内容，由于业务场景复发多元化，如果采用配置的方法去开发，将会边边不可维护，所以这里采用一种灵活的方法去实现

普通用法

父子表 - 图1

如下用法可以根据场景灵活使用，你可以将infoForm自定义内容封装成一个组件使用,这样子将会达到很好的维护效果

  1. <avue-crud :option="option" :data="data"  v-model="form">
  2.   <template slot="infoForm" slot-scope="scope">
  3.      <avue-crud :option="infoOption" :data="infoData">
  4.      </avue-crud>
  5.   </template>
  6. </avue-crud>
  7. <script>
  8. export default {
  9.   data(){
  10.     return {
  11.        form:{},
  12.        data:[{
  13.           name:'张三',
  14.           info:[
  15.             {
  16.               sex:15,
  17.             }, {
  18.               sex:16,
  19.             }
  20.           ]
  21.        }],
  22.        option:{
  23.           dialogWidth:'100%',
  24.           dialogFullscreen:true,
  25.           column: [{
  26.             label: '姓名',
  27.             prop: 'name',
  28.           },{
  29.             labelWidth:0,
  30.             label: '',
  31.             prop: 'info',
  32.             span:24,
  33.             hide:true,
  34.             formslot:true,
  35.           }]
  36.        },
  37.        infoOption:{
  38.           column: [{
  39.             label: '年龄',
  40.             prop: 'sex',
  41.           }]
  42.        }
  43.     }
  44.   },
  45.   computed:{
  46.     infoData(){
  47.       return this.form.info 
  48.     }
  49.   }
  50. }
  51. </script>