父子表

Tips

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

姓名	操作

张三

如下用法可以根据场景灵活使用，你可以将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 setup>
import { ref } from 'vue';

const form = ref({});
const data = ref([{
  name: '张三',
  info: [
    { sex: 15 },
    { sex: 16 }
  ]
}]);

const option = ref({
  column: [
    { label: '姓名', prop: 'name' },
    { labelWidth: 0, label: '', prop: 'info', span: 24, hide: true }
  ]
});

const infoOption = ref({
  column: [
    { label: '年龄', prop: 'sex' }
  ]
});
</script>

显示代码复制代码复制代码