表格中表单分组

表格中弹出的表单采用分组的形式，会用于以下场景：

  • 表单的内容和表格内容不一致
  • 表单的内容采用分组的形式
  • 点击下面例子编辑或新增去体验

TIP

1.0.9+

普通用法

表单分组 - 图1

  1.  <avue-crud :option="option" v-model="obj" :data="data">
  2.   <template slot-scope="scope" slot="namesForm">
  3.     <div>
  4.       <span></span>
  5.       <avue-input :disabled="scope.disabled" :label="scope.column.label" v-model="obj.names"></avue-input>
  6.     </div>
  7.   </template>
  8. </avue-crud>
  9. <script>
  10. let baseUrl = 'https://cli2.avue.top/api/area'
  11. export default {
  12.     data() {
  13.       return {
  14.         obj: {
  15.           name: '11'
  16.         },
  17.         data: [],
  18.         option: {
  19.           column: [{
  20.             label: '姓名',
  21.             prop: 'name'
  22.            },
  23.             {
  24.             label: '年龄',
  25.             prop: 'sex'
  26.           }],
  27.           group: [
  28.             {
  29.               label: '用户信息',
  30.               prop: 'jbxx',
  31.               icon: 'el-icon-edit-outline',
  32.               column: [
  33.                 {
  34.                   label: '姓名',
  35.                   prop: 'name'
  36.                 },
  37.                  {
  38.                   label: '年龄',
  39.                   prop: 'sex'
  40.                 }
  41.               ]
  42.             }, {
  43.               label: '退款申请',
  44.               prop: 'tksq',
  45.               icon: 'el-icon-view',
  46.               column: [
  47.                 {
  48.                   label: '省份',
  49.                   prop: 'province',
  50.                   type: 'select',
  51.                   props: {
  52.                     label: 'name',
  53.                     value: 'code'
  54.                   },
  55.                   cascaderItem: ['city', 'area'],
  56.                   dicUrl: `${baseUrl}/getProvince`,
  57.                   dicData: 'province',
  58.                   rules: [
  59.                     {
  60.                       required: true,
  61.                       message: '请选择省份',
  62.                       trigger: 'blur'
  63.                     }
  64.                   ]
  65.                 },
  66.                 {
  67.                   label: '城市',
  68.                   prop: 'city',
  69.                   type: 'select',
  70.                   props: {
  71.                     label: 'name',
  72.                     value: 'code'
  73.                   },
  74.                   defaultIndex: 1,
  75.                   dicFlag: false,
  76.                   dicUrl: `${baseUrl}/getCity/`,
  77.                   rules: [
  78.                     {
  79.                       required: true,
  80.                       message: '请选择城市',
  81.                       trigger: 'blur'
  82.                     }
  83.                   ]
  84.                 },
  85.                 {
  86.                   label: '地区',
  87.                   prop: 'area',
  88.                   type: 'select',
  89.                   props: {
  90.                     label: 'name',
  91.                     value: 'code'
  92.                   },
  93.                   defaultIndex: 1,
  94.                   dicFlag: false,
  95.                   dicUrl: `${baseUrl}/getArea/`,
  96.                   rules: [
  97.                     {
  98.                       required: true,
  99.                       message: '请选择地区',
  100.                       trigger: 'blur'
  101.                     }
  102.                   ]
  103.                 }
  104.               ]
  105.             }
  106.             , {
  107.               label: '用户信息',
  108.               prop: 'yhxxs',
  109.               icon: 'el-icon-edit-outline',
  110.               column: [
  111.                 {
  112.                   label: '测试长度',
  113.                   prop: 'len',
  114.                   maxlength: 5,
  115.                 }, {
  116.                   labelWidth: 120,
  117.                   label: '测试自定义',
  118.                   prop: 'names',
  119.                   formslot: true
  120.                 }
  121.               ]
  122.             }
  123.           ]
  124.         }
  125.       }
  126.     },
  127.     mounted() {
  128.       this.data = [{
  129.         name: '张三',
  130.         sex:15,
  131.         province: '110000',
  132.         city: '110100',
  133.         area: '110101',
  134.         checkbox: ['110000']
  135.       }]
  136.     },
  137.     methods: {
  138.     }
  139. }
  140. </script>