vue 基于element ui 简单封装的from表单

效果图

col文件

<template>
  <el-col :span="span">
    <div
      class="c-col__item"
      :style="itemStyle"
    >
      <div
        class="c-col__title"
        :class="{'c-request': request}"
        :style="{minWidth: itemTextMinWidth}"
      >{{title}}</div>
      <div
        class="c-col__input"
        :style="{minWidth: inputMinWidth}"
      >
        <slot />
      </div>
    </div>
  </el-col>
</template>

<script lang="ts">
import { Component, Vue, Prop, Inject } from 'vue-property-decorator'
import CRow from './c-row.vue'
@Component
export default class CCol extends Vue {
  @Inject('c-row')
  row!: CRow;

  @Prop({ default: 24 })
  span!: number
  @Prop({ default: '' })
  /** 文本最小宽度 */
  minWidth!: string
  @Prop({ default: '' })
  title!: string
  /** 每一行与下面边距 */
  @Prop({ default: '' })
  paddingBottom!: string
  /** 对齐方式 */
  @Prop({ default: '' })
  align!: string;
  /** 显示红色必填的 */
  @Prop({ default: false })
  request!: boolean;

  get itemStyle () {
    return { paddingBottom: this.paddingBottom || this.row.paddingBottom, textAlign: this.align || this.row.align }
  }

  get itemTextMinWidth () {
    return this.minWidth || this.row.minWidth
  }

  get inputMinWidth () {
    return `calc(100% - ${this.minWidth || this.row.minWidth})`
  }
}
</script>
<style lang="scss" scope>
.c-col {
  &__item {
    display: flex;
    align-items: center;
    font-size: 14px;
  }
}

.c-request {
  &::before {
    content: '*';
    color: red;
  }
}
</style>

row 文件

<template>
  <el-row :gutter="gutter">
    <slot
      :minWidth="minWidth"
      :align="align"
    />
  </el-row>
</template>

<script lang="ts">
import { Component, Vue, Prop, Provide } from 'vue-property-decorator'
@Component
export default class CRow extends Vue {
  @Prop({ default: '120px' })
  minWidth!: string

  @Prop({ default: 10 })
  gutter!: number

  @Prop({ default: 'left' })
  align!: string;

  @Prop({ default: '10px' })
  paddingBottom!: string

  @Provide('c-row')
  row = {
    minWidth: this.minWidth,
    align: this.align,
    paddingBottom: this.paddingBottom

  }
}
</script>

使用代码

 <c-row
        :gutter="20"
        class="tableRows"
        align="right"
      >
        <c-col
          :request="true"
          title="开始时间："
          :span="8"
        >
          <el-date-picker
            class="w-100"
            v-model.lazy="search.startTime"
            type="date"
            placeholder="客户下单开始时间"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
            size="mini"
          />
        </c-col>
        <c-col
          title="结束时间："
          :span="8"
        >
          <el-date-picker
            class="w-100"
            v-model.lazy="search.startTime"
            type="date"
            placeholder="客户下单开始时间"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
            size="mini"
          />
        </c-col>
        <c-col
          title="采购单号："
          :span="8"
        >
          <el-input
            size="mini"
            v-model.lazy="search.purchaseNo"
            placeholder="采购单号"
          />
        </c-col>
        <c-col
          title="报价单号："
          :span="8"
        >
          <el-input
            size="mini"
            v-model="search.quotedNo"
            placeholder="单据编号"
          />
        </c-col>
        <c-col
          title="客户名称："
          :span="8"
        >
          <el-select
            class="w-100"
            v-model="search.customerCode"
            size="mini"
          >
            <el-option
              v-for="item in customerList"
              :label="item.custName"
              :value="item.custCode"
              :key="item.value"
            />
          </el-select>
        </c-col>
        <c-col
          title="状态："
          :span="8"
        >
          <el-select
            class="w-100"
            v-model="search.status"
            size="mini"
          >
            <el-option
              v-for="item in statusOptions"
              :label="item.label"
              :value="item.value"
              :key="item.value"
            />
          </el-select>
        </c-col>
      </c-row>