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)
    },
相关推荐
mmsx14 小时前
一个黑边 Bug 修了两版:自己算矩阵直接黑屏,借库重建只用了一行 setZoom
android·前端
丑过三八线14 小时前
001 -【FastAPI 入门教程】 FastAPI Helloword
前端·chrome·fastapi
weixin_BYSJ198714 小时前
springboot小区物业管理小程序---附源码45555
java·javascript·spring boot·python·django·flask·php
禁止摆烂_才浅14 小时前
Axios 高频面试题
前端·面试·axios
何时梦醒14 小时前
TypeScript 工具类型一篇讲透:Pick、Omit、Partial、Exclude、Record、ReturnType、keyof
前端·面试·typescript
用户21816970493014 小时前
Flutter (十九) Tabbar
前端
默_笙14 小时前
🍳 受控组件和非受控组件,我纠结了一整天,最后用"房东和租客"讲明白了
前端·javascript
缓冲中请稍后14 小时前
前端HTTP请求完全指南:从基础到LLM接口调用实战
前端·面试
半个落月14 小时前
React 受控组件与非受控组件详解:从输入框到表单校验
前端·react.js
BreezeJiang14 小时前
写了 display:flex,为什么三栏布局还没完成?
前端·css