element UI form table 表单以及验证

在开发过程中偶尔遇到el-table嵌套el-form，而且还需要表单验证的需求，但是这种都是官方的组件就可以实现，但是有时候我们需要表格的这种形式，那么使用原生的就不行了，下面我们来看一下这种的form table使用：

 下面让我们看看：

首先模板文件代码如下：

<div class="goods-table">
        <el-table ref="goodsTable" highlight-current-row :data="goodsData" style="width: 100%" border height="150px" @row-click="clickEditRow">
          <el-table-column prop="goods_seq_no" label="序号" width="50" class="good-column"/>
          <el-table-column prop="putrec_seqno" label="商品序号" width="120" class="good-column"/>
          <el-table-column prop="matnr_no" label="商品订单号" width="150" :show-overflow-tooltip="true" class="good-column"/>
          <el-table-column prop="entry_goods_seqno" label="SKU序号" width="150" class="good-column"/>
          <el-table-column prop="goods_name" label="商品名称" width="100" class="good-column"/>
          <el-table-column prop="hs_v_code"  label="商商品编号" width="100" class="good-column">
          </el-table-column>
          <el-table-column prop="supervise_condition" label="销售条件" width="120" class="good-column"/>
          <el-table-column prop="order_model" label="订单型号" width="120" class="good-column"/>
          <el-table-column prop="deal_price" label="单价" width="130" class="good-column">
          </el-table-column>
          <el-table-column prop="deal_total" label="总价" width="150" class="good-column">
          </el-table-column>
          <el-table-column prop="deal_num" label="数量" width="150" class="good-column">
          </el-table-column>
          <el-table-column prop="deal_uom" label="生产厂家" width="100" class="good-column">
          </el-table-column>
          <el-table-column prop="first_law_num" label="预定数量" width="120" class="good-column"/>
          <el-table-column prop="first_law_uom" label="预定单位" width="120" class="good-column"/>
          <el-table-column prop="second_law_num" label="销售数量" width="120" class="good-column"/>
          <el-table-column prop="second_law_uom" label="销售单位" width="120" class="good-column"/>
          <el-table-column prop="gross_wt" label="毛重（KG）" width="120" class="good-column"/>
          <el-table-column prop="net_wt" label="净重（KG）" width="120" class="good-column"/>
          <el-table-column prop="wt_sf_val" label="重量系数" width="120" class="good-column"/>
         。。。。。。。。。。省略（代码和上面一样）
        </el-table>
      </div>
      <div v-enter-to-next class="goods-edit">
        <el-form ref="edit_form" class="app-desk-form edit-form" :model="edit_form" :rules="edit_form_rule" @validate="editValidate">
          <table class="percent-100">
            <tbody>
            <tr>
              <td class="td-01 text-right">序号</td>
              <td class="td-1">
                <el-form-item prop="goods_seq_no">
                  <el-input v-model="edit_form.goods_seq_no" name="goods_seq_no"  />
                </el-form-item>
              </td>
              <td class="td-01 text-right">商品序号</td>
              <td class="td-1">
                <el-form-item prop="putrec_seqno">
                  <el-input ref="putrec_seqno" v-model.trim="edit_form.putrec_seqno" name="putrec_seqno" :maxlength="10" />
                </el-form-item>
              </td>
              <td class="td-01 text-right"><i class="rb">*</i>商品订单号</td>
              <td class="td-1">
                <el-form-item prop="matnr_no">
                  <el-input v-model="edit_form.matnr_no" name="matnr_no" class="non-empty" :maxlength="255" />
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="td-01 text-right">SKU序号</td>
              <td class="td-1">
                <el-form-item prop="entry_goods_seqno">
                  <el-input v-model="edit_form.entry_goods_seqno" name="entry_goods_seqno"  />
                </el-form-item>
              </td>
              <td class="td-01 text-right">商品名称</td>
              <td class="td-1">
                <el-form-item prop="codeTs">
                  <el-input ref="codeTs" v-model.trim="edit_form.codeTs" name="codeTs" :maxlength="10" />
                </el-form-item>
              </td>
              <td class="td-01 text-right"><i class="rb">*</i>商品预售代号</td>
              <td class="td-1">
                <el-form-item prop="hs_code">
                  <el-input v-model="edit_form.hs_code" name="hs_code" class="non-empty" :maxlength="255" @keyup.enter.native="searchGoods" />
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="td-01 text-right"><i class="rb">*</i>商品名称</td>
              <td class="td-1">
                <el-form-item prop="goods_name">
                  <el-input v-model="edit_form.goods_name" name="goods_name" class="non-empty" />
                </el-form-item>
              </td>
              <td class="td-01 text-right"><i class="rb">*</i>订单型号</td>
              <td class="td-1">
                <el-form-item prop="goods_model">
                  <el-input ref="goods_model" v-model.trim="edit_form.goods_model" name="goods_model" class="non-empty sEnd" :maxlength="10" />
                </el-form-item>
              </td>
              <td class="td-01 text-right"><i class="rb">*</i>国际币制</td>
              <td class="td-1">
                <el-form-item prop="deal_currency">
                  <el-input v-model="edit_form.deal_currency" name="deal_currency" class="non-empty" :maxlength="255" />
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="td-01 text-right">生产厂家</td>
              <td class="td-1">
                <el-form-item prop="deal_uom">
                  <el-input v-model="edit_form.deal_uom" name="deal_uom" />
                </el-form-item>
              </td>
              <td class="td-01 text-right">预定单位</td>
              <td class="td-1">
                <el-form-item prop="first_law_uom">
                  <el-input ref="first_law_uom" v-model.trim="edit_form.first_law_uom" name="first_law_uom" :maxlength="10" @keyup.enter.native="searchGoods" />
                </el-form-item>
              </td>
              <td class="td-01 text-right">销售单位</td>
              <td class="td-1">
                <el-form-item prop="second_law_uom">
                  <el-input v-model="edit_form.second_law_uom" name="second_law_uom" :maxlength="255" />
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="td-01 text-right"><i class="rb">*</i>数量</td>
              <td class="td-1">
                <el-form-item prop="deal_num">
                  <el-input v-model="edit_form.deal_num" name="deal_num" />
                </el-form-item>
              </td>
              。。。。。。。。。。。。。。。。代码省略（和上面一样的表格）
            <tr>
              <td class="td-1" colspan="6">
                <el-button type="primary" size="mini" round style="width: 10%;margin-left: 50%;height: 16px;padding: 0px;text-align: center;" @click="saveBodyGoods">保存</el-button>
              </td>
            </tr>
            </tbody>
          </table>
        </el-form>
      </div>

