vue+element表格的左右布局及动态添加行

一般我们实现表格，直接使用element中的table组件，现在有个原型图是，类似表头左边，本来在纠结要写元生的表格了，最后突然想到把它当成form表单，直接样式实现表格效果
效果如图：

我这里还有一个动态的添加行，我只做了这一个的动态添加的必填检验。
下面展示一些 内联代码片。

 <el-form  ref="form" :model="form" label-position="left" label-width="240px" :hide-required-asterisk="true">
   <el-form-item label="法人公司名称：">
     <span>{
    
    {
    
    form.corporation}}</span>
   </el-form-item>
   <el-form-item label="地产项目名称：">
     <span>{
    
    {
    
    form.corporation}}</span>
   </el-form-item>
   <el-form-item :label="`清算单位${index + 1}名称：`" :prop="'liquidationCompany[' +index + ']'" v-for="(item,index) in form.liquidationCompany " :key="index" :rules="rules.liquidationCompany">
     <el-input v-model="form.liquidationCompany[index]"  placeholder="请填写清算单位名称" style="width: calc(100% - 280px)"></el-input>
     <div style="display: inline-block;width:280px; text-align: center">
       <el-button type="primary" @click="form.liquidationCompany.push('')">添加行</el-button>
       <el-button type="primary" @click="form.liquidationCompany.splice(index, 1)" :disabled="index === 0">删除行</el-button>
     </div>
   </el-form-item>
   <el-form-item label="清算政策依据：" prop="liquidationPolicy">
     <el-input v-model="form.liquidationPolicy"  placeholder="请填写项目所在地适用的政策文件号"></el-input>
   </el-form-item>
   <el-form-item label="清算单位划分的规定：" prop="liquidationDivide ">
     <el-input v-model="form.liquidationDivide " placeholder="说明政策层面的规定，若实际清算未按政策执行，请补充说明具体实操口径的作法"></el-input>
   </el-form-item>
   <el-form-item label="同一个清算单位内具体是几分法：" prop="liquidationMethod " >
     <el-select v-model="form.liquidationMethod " placeholder="请选择" style="width: 100%">
       <el-option label="区域一" value="shanghai"></el-option>
       <el-option label="区域二" value="beijing"></el-option>
     </el-select>
   </el-form-item>
   <el-form-item label="土地款和建安成本分摊规定：" prop="costAllocation" >
     <el-input v-model="form.costAllocation" placeholder="说明政策层面的规定，若实际清算未按政策执行，请补充说明具体实操口径的作法"></el-input>
   </el-form-item>
   <el-form-item label="地下车位清算政策：" prop="parkingPolicy">
     <el-input v-model="form.parkingPolicy" placeholder="说明政策层面的规定，若实际清算未按政策执行，请补充说明具体实操口径的作法"></el-input>
   </el-form-item>
   <el-form-item label="公配政策：" prop="publicPolicy ">
     <el-input v-model="form.publicPolicy " placeholder="说明政策层面的规定，若实际清算未按政策执行，请补充说明具体实操口径的作法"></el-input>
   </el-form-item>
   <el-form-item label="其他描述事项：" prop="otherDescription ">
     <el-input v-model="form.otherDescription " placeholder="如配建房处理等需要单独说明或改项目的特殊事项"></el-input>
   </el-form-item>
 </el-form>

定义的form对象和检验的rules：

 form: {
    
    
   corporation: '娃哈哈企业有限公司',
   estateName: '娃哈哈企业有限公司',
   liquidationCompany:[''], // 动态添加的行是一个数组
   liquidationPolicy: '',
   liquidationDivide: '',
   liquidationMethod: '',
   costAllocation: '',
   parkingPolicy: '',
   publicPolicy: '',
   otherDescription: ''
 }
  rules:{
    
    
	 liquidationCompany: [ {
    
     required: true, message: '请选择活动区域', trigger: 'blur' } ]
  },

上面其实也就是一个form表单，主要是下面的css样式实现了表格的效果：

.el-form{
    
    
 border: 1px solid #E4E7ED;
 border-radius: 4px;
  /deep/ .el-form-item{
    
    
    border-bottom: 1px solid #E4E7ED;
    margin-bottom: 0px;
    &:last-child{
    
    
      border-bottom: none;
    }
    .el-form-item__label{
    
    
      border-right: 1px solid #E4E7ED;
      padding: 12px 0 12px 20px;
    }
    .el-form-item__content{
    
    
      padding: 8px 0px  0px;
      >*{
    
    
        padding: 0 20px;
      }
      .el-form-item__error{
    
    
        top: 42px
      }
    }
    .el-input__inner{
    
    
      margin-bottom:0px;
    }
  }
}