table表格动态添加列，并根据行中某个字段值判断有几个输入框

定量项目有大项，小项。小项挂载大项下面即
根据表格中样本数判断检验小项中有几个样本，有几个样本则加几列样本列，内容为输入框，可输入数值，对数值进行判断是否符合规格标准，有几个不符合标准的不合格数为几。

代码实现

<el-table border
          stripe
          :data="dataItem.itemList"
          :height="300"
          @selection-change="handleSelectionChange">
  <el-table-column width="60"
                    label="序号"
                    align="center"
                    header-align="center"
                    type="index"> </el-table-column>
  <el-table-column v-for="(item, index) in tableHeaders"
                    :min-width="item.width ? item.width : 'auto'"
                    :key="item.code"
                    :label="item.name"
                    :prop="item.code"
                    header-align="center"
                    align="center"
                    :show-overflow-tooltip="true">
    <template slot-scope="scope">
      <!-- 必检 多选框 -->
      <el-checkbox v-model="scope.row[item.code]"
                    disabled
                    v-if="item.code === 'requiredFlag'"
                    true-label="Y"
                    false-label="N"></el-checkbox>
      <!-- 不合格数量 默认0 -->
      <el-input v-else-if="item.code === 'failQty'"
                placeholder=""
                v-model="scope.row[item.code]"
                @change="checkRs(scope.row,dataItem)"
                v-restrict="{ maxLength: 32, regExp: /^[0-9]\d*$/ }"
                disabled>
      </el-input>
      <!-- 判定 单选 根据不合格样本数，如果有一个样本数不合格则判定不合格 -->
      <el-radio-group v-else-if="item.code === 'checkRsType'"
                      v-model="scope.row[item.code]"
                      :disabled="isView||scope.row.lotFlag!=='Y'"
                      @change="checkPassFlag(scope.row,dataItem)">
        <el-radio label="PASS">OK</el-radio>
        <el-radio label="FAIL">NG</el-radio>
      </el-radio-group>
      <span v-else>{{scope.row[item.code]}}</span>
    </template>
  </el-table-column>
  <!-- 样本 -->
  <el-table-column v-for="(item, index) in dataItem.sampleTableHeaders"
                    :min-width="item.width ? item.width : 'auto'"
                    :key="item.code"
                    :label="item.name"
                    :prop="item.code"
                    header-align="center"
                    align="center"
                    :show-overflow-tooltip="true">
    <template slot-scope="scope">
      <el-input v-if="index<scope.row.sampleCnt"
                placeholder=""
                v-model="scope.row[item.code]"
                @change="checkSampleCnt(scope.row,index,dataItem,item.code)"
                v-restrict="{ maxLength: 32, regExp: /(^[0-9]*\.([0-9]{1}\d*)$)|(^[0-9]*$)/ }"
                :disabled="isView">
      </el-input>
      <span v-else>{{scope.row[item.code]}}</span>
    </template>
  </el-table-column>
</el-table>

export default {
	name: 'quantitative',
	props: {},
	data () {
		return {
		dataInfo: [],
	      tableHeaders: [
	        { name: '项目编号', code: 'itemCode', width: '140' },
	        { name: '检验项目', code: 'itemName', width: '140' },
	        { name: '必检', code: 'requiredFlag', width: '80' },
	        { name: '规格标准', code: 'checkRsDesc', width: '120' },
	        { name: '单位', code: 'valUnit', width: '100' },
	        { name: '样本数', code: 'sampleCnt', width: '100' },
	        { name: '不合格数', code: 'failQty', width: '100' },
	        { name: '判定', code: 'checkRsType', width: '140' },
	      ],
	      sampleTableHeaders: [],
		}
	},
	methods: {
		// 样本数 表格根据样本数动态添加列
		handleTable () {
			this.quantitativeData.forEach(q => {
			  if (q.itemList) {
			    this.sampleTableHeaders = []
			    let arr = q.itemList.map(i => i.sampleCnt)
			    let max = Math.max(...arr)
			    q.max = max
			    for (let i = 1; i <= max; i++) {
			      let p = 0
			      i < 10 ? p = '0' + i : p = i
			      this.sampleTableHeaders.push(
			        { name: '样本' + i, code: 'data' + p }
			      )
			    }
			    q.sampleTableHeaders = this.sampleTableHeaders
			    this.$forceUpdate()
			    // console.log(q);
			  }
			})
		},
	},
}

最开始想的是操作加完列之后获取新加列的dom节点，判断是否是输入框，直接操作dom元素硬加输入框，后来实现起来非常麻烦，获取就有点问题。最后直接利用封装的框架，简单易操作。
尽量少直接操作dom元素，vue本来就是封装好的，多利用框架