【vue + elementUI】表格内输入框校验 + 动态显示表格头

表格校验

1. 配置需要校验的表格字段（例如：需求需要校验运费不能为空）
   ❗请注意这里需要对表格及表格内字段做校验

data() {
	return {
	  form: {
	    // 计价方式 0：按件数 1：按重量
	    pricingMethod: '0',
	    detailList: [],
	   },
	   rules: {
        pricingMethod: [{ required: true, message: '请选择计价方式', trigger: ['blur', 'change'] }],
        detailList: [{ required: true, message: '请添加配送区域及运费', trigger: ['blur', 'change'] }],
        firstPiece: [{ required: true, message: '请添加配送运费', trigger: ['blur', 'change'] }],
        firstPieceFreight: [{ required: true, message: '请添加配送运费', trigger: ['blur', 'change'] }]
      },
	}
}

2. el-table表格和el-form结合
   表格外需要套上一层el-form，在需要校验的表格列输入框使用el-form-item单独校验
   ❗表格data：:data="form.detailList"
   ❗需要校验的表格列prop：:prop="'detailList.' + $index + '.firstPiece'"
   ❗需要校验的表格列要单独设置rules：:rules="rules['firstPiece']"

<el-form ref="form" class="" :model="form" :rules="rules" label-width="100px!important">
	<el-form-item label="配送区域及运费" prop="detailList">
		<el-table v-loading="loading" :data="form.detailList" 
				  height="250px" class="el-table--scrollable-y">
			<!-- 首件-->
	         <el-table-column prop="firstPiece" label="首件（个）">
	           <template slot-scope=" { row, $index }">
	             <el-form-item :prop="'detailList.' + $index + '.firstPiece'" :rules="rules['firstPiece']">
	               <el-input-number v-model="row.firstPiece" placeholder="请输入" :min="0" :precision="item.precision" :controls="false"
	                                oninput="value=value.replace(/[^0-9.]/g,'')" style="width: 100%"></el-input-number>
	             </el-form-item>
	           </template>
	         </el-table-column>
		</el-table>
	</el-form-item>
</el-form>

动态显示表格头

1. 配置动态表格头数据

data() {
	return {
		firstTableColumns: [
		    {
		      label: '首件（个）',
		      type: '0',
		      precision: 0,
		      prop: 'firstPiece'
		    },
		    {
		      label: '首重（kg）',
		      type: '1',
		      precision: 2,
		      prop: 'firstWeight'
		    }
	  	]
	}
},
computed: {
	bindFirstTableColumns() {
	  return this.firstTableColumns.filter(el => el.type == this.form.pricingMethod)
	}
}

2. 表格内使用
   ❗本需求切换方式后 后端需要的字段为同一个，故prop为固定字段。
   ❗如果后端所需字段不同请使用按 1 配置动态prop字段，在表格列el-table-column上使用：:prop='item.prop'。如果当前动态列结合上方的输入框校验，
   • 输入框el-form-item的prop需要动态传入：:prop="'detailList.' + $index + '.' + item.prop"
   • 输入框el-form-item的rules需要动态传入：:rules="rules[item.prop]"，同时在rules里需要配置字段所需校验
   • 其他配置以此类推

<el-form ref="form" class="" :model="form" :rules="rules" label-width="100px!important">
	<el-form-item label="计价方式" prop="pricingMethod">
	  <el-radio-group v-model="form.pricingMethod">
	    <el-radio label="0">按件数</el-radio>
	    <el-radio label="1">按重量</el-radio>
	  </el-radio-group>
	</el-form-item>
	<el-form-item label="配送区域及运费" prop="detailList">
		<el-table v-loading="loading" :data="form.detailList" 
				  height="250px" class="el-table--scrollable-y">
			<!-- 首件-->
	         <el-table-column v-for="(item, index) in bindFirstTableColumns" 
         					  :key="'first' + index" prop="firstPiece" :label="item.label">
	           <template slot-scope=" { row, $index }">
	             <el-form-item :prop="'detailList.' + $index + '.firstPiece'" :rules="rules['firstPiece']">
	               <el-input-number v-model="row.firstPiece" placeholder="请输入" 
	               					:min="0" :precision="item.precision" :controls="false"
	                                oninput="value=value.replace(/[^0-9.]/g,'')" style="width: 100%">
                   	</el-input-number>
	             </el-form-item>
	           </template>
	         </el-table-column>
		</el-table>
	</el-form-item>
</el-form>

代码

<el-form ref="form" class="" :model="form" :rules="rules" label-width="100px!important">
...
	<el-form-item label="计价方式" prop="pricingMethod">
	  <el-radio-group v-model="form.pricingMethod">
	    <el-radio label="0">按件数</el-radio>
	    <el-radio label="1">按重量</el-radio>
	  </el-radio-group>
	</el-form-item>
	<el-form-item label="配送区域及运费" prop="detailList">
	    <el-table v-loading="loading" :data="form.detailList" height="250px">
	      <el-table-column label="可配送区域" prop="provinceName">
	        <template slot-scope=" { row }">
	          <div>{{row.provinceName}}</div>
	          <i class="el-icon-edit-outline" @click="handleClickSpecifyArea(row)"></i>
	        </template>
	      </el-table-column>
	      <!-- 首件-->
	      <el-table-column v-for="(item, index) in bindFirstTableColumns" :key="'first' + index" prop="firstPiece" :label="item.label">
	        <template slot-scope=" { row, $index }">
	          <el-form-item :prop="'detailList.' + $index + '.firstPiece'" :rules="rules['firstPiece']">
	            <el-input-number v-model="row.firstPiece" placeholder="请输入" :min="0" :precision="item.precision" :controls="false"
	                             oninput="value=value.replace(/[^0-9.]/g,'')" style="width: 100%"></el-input-number>
	          </el-form-item>
	        </template>
	      </el-table-column>
	      <el-table-column label="运费（元）" prop="firstPieceFreight">
	        <template slot-scope=" { row, $index }">
	          <el-form-item :prop="'detailList.' + $index + '.firstPieceFreight'" :rules="rules['firstPieceFreight']">
	            <el-input-number v-model="row.firstPieceFreight" placeholder="请输入" :precision="2" :controls="false"
	                             oninput="value=value.replace(/[^0-9.]/g,'')" style="width: 100%"></el-input-number>
	          </el-form-item>
	        </template>
	      </el-table-column>
...
	      <el-table-column label="操作">
	        <template slot-scope=" { row }">
	          <el-button type="text" @click.stop="handleDelete(row)">删除</el-button>
	        </template>
	      </el-table-column>
	    </el-table>
	</el-form-item>
</el-form>

data() {
	return {
	  form: {
	    // 计价方式 0：按件数 1：按重量
	    pricingMethod: '0',
	    detailList: [],
	  },
	  rules: {
	    pricingMethod: [{ required: true, message: '请选择计价方式', trigger: ['blur', 'change'] }],
	    detailList: [{ required: true, message: '请添加配送区域及运费', trigger: ['blur', 'change'] }],
	    firstPiece: [{ required: true, message: '请添加配送运费', trigger: ['blur', 'change'] }],
	    firstPieceFreight: [{ required: true, message: '请添加配送运费', trigger: ['blur', 'change'] }]
	  },
	  firstTableColumns: [
	    {
	      label: '首件（个）',
	      type: '0',
	      precision: 0
	    },
	    {
	      label: '首重（kg）',
	      type: '1',
	      precision: 2
	    }
	  ]
	}
},
computed: {
	bindFirstTableColumns() {
	  return this.firstTableColumns.filter(el => el.type == this.form.pricingMethod)
	}
}

附图