• 表格中表单分组
    • 普通用法

    表格中表单分组

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

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

    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>