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)
    },
相关推荐
FungLeo1 小时前
成为全栈·Vue 管理后台篇·Vue Router如何守住多角色后台边界
前端·javascript·vue.js·rbac·vue router·路由守卫·前端权限
FungLeo1 小时前
成为全栈·Vue 管理后台篇·分页只显示第一页:从接口total 定位到前端修复
前端·vue.js·状态模式·分页·naive ui·服务端分页·前端问题排查
ZhengEnCi2 小时前
苹果滑动为什么有「肉感」:橡皮筋越界阻尼与弹簧动画的物理原理
前端
Moment2 小时前
不会后期的我,发现了一个开源胶片神器😍😍😍
前端·后端·开源
L1mbo2 小时前
Lite模式 缓解微信开发者工具卡顿,附 uni-app 实践方案
前端·微信小程序
FungLeo2 小时前
成为全栈·Vue管理后台篇·仪表盘不是几张卡片:组合统计接口与角色视图
前端·javascript·vue.js·rbac·仪表盘·管理后台·tanstack query
程序员大阳2 小时前
HTML+CSS+JS对话式实战(7)-学生端活动报名功能开发
javascript·css·html·活动报名
ruanno_top2 小时前
可搜索的下拉框,键盘按不动:焦点进了下拉,事件还挂在触发器上
vue.js
SameX2 小时前
HarmonyOS 做桌面卡片 onAddForm 要同步返回但数据在数据库里的解法
前端
deli0072 小时前
手机夜景模式为什么要举 3 秒?8 帧 RAW 堆栈 SNR 实测
前端