Form 模块

详情

详情展示 - 图1

支持本地字典和网络字典以及solt卡槽自定义

  1. <avue-form-detail  v-model="form" :option="option" >
  2.     <template slot="qhdhForm" slot-scope="scope">
  3.         <el-tag>{{scope.row.qhdh}}</el-tag>
  4.     </template>
  5.      <template slot="test" slot-scope="scope">
  6.         <span>{{scope.row}}</span>
  7.     </template>
  8. </avue-form-detail>
  10. <script>
  11. export default {
  12.     data() {
  13.       return {
  14.         form:{
  15.           qhdh: '1000000000',
  16.           zt: '110000',
  17.           xsdh: '1234123421',
  18.           zdd: '3214321432',
  19.           yhxm: '付小小',
  20.           lxdh: '18100000000',
  21.           cykd: '菜鸟仓储',
  22.           qhdz: '浙江省杭州市西湖区万塘路18号',
  23.           bz: '无'
  24.         },
  25.         option:{
  26.            option: [{
  27.             label: '退款申请',
  28.             prop: 'tksq',
  29.             icon: 'el-icon-view',
  30.             column: [{
  31.                   label: '取货单号',
  32.                   prop: 'qhdh',
  33.                   formsolt:true,
  34.               }, {
  35.                   label: '地区',
  36.                   prop: 'zt',
  37.                   props: {
  38.                     label: 'name',
  39.                     value: 'code'
  40.                   },
  41.                   type:'select',
  42.                   dicUrl:'https://cli2.avue.top/api/area/getProvince',
  43.               }, {
  44.                   label: '销售单号',
  45.                   prop: 'xsdh'
  46.               }, {
  47.                   label: '子订单',
  48.                   prop: 'zdd'
  49.               }]
  50.           },
  51.           {
  52.               label: '用户信息',
  53.               prop: 'yhxx',
  54.               icon: 'el-icon-edit-outline',
  55.               column: [{
  56.                   label: '用户姓名',
  57.                   prop: 'yhxm'
  58.               }, {
  59.                   label: '联系电话',
  60.                   prop: 'lxdh'
  61.               }, {
  62.                   label: '常用快递',
  63.                   prop: 'cykd'
  64.               }, {
  65.                   label: '取货地址',
  66.                   prop: 'qhdz'
  67.               }, {
  68.                   label: '备注',
  69.                   prop: 'bz'
  70.               }]
  71.           },{
  72.             label: '自定义分组',
  73.             prop: 'test',
  74.             solt:true,
  75.             icon: 'el-icon-view',
  76.             column: []
  77.           }]
  78.         }
  79.       };
  80.     }
  81. }
  82. </script>

Variables

参数说明类型可选值默认值
solt开启某一分组的自定义组件Booleantrue / falsefalse
formsolt开启某一列的自定义组件Booleantrue / falsefalse
name说明
分组的名称列自定义列的内容，参数为{row}
分组列的名称+Form(nameForm)表单自定义列的内容，参数为{row}