<div style="float:left;border:1px solid red;height:100px;width:600px;">
<el-form-item label="多语言配置" style="width:700px;" prop="validTanleHead">
<el-input style="width: 180px" placeholder="请填写语言类型" v-model="lange_type" />
<el-button class="filter-item" style="margin-left:0px;" type="primary" size="mini" @click="addLangeType()">添加语言类型</el-button>
<br />
<span></span>
<div v-for="(item, index) in tableData">
<!-- {{item}} -->
{{index}} <el-button class="filter-item" style="margin-top:10px;" type="primary" size="mini" @click="addRow(index)">添加</el-button>
<el-table :data="item" :key="index" style="width: 100%" border fit highlight-current-row>
<el-table-column prop="type" label="type" width="150">
<template slot-scope="scope">
<el-input class="tabletext" v-model="scope.row.type" size="mini" autosize />
</template>
</el-table-column>
<el-table-column prop="value" label="value" width="150">
<template slot-scope="scope">
<el-input class="tabletext" v-model="scope.row.value" size="mini" autosize />
</template>
</el-table-column>
<el-table-column prop="color" label="color" width="150">
<template slot-scope="scope">
<el-input class="tabletext" v-model="scope.row.color" size="mini" autosize />
</template>
</el-table-column>
<el-table-column prop="color" width="80">
<template slot-scope="scope">
<el-button size="mini" type="danger" @click="DeleteRow(scope.row,index)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</el-form-item>
</div>
使用 Object.assign 可以解决
addLangeType () {
if (this.lange_type == "") {
this.$message.error("请填写语言类型");
return
}
//console.log("添加语言类型")
// key就是数组的下标
for (var key in this.tableData) {
console.log(key);
if (key == this.lange_type) {
this.$message.error("语言类型已存在,请勿重复添加!");
return
}
// console.log(this.tableData[key]);
}
var lange_type = this.lange_type
var tempData = {
[lange_type]: [{
type: "",
value: "",
color: "",
}]
};
this.tableData = Object.assign({}, this.tableData, tempData)
},