设置表单初始化 和验证规则：

edit_form: {
                    id: '',
                    goods_seq_no: '1', 
                    putrec_seqno: '',
                    matnr_no: '', 
                    entry_goods_seqno: '',
                    codeTs: '', 
                    hs_v_code: '', 
                    goods_name: '', 
                    goods_model: '', 
                    deal_currency: '', 
                    deal_uom: '',
                    second_law_uom: '', 
                    deal_num: '', 
                    ................省略
                },
                edit_form_rule: {
                    matnr_no: { required: true, message: '商品订单号必填', trigger: 'change' },
                    hs_v_code: { required: true, message: '商品编号必填', trigger: ['blur', 'change'] },
                    order_name: { required: true, message: '商品名称必填', trigger: 'blur' },
                    order_model: { required: true, message: '订单型号必填', trigger: 'change' },
                    'change' }
                   ................省略
                },

最后设置样式：

<style>

  tbody {
    display: table-row-group;
    vertical-align: middle;
    border-color: inherit;
  }
  table {
    border-collapse: collapse;
  }
  table {
    border-spacing: 0;
    border-collapse: collapse;
  }

  table {
    border-collapse: separate;
    text-indent: initial;
    white-space: normal;
    line-height: normal;
    font-weight: normal;
    font-size: medium;
    font-style: normal;
    color: -internal-quirk-inherit;
    text-align: start;
    border-spacing: 2px;
    font-variant: normal;
  }
  body {
    font-size: 12px;
    font-family: Arial,Microsoft YaHei,SimSun;
    *font-family: Microsoft YaHei,Arial,SimSun;
    height: 100%;
    color: #080808;
  }
  body {
    font-family: "Microsoft YaHei","SimSun","open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    color: #333333;
    overflow-x: hidden;
  }
  body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    color: #333;
    background-color: #fff;
  }

  tr>td {
    font-size: 14px;
  }
  td, th {
    padding: 0;
  }
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  td {
    display: table-cell;
    vertical-align: inherit;
  }
  table {
    border-collapse: collapse;
  }
  table {
    border-spacing: 0;
    border-collapse: collapse;
  }

  html {
    -webkit-text-size-adjust: none;
    height: 100%;
    min-height: 100%;
  }
  html {
    font-size: 10px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  html {
    font-family: sans-serif;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
  }


  .rb {
    color: red;
    font-weight: bold;
    font-style: normal;
    margin-right: 5px;
  }
  .good-column {
    text-align: center;
  }

  .el-autocomplete-suggestion li.highlighted,
  .el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
    background-color: #c7d8f3;
  }
  .app-desk-form .el-form-item--medium .el-form-item__content{
    line-height: inherit;
  }
  .app-desk-form .el-input--medium .el-input__icon{
    line-height: inherit;
  }
  .app-desk-form .el-form-item__error{
    top: 5%;
    margin-top: -2px;
    z-index: 8;
    right: 0;
    left: auto;
    white-space: nowrap;
    color: #fff;
    padding: 4px 2px;
    background-color: #ff4949;
  }
  .app-desk-container .app-desk-form .non-empty input.el-input__inner, .app-desk-container .el-dialog__wrapper .non-empty input.el-input__inner {
    background: #FAFFBD;
  }
  .app-desk-container .app-desk-form .text-right {
    padding-right: 2px;
    text-align:right;
  }
  .app-desk-container .app-desk-form input.el-input__inner {
    height: 18px;
    line-height: 12px;
    outline: none;
    border: none;
    border-radius: 0px;
    padding: 0px 5px;
  }
  .app-desk-container .el-date-editor input.el-input__inner {
    padding-left: 30px;
  }
  .app-desk-container .app-desk-form input.el-input__inner:focus {
    border-bottom: 2px solid rgba(5, 121, 239, 0.99) !important
  }
  .app-desk-container .app-desk-form .el-select.non-empty .el-input input:read-only, .app-desk-container .el-dialog__wrapper .el-select.non-empty .el-input input:read-only {
    background-color: #FAFFBD !important;
  }
  .app-desk-container .app-desk-form .el-select.sIndex:not(.non-empty) .el-input input:read-only {
    background-color: #ffffff !important;
  }
  .app-desk-container .app-desk-form .el-input input:read-only, .app-desk-container .app-desk-form .el-select.sIndex .el-input input:disabled,
  .app-desk-container .app-desk-form .el-select.sIndex:not(.non-empty) .el-input input:disabled {
    background-color: #ddd !important;
  }
  .goods th,
  .goods td {
    padding: 0px;
  }
  .goods th {
    padding: 0px !important;
    font-size: 12px!important;
    color: white!important;
    text-align: left;
    background-color: #64A7EB!important;
    height: 22px!important;
  }
  .el-table__body tr.current-row>td {
    background-color: #d7f1f6;
  }
  .dialogHs .el-form-item--medium .el-form-item__label, .dialogHs .el-form-item--medium .el-form-item__content, .dialogHs .el-input--medium .el-input__inner {
    height: 24px;
    line-height: 16px;
  }

  .el-form-item--small .el-form-item__content {
    line-height: 24px;
  }

  .dialogHs .el-form-item__error{
    top: 50%;
    margin-top: -10px;
    z-index: 8;
    right: 10px;
    left: auto;
  }
  .dialogHs .el-form-item {
    margin-bottom: 10px
  }
</style>
<style lang="scss" scoped>
  .app-desk-container {
    padding: 10px;
    margin-bottom: 20px;
    table,
    td,
    .goods {
      font-size: 12px;
      border: 1px solid #c5c5c5;
      background: #fff;
    }
    .percent-100 {
      width: 100%;
      border-spacing: 0;
      border-collapse: collapse;
    }
    .goods {
      margin-top: 5px;
      padding-top: 10px;
      .title {
        padding-left: 10px;
        color: #69A7EB;
      }
      p{
        margin: 7px;
        height: 1px;
        background: #69A7EB;
      }
    }
    /*deep*/ .el-autocomplete{
               width: 100%;
             }
    /*deep*/ .app-desk-form .el-form-item{
               margin-bottom: 0px;
             }
  }
</style>