vue2 el-form 自定义列名 动态增减列 导出为json

vue2 el-form 自定义列名 动态增减列 导出为json

最近接到个紧急需求，要描述设备的规格，字段又没定下来，又不希望用户乱来。
于是自然就想到了前端自己加减列，并以json形式保存。
网上找了一些资料，要么没有自定义列名，要么增减的时候渲染没刷新。于是自己倒腾了一下。
本人苦逼后端crud工程师，前端技术水平为复制粘贴级别。本次是临时需求，目前用着没遇到问题，后面没有再维护，仅供参考。

代码

最终结果是放在form.specs里面的。
自定义行的数据在form.specFields里面。

表单部分：

      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      	<!--动态生成-->
        <el-form-item label="资源规格" prop="specs">
          <i class="el-icon-circle-plus-outline" @click="handleAddSpec" style="color: blue"></i>
        </el-form-item>
        <el-row v-for="(item,index) in form.specFields" :key="index">
          <el-form-item>
            <span slot="label"><i class="el-icon-delete" @click="handleDeleteSpec(item, index)" style="color: red"></i></span>
            <el-col :span="8">
              <el-form-item
                label="规格名"
                :prop="'specFields.'+index+'.specKey'"
                :rules="{
                      required: true, message: '规格名不能为空', trigger: 'blur'}">
                <el-input v-model="item.specKey" palceholder="请输入规格名">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="值"
                :prop="'specFields.'+index+'.specValue'"
                :rules="{
                      required: true, message: '值不能为空', trigger: 'blur'}">
                <el-input v-model="item.specValue" palceholder="请输入规格值位">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="单位"
                :prop="'specFields.'+index+'.specUnit'"
                :rules="{
                      required: true, message: '单位不能为空', trigger: 'blur'}">
                <el-input v-model="item.specUnit" palceholder="请输入规格单位">
                </el-input>
              </el-form-item>
            </el-col>
          </el-form-item>
        </el-row>
      </el-form>

export default {
  data() {
    return {
      // 表单参数
      form: {
      	spec: null,
        specFields: [],
      },
    };
  },
  methods: {
    // 表单重置
    reset() {
      this.form = {
        specs: null,
        specFields: [],
      };
      this.resetForm("form");
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      // TODO
        response.data.specFields = JSON.parse(response.data.specs);
        this.form = response.data;
      // TODO
    },
    submitForm() {
      this.form.specs = JSON.stringify(this.form.specFields);
      this.$refs["form"].validate(valid => {
        //TODO
      });
    },
    /* 添加自定义属性 */
    handleAddSpec(){
      let obj = {};
      obj.specKey = "";
      obj.specValue = "";
      obj.specUnit = "";
      this.form.specFields.push(obj);
    },
    /** 删除自定义属性 */
    handleDeleteSpec(item,index) {
      this.form.specFields.splice(index, 1)
    },
  }
};

顺便，el-table中将json格式化显示

      <el-table-column label="规格" align="center" prop="specs" >
        <template slot-scope="scope">
          <span v-html="formatSpecs(scope.row.specs)"></span>
        </template>
      </el-table-column>

    formatSpecs(specs) {
      let specsString= '';
      let specsArr = [];
      specsArr = JSON.parse(specs);
      specsArr.forEach(item => {
        specsString+=item.specKey+":"+item.specValue+"("+item.specUnit+")"+"<br>";
      });
      return specsString.slice(0, -4);
    }