• Detail 详情页
    • 普通用法
    • 分组展示
    • 卡片展示

    Detail 详情页

    常用的详情页展示

    TIP

    1.0.0+

    普通用法

    Detail 详情页 - 图1

    用法和form组件一样，只是不能输用于展示而已

    1. <avue-detail :option="option" v-model="form"></avue-detail>
    2. <script>
    3. export default {
    4.   data(){
    5.     return {
    6.        form:{
    7.           text1:'文本1',
    8.           text2:'文本2',
    9.           text3:'文本3',
    10.        },
    11.        option:{
    12.           icon:'el-icon-info',
    13.           label: '分组',
    14.           prop: 'group',
    15.           column: [{
    16.             label: '内容1',
    17.             prop: 'text1',
    18.           }, {
    19.             label: '选项卡2',
    20.             prop: 'text2',
    21.           }, {
    22.             label: '选项卡3',
    23.             prop: 'text3',
    24.           }]
    25.        }
    26.     }
    27.   }
    28. }
    29. </script>

    分组展示

    Detail 详情页 - 图2

    用法和form组件分组用法一样，在group中配置结构体即可

    1. <avue-detail :option="option1" v-model="form"></avue-detail>
    2. <script>
    3. export default {
    4.   data(){
    5.     return {
    6.        form:{
    7.           text1:'文本1',
    8.           text2:'文本2',
    9.           text3:'文本3',
    10.        },
    11.        option1:{
    12.           group:[
    13.             {
    14.               icon:'el-icon-info',
    15.               label: '分组1',
    16.               prop: 'group',
    17.               column: [{
    18.                 label: '内容1',
    19.                 prop: 'text1',
    20.               }]
    21.             },{
    22.               icon:'el-icon-info',
    23.               label: '分组2',
    24.               prop: 'group',
    25.               column: [{
    26.                 label: '选项卡2',
    27.                 prop: 'text2',
    28.               }, {
    29.                 label: '选项卡3',
    30.                 prop: 'text3',
    31.               }]
    32.             }
    33.           ]
    34.        }
    35.     }
    36.   }
    37. }
    38. </script>

    卡片展示

    Detail 详情页 - 图3

    card组件可开启卡片分组效果，默认为false

    1. <avue-detail :option="option2" v-model="form"></avue-detail>
    2. <script>
    3. export default {
    4.   data(){
    5.     return {
    6.        form:{
    7.           text1:'文本1',
    8.           text2:'文本2',
    9.           text3:'文本3',
    10.        },
    11.        option2:{
    12.           card:true,
    13.           group:[
    14.             {
    15.               icon:'el-icon-info',
    16.               label: '分组1',
    17.               prop: 'group',
    18.               column: [{
    19.                 label: '内容1',
    20.                 prop: 'text1',
    21.               }]
    22.             },{
    23.               icon:'el-icon-info',
    24.               label: '分组2',
    25.               prop: 'group',
    26.               column: [{
    27.                 label: '选项卡2',
    28.                 prop: 'text2',
    29.               }, {
    30.                 label: '选项卡3',
    31.                 prop: 'text3',
    32.               }]
    33.             }
    34.           ]
    35.        }
    36.     }
    37.   }
    38. }
    39. </script>