vue：tabel和form 分别动态生成 列 与 文本框

需求：在页面上将动态的元素种类(在配置中获取)展示在表格中，并且在对应的增加修改表单中有对应的文本框用于填写对应元素
组件：vue + elementUI

前端代码
1.表格展示部分
没注释的是动态的，注释的是静态的

    <el-table-column  min-width="87"  v-for="items in spectraElementList" :key="items.dictValue" 
          :label="items.dictLabel" align="center" show-overflow-tooltip>
      <template slot-scope="scopes">
        <span>{{  getDataName(scopes.row,items)  }}</span>			//getDataName()只是将文字格式转换了一下
      </template>
    </el-table-column>

    <!-- <el-table-column prop="C" label="C" align="center" show-overflow-tooltip></el-table-column>
    <el-table-column prop="SI" label="Si" align="center" show-overflow-tooltip></el-table-column>
    <el-table-column prop="MN" label="Mn" align="center" show-overflow-tooltip></el-table-column>
    <el-table-column prop="S" label="S" align="center" show-overflow-tooltip></el-table-column>
    <el-table-column prop="P" label="P" align="center" show-overflow-tooltip></el-table-column>
    <el-table-column prop="CR" label="Cr" align="center" show-overflow-tooltip></el-table-column>
    <el-table-column prop="MO" label="Mo" align="center" show-overflow-tooltip></el-table-column>
    <el-table-column prop="CU" label="Cu" align="center" show-overflow-tooltip></el-table-column>
    <el-table-column prop="NI" label="Ni" align="center" show-overflow-tooltip></el-table-column>
    <el-table-column prop="MG" label="Mg" align="center" show-overflow-tooltip></el-table-column>  -->

效果图

注：第1,2列以及最后一列是加了 fixed属性的固定列，固定列和动态列在一个表格中可能会引起问题——固定列在‘遮罩层’之上(在弹出表单的时候)，所以可以在的style加上z-index=1这个属性。漏光一样，就像这样：

  /deep/.el-table__fixed{
    z-index: 1!important;
  }

2.表单内文本框动态生成部分
未注释部分是动态生成的文本框群，注释的是静态的。

<template v-for=" (item, index) in spectraElementList" >
  <el-form-item :label="item.dictLabel" :prop="item.lowCase" :key="index"> 
     <el-input v-model="spectraForm[item['lowCase']]" :ref="getId(index)" :id="getId(index)" @click.native="inputClickEvent($event)" @blur="divBlur"  clearable>							     </el-input>
   </el-form-item>
</template>
        
        <!-- <el-form-item label="C" prop="c" > 
          <el-input v-model="spectraForm.c" ref="cInspectra" id="cInspectra" @click.native="inputClickEvent($event)" @blur="divBlur"  clearable></el-input>
        </el-form-item>
        <el-form-item label="Si" prop="si" >
          <el-input v-model="spectraForm.si" ref="siInspectra" id="siInspectra" @click.native="inputClickEvent($event)" @blur="divBlur"  clearable></el-input>
        </el-form-item> --!>

其中最重要的是绑定v-model的值。格式很重要。
其中 spectraElementList格式是这样的

[  {
    lowCase : 'c',
  },{
    lowCase : 'si',
  },]
  

效果图
其中元素种类取自于配置参数。