oms/src/views/demo/form.vue

<template>
  <div class="form" >
    <by-tool :propConfig="toolConfig" @onAdd="onAdd" />
    <by-form :propConfig="config" ref="form" />
    <el-button type="primary" @click="getFormData">获取数据</el-button>
    <el-button type="primary" @click="getFormVali">获取表单验证</el-button>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
@Component
export default class DemoForm extends Vue {
  config={
    attr:{
      size:'small',
      height:500,
      rules:{
        name:[{
          required: true, message: '请输入名称', trigger: 'blur'
        }]
      }
    },
    columns:[
      [{
        span:6,
        label:'名称',
        prop:'name',
        // required:true,
        // error:'验证出错啦！',
        component:'by-input',
        compConfig:{
          attr:{
            placeholder:'请输入名称',
            clearable:true
          }
        }
      },{
        span:6,
        label:'名称2',
        prop:'name2',
        // required:true,
        component:'by-input',
        compConfig:{
          attr:{
            placeholder:'请输入名称',
            clearable:true
          }
        }
      }],
      [{
        span:6,
        label:'下拉框',
        prop:'select',
        rules:[
          { required: true, message: '请选择数据', trigger: 'change' }
        ],
        component:'by-select',
        compConfig:{
          attr:{
            placeholder:'请选择数据',
            clearable:true,
            data:[{
              value: '选项1',
              label: '黄金糕'
            }, {
              value: '选项2',
              label: '双皮奶'
            }, {
              value: '选项3',
              label: '蚵仔煎'
            }, {
              value: '选项4',
              label: '龙须面'
            }, {
              value: '选项5',
              label: '北京烤鸭'
            }]
          }
        }
      },{
        span:6,
        label:'时间',
        prop:'date',
        rules:[
          { required: true, message: '请选择时间', trigger: 'change' }
        ],
        component:'by-date-picker',
        compConfig:{
          format:'yyyy-MM-dd',
          type:'date'
        }
      }]
    ]
  }

  toolConfig:any={
    tools:{
      onAdd:true,
      onUpdate:true,
      onDelete:true,
      onExport:true
    }
  }

  onAdd(){
    console.log('新增操作')
  }

  getFormData(){
    let data = (this as any).$refs.form.getValue();
    console.log('表单数据：',data);
  }

  getFormVali(){
    (this as any).$refs.form.validate().then(()=>{
      console.log('验证通过')
    }).catch(()=>{
      console.log('验证不通过')
    });
  }
}
</script>
<style lang="scss" scoped>
.form{
  width: 100%;
}
</style>