vue 基础参数增加多语言配置

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] = tempData
          return
        }
      }
    },
    addRow (index) {
      this.tableData[index].push({
        type: "",
        value: "",
        color: "",
      })
    },
    checkLanguageJSON () {
      var tempMap = []
      var that = this
      var isOk = true;
      testLoop:
      for (var key in this.tableData) {
        var tempMap = {}
        for (var index in this.tableData[key]) {
          var tempType = this.tableData[key][index].type
          if (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_type
      var 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)
    },