当前位置: 首页 > article >正文

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

          <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 可以解决

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)
    },


http://www.kler.cn/a/463265.html

相关文章:

  • 云从科技Java面试题及参考答案
  • 电子应用设计方案85:智能 AI门前柜系统设计
  • 【paddle】初次尝试
  • 树莓派 Pico RP2040 教程点灯 双核编程案例
  • 在 macOS 上,你可以使用系统自带的 终端(Terminal) 工具,通过 SSH 协议远程连接服务器
  • 【51单片机零基础-chapter6:LCD1602调试工具】
  • EasyExcel自定义动态下拉框(附加业务对象转换功能)
  • chatglm3如何进行微调
  • 在pytest钩子函数中判断Android和iOS设备(方法二)
  • libmodbus主机通信主要函数分析
  • 2021年国家公考《申论》题(地市级)
  • [工业 4.0] 机器学习如何推动智能制造升级
  • 【从零开始入门unity游戏开发之——C#篇40】C#特性(Attributes)和自定义特性
  • HarmonyOS Next ArkUI ListListItem笔记
  • 【SQL server】教材数据库(5)
  • github
  • 在 Alpine Linux 下通过 Docker 部署 Nginx 服务器
  • 【Pytorch实用教程】深入了解 torchvision.models.resnet18 新旧版本的区别
  • 智能边缘计算×软硬件一体化:开启全场景效能革命新征程(独立开发者作品)
  • 【置顶】测试学习笔记整理
  • SUBSTRING_INDEX()在MySQL中的用法
  • Vue 3.0 中 template 多个根元素警告问题
  • springboot522基于Spring Boot的律师事务所案件管理系统的设计与开发(论文+源码)_kaic
  • BGP(Border Gateway Protocol,边界网关协议)
  • 改进爬山算法之五:自适应爬山法(Adaptive Hill Climbing,AHC)
  • c#String和StringBuilder