js 对数组的增删改查
字段在数据库存储为nvarchar ,varchar存储波斯语会乱码
数组格式:
{"en": [{"type": "10","value": "Confirm","color": ""},{"type": "20","value": "Cancel","color": ""}],"cn": [{"type": "10","value": "确认","color": ""},{"type": "20","value": "取消","color": ""}]
}
<div style="float:left;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><!-- <el-button class="filter-item" style="margin-left:0px;" type="danger" size="mini" @click="deleteLangeType()">删除</el-button> --><!-- <el-button class="filter-item" style="margin-left:0px;" type="primary" size="mini" @click="checkLanguageJSON()">校验JSON</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-button class="filter-item" style="margin-top:10px;" type="danger" size="mini" @click="deleteLangeType(index)">删除 {{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="167"><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="166"><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="166"><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>
if (!this.checkLanguageJSON()) {//校验多语言JSON字符串return}
DeleteRow (row, index) {var tempData = this.tableData[index]for (var i = 0; i < tempData.length; i++) {if (tempData[i].type == row.type) {tempData.splice(i, 1)this.tableData[index] = tempDatareturn}}},addRow (index) {this.tableData[index].push({type: "",value: "",color: "",})},checkLanguageJSON () {var tempMap = []var that = thisvar isOk = true;testLoop:for (var key in this.tableData) {var tempMap = {}for (var index in this.tableData[key]) {var tempType = this.tableData[key][index].typeif (tempType == "") {this.$message.error("语言类型【" + key + "】 type 不能为空");isOk = false;break testLoop;}if (tempType == tempMap[tempType]) {that.$message.error("语言类型【" + key + "】 type:" + tempType + " 重复");isOk = false;break testLoop;}tempMap[tempType] = tempType}}return isOk;},addLangeType () {if (this.lange_type == "") {this.$message.error("请填写语言类型");return}// key就是数组的下标for (var key in this.tableData) {if (key == this.lange_type) {this.$message.error("语言类型已存在,请勿重复添加!");return}}var lange_type = this.lange_typevar tempData = {[lange_type]: [{type: "",value: "",color: "",}]};this.tableData = Object.assign({}, this.tableData, tempData)},deleteLangeType (index) {delete this.tableData[index]this.tableData = Object.assign({}, this.tableData)},