vue v-for 数据增加页面不刷新

javascript 复制代码
          <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 可以解决

javascript 复制代码
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)
    },
相关推荐
anew___几秒前
《从零手写操作系统 (29):管道与重定向进阶——命名管道、Here Document与Shell语法扩展》
java·开发语言·前端·javascript·网络
前端snow23 分钟前
ai agent --- 概念串烧
前端
a努力。30 分钟前
Context-State-Memory三重信息架构揭秘
java·服务器·前端
颜进强1 小时前
23 · NestJs ModuleRef 模块引用:容器递给你的"取货窗口",四个 API 四种语义
前端·后端·ai编程
码林鼠1 小时前
dart语言教学
前端
光影少年1 小时前
如果 React 组件的属性没有传值,它的默认值是什么?
前端·javascript·react.js
风骏时光牛马1 小时前
AI_Coding:智能代码生成与工程实践
前端
颜进强1 小时前
22 · NestJs InjectionScopes 注入作用域:默认单例不是偷懒,是最优——以及何时才该打破
前端·后端·ai编程
liangshanbo12152 小时前
Web Worker 在 AI 前端应用中有什么具体使用场景?
前端·人工智能
Q26433650232 小时前
【有源码】基于Spring Boot和Vue的在线考试与交流系统-教育信息化背景下在线考试与交流一体化平台
java·vue.js·spring boot·mysql·spring·毕业设计·课程设计