preface

[bug Mc-86668] – Rendering errors occur when adding arrays dynamically, num is not the same in the page and array, causing problems in the demo, clicking the plus sign in the first few columns twice in a row will cause problems. Render 3 and 3 instead of 2 and 3 as shown below

code

<template>
  <div class="con">
    <div>

      <el-table :data="tableData"
                border
                style="width: 100%">

        <el-table-column v-for="(item,index) in tableHeader"
                         :key="item.tripIndex"
                         :prop="'prop'+item.tripIndex"
                         width="100"
                         align="center">
          <template slot="header"
                    slot-scope="scope">
            <div>
              <i @click="addHeade(item.tripIndex)"
                 class="el-icon-circle-plus-outline myIcon operateLine-item"></i>
              <i @click="subHeade(item.tripIndex)"
                 class="el-icon-remove-outline myIcon"></i>
            </div>
            {{`${item.tripIndex}  ${getMain(item)}  `}}

          </template>

          <template slot-scope="scope">
            {{ getName(scope.row,item.tripIndex)}}

          </template>

        </el-table-column>

      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  name: "add".components: {},
  data() {
    return {
      isShow: true.tableHeader: [{tripIndex: 1}, {tripIndex: 2}, {tripIndex: 3}, {tripIndex: 4],},tableData: [{prop1: { name: "Zhang" },
          prop2: { name: "Bill" },
          prop3: { name: "Fifty" },
          prop4: { name: "Daisy"}, {},prop1: { name: "Chen Jia" },
          prop2: { name: "WuYi" },
          prop3: { name: "C" },
          prop4: { name: "Wang Ding"}},]}; },mounted() {},
  methods: {
    getMain(v) {
      if (v.tripIndex % 2= =0) {
        return "Deputy station";
      } else {
        return "Host"; }},addHeade(v) {
      this.isShow = false;

      // add one to the header
      this.tableHeader.forEach((element) = > {
        if (element.tripIndex > v) {
          element.tripIndex += 1; }});for (let index = this.tableHeader.length; index == 0; index--) {
        if (this.tableHeader[index].tripIndex > v) {
          this.tableHeader[index].tripIndex += 1; }}// Insert the header
      let i;
      let addItem = {
        tripIndex: v + 1};for (let index = 0; index < this.tableHeader.length; index++) {
        const element = this.tableHeader[index];
        if(element.tripIndex == v) { i = index; }}// this.tableHeader.splice(i + 1, 0, addItem);

      for (let index = 0; index < this.tableData.length; index++) {
        for (var key in this.tableData[index]) {
          if (key.indexOf("prop") != -1) {
            let num = "odd" + key.substring(4);
            this.tableData[index][num] = this.tableData[index][key]; }}}for (let index = 0; index < this.tableData.length; index++) {
        for (var key in this.tableData[index]) {
          // After the face value is moved back
          if (key.substring(4) > v && key.indexOf("prop") != -1) {
            let num = "prop" + (parseInt(key.substring(4)) + 1);
            let now = "odd" + key.substring(4);
            this.tableData[index][num] = this.tableData[index][now];
          }
          // The new value is null
          if (key.substring(4) == v && key.indexOf("prop") != -1) {
            let num = "prop" + (parseInt(key.substring(4)) + 1);
            this.tableData[index][num] = {}; }}}console.log(this.tableData);

      this.$nextTick(() = > {
        this.isShow = true;
      });
    },
    subHeade(v) {
      this.isShow = false;
      let i;
      for (let index = 0; index < this.tableHeader.length; index++) {
        const element = this.tableHeader[index];
        if(element.tripIndex == v) { i = index; }}this.tableHeader.splice(i, 1);

      this.tableHeader.forEach((element) = > {
        if (element.tripIndex > v) {
          element.tripIndex -= 1; }});for (let index = 0; index < this.tableData.length; index++) {
        for (var key in this.tableData[index]) {
          if (key.indexOf("prop") != -1) {
            let num = "odd" + key.substring(4);
            this.tableData[index][num] = this.tableData[index][key]; }}}for (let index = 0; index < this.tableData.length; index++) {
        for (var key in this.tableData[index]) {
          // Back face value moves forward
          if (key.substring(4) > v && key.indexOf("prop") != -1) {
            let num = "prop" + (parseInt(key.substring(4)) - 1);
            let now = "odd" + parseInt(key.substring(4));
            this.tableData[index][num] = this.tableData[index][now];
          }
          // Delete the last item
          let last =
            "prop" +
            (this.tableHeader[this.tableHeader.length - 1].tripIndex + 1);

          delete this.tableData[index][last]; }}console.log(this.tableData);
      this.$nextTick(() = > {
        this.isShow = true;
      });
    },
    getName(v, x) {
      let p = "prop" + x;
      returnv[p]; }},created(){}};</script>


Copy the code

subsequent

Although using V-if to re-render the table solved the problem, but do not know why, if you understand and happen to see this article, please kindly advise. Thank you very much