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);
}