• 表格父子表
    • 普通用法

    表格父子表

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

    普通用法

    父子表 - 图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>