VUE在已有tableData列表里添加随机数

VUE在已有tableData列表里添加随机数

前言

开发时遇到一个要求，在一个人员管理列表里，可以查看该人员的获得的好评数，差评数以及关注数，但是由于后台传来的数据目前都是0，看着不好看，不适合拿去宣传，所以要把所有数字都换成随机的大于0的整数。

---

一、思路

首先生成0-100随机数的function是

Math.floor(Math.random() * 100) + 1；// 生成1到100的随机整数

接下来是把目光放到我们的table里，我们原本的table是这么写的, prop里都是后端传来的数据，我们要把好评差评以及关注数都替换成随机数，并且保证data1 和 data2的原数据不变。

<el-table
    :data="userList"
    border
    :header-cell-style="{background:'#CCCCCC',color:'black'}"
    style="width: 99%;margin: 0 auto"
  >
    <!--随便来点证明有其他数据-->
    <!--data1 data2都是从后端获得的-->
    <el-table-column
      width="80"
      prop="data1"
      :label="$t('Word')"
    >
    </el-table-column>
    <!--随便来点证明有其他数据-->
    <el-table-column
      width="80"
      prop="data2"
      :label="$t('Word')"
    >
    </el-table-column>
    <!--好评数 -->
    <el-table-column
      width="80"
      prop="acceptNum"
      :label="$t('Like')"
    >
    </el-table-column>
    <!--差评数 -->
    <el-table-column
      width="80"
      prop="badNum"
      :label="$t('Dislike')"
    >
    </el-table-column>
    <!--关注数 -->
    <el-table-column
      width="90"
      prop="subscribeNum"
      :label="$t('Follow')"
    >
    </el-table-column>
  </el-table>

那么其实我们只需要在原数据内添加数据，并且让我们的好评数等数据去读取新数据，现在我们就在原数据里加入新数据 column1, column2和column3
代码如下：

mounted() {
  // 在原有数据的基础上生成随机数填充其他列
  this.addRandomData();
},

methods: {
  addRandomData() {
    // 遍历现有数据，在每一行添加随机数列
    this.userList.forEach(row => {
      row.column1 = Math.floor(Math.random() * 100) + 1; // 生成1到100的随机整数
      row.column2 = Math.floor(Math.random() * 100) + 1;
      row.column3 = Math.floor(Math.random() * 100) + 1;
    });
  }
}

二、更改prop

接下来，就是让好评数从读取原数据改为新数据，prop改为对应的column1,column2,column3

<el-table
    :data="userList"
    border
    :header-cell-style="{background:'#CCCCCC',color:'black'}"
    style="width: 99%;margin: 0 auto"
  >
    <!--随便来点证明有其他数据-->
    <!--data1 data2都是从后端获得的-->
    <el-table-column
      width="80"
      prop="data1"
      :label="$t('Word')"
    >
    </el-table-column>
    <!--随便来点证明有其他数据-->
    <el-table-column
      width="80"
      prop="data2"
      :label="$t('Word')"
    >
    </el-table-column>
    <!--好评数 acceptNum-->
    <el-table-column
      width="80"
      prop="column1"
      :label="$t('Like')"
    >
    </el-table-column>
    <!--差评数 badNum-->
    <el-table-column
      width="80"
      prop="column2"
      :label="$t('Dislike')"
    >
    </el-table-column>
    <!--关注数 subscribeNum-->
    <el-table-column
      width="90"
      prop="column3"
      :label="$t('Follow')"
    >
    </el-table-column>
  </el-table>