父子表

TIP

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

暂无数据

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

<template>
  <avue-crud :option="option"
             :data="data"
             v-model="form">
    <template #info-form="{}">
      <avue-crud :option="infoOption"
                 :data="form.info">
      </avue-crud>
    </template>
  </avue-crud>
</template>
<script>
export default {
  data () {
    return {
      form: {},
      data: [{
        name: '张三',
        info: [
          {
            sex: 15,
          }, {
            sex: 16,
          }
        ]
      }],
      option: {
        column: [{
          label: '姓名',
          prop: 'name',
        }, {
          labelWidth: 0,
          label: '',
          prop: 'info',
          span: 24,
          hide: true
        }]
      },
      infoOption: {
        column: [{
          label: '年龄',
          prop: 'sex',
        }]
      }
    }
  }
}
</script>
显示代码
Last Updated:
Contributors: smallwei
您正在浏览基于Avue 3.x文档; 点击这里 查看Avue 2.x 的文档