vuex中存历史数据 存数据标识 (比如平均值，给平均值做标识，其余同理)

 布局
   <el-row>
      <el-col :span="19" class="back"></el-col>
      <!-- 按钮 -->
      <el-col :span="5" class="back">
        <el-button type="danger" plain @click="revokeBut"
          >撤销当前操作</el-button
        >
        <el-button type="info" plain @click="resettingBut">重置</el-button>
        <el-button type="primary" plain @click="saveBut">保存</el-button>
        <el-button
          type="warning"
          plain
          @click="this.$router.push({ name: 'PgScene' })"
          >关闭</el-button
        >
      </el-col>
    </el-row>
	   <el-table :data="tableData" stripe border v-if="loading">
        <el-table-column
          :prop="indexer + ''"
          header
          v-for="(itemer, indexer) in titleValue"
          :key="indexer"
        >
          <template #header="{ column, $index }" v-if="loading">
            <el-menu
              mode="horizontal"
              :ellipsis="false"
              :popper-append-to-body="false"
              active-text-color="#303133"
              text-color="#303133"
            >
              <el-sub-menu index="0" style="display: block">
                <template #title>
                  <div>{{ itemer }}</div>
                </template>
                <el-sub-menu
                  :index="item.index + ''"
                  v-for="item in dropDown"
                  :key="item.index"
                >
                  <template #title>{{ item.name }}</template>
                  <template v-for="ite in item.children" :key="ite.index">
                    <template v-if="ite.children && ite.children.length">
                      <el-sub-menu :index="ite.index + ''">
                        <template #title>{{ ite.name }}</template>
                        <template v-if="ite.children && ite.children.length">
                          <el-menu-item
                            :index="i.index + ''"
                            v-for="i in ite.children"
                            :key="i.index"
                            @click="threeMenu(i.index, column, $index)"
                            >{{ i.name }}</el-menu-item
                          >
                        </template>
                      </el-sub-menu>
                    </template>
                  </template>
                </el-sub-menu>
              </el-sub-menu>
            </el-menu>
          </template>
        </el-table-column>
      </el-table>

<script>
import { processTab } from "@/services/processtable";
export default {
  name: "DataMiningProcessingtable",

  data() {
    return {
      //表格数据
      tableData: [],
      dropDown: [
        {
          index: "1",
          name: "当前列处理",
          children: [
            {
              index: "1-1",
              name: "缺失值处理",
              children: [{ index: "1-1-1", name: "均值代替缺失值" }],
            },
          ],
        },
        {
          index: "2",
          name: "全局处理",
          children: [
            {
              index: "2-1",
              name: "缺失值处理",
              children: [{ index: "2-1-1", name: "均值代替缺失值" }],
            },
          ],
        },
      ],
      titleValue: [],
      averageValue: [], //平均值
      inputFlagCont: false, //重命名切换显示隐藏
      loading: false,//因为节点太多加个延迟加载 使其加载速度变快
      averageObj: [],
    };
  },

  created() {
    this.proceTable(this.$route.query.id); //接收传递的id
  },
  watch: {
    "$route.query"(newVal, oldVal) {//监听传递到id
      if (newVal) {
        this.proceTable(this.$route.query.id);
      }
    },
  },
  methods: {
    //获取表格数据内容
    async proceTable(id) {
      this.loading = false;
      let res = await processTab(id);
      if (res?.respCode == 200) {
        this.titleValue = res.respData.colList; //标题
        // console.log(this.titleValue);
        const len = this.$store.state.historys.length;
        if (len > 0) {
          this.tableData = this.$store.state.historys[len - 1].list; //内容
        } else {
          this.tableData = res.respData.dataList; //内容
        }
        this.Total = this.tableData.length; //条数
        // console.log(this.tableData);
        this.averageValue = res.respData.average; //平均值
        // console.log(this.averageValue);
      }
      this.$store.commit(
        "setTableData",
        JSON.parse(JSON.stringify(this.tableData))//存一下最开始的表格数据
      );
      this.loading = true;
    },
    //  点击出状态弹窗 3级
    threeMenu(i, column, index) {
      let addin = i.slice(0, 1);
      const objs = {
        list: [], //这个是就是原来的historys数组
        property: [], //这个就是的标记（单列前缀avg 加哪一列，例如 avg1为：分数列，avg2为：不知道啥列），如果是全局就agm
        // propertyArr: [], //这个这列的平均数 (单列数组只有一个值，全局是所有列的值)
      };
      if (addin == 1) {
        //进行undefined放平均值
        for (let item of this.tableData) {
          if (item[column.property] == null) {
            item[column.property] = this.averageValue[column.property];
            objs.property.push(column.property, "avg");//求得是单列的数据存放标识
            // objs.propertyArr.push(this.averageValue[column.property]);
            if ((item[column.property] = this.averageValue[column.property])) {
              this.$message.success("已求出平均值");
            } else {
              this.$message.error("未求出平均值");
            }
          }
        }
      }
      if (addin == 2) {
        this.tableData.forEach((item) => {
          //循环数组中每一项
          for (let [itemer] of this.titleValue.entries()) {
            if (item[itemer] == null) {
              item[itemer] = this.averageValue[itemer];
              // objs.propertyArr.push(this.averageValue[itemer]);
              let arr = [];
              arr.push(-1, `avg`);
              objs.property = arr;//求得是所有列的平均值 存到标识
            }
          }
        });
      }
      objs.list = JSON.parse(JSON.stringify(this.tableData)); //存历史表格数据
      this.$store.commit("avergehisd", objs);//在每执行一次的求平均值 进行存储
    },
    //撤销
    revokeBut() {//调用vuex中的方法
      this.$store.dispatch("setAverageDel").then((res) => {
        this.tableData = JSON.parse(JSON.stringify(res));
      }); //调用撤销方法
    },
    //重置
    resettingBut() {//调用vuex中的方法
      this.$store.dispatch("reseAverageDel").then((res) => {
        this.tableData = JSON.parse(JSON.stringify(res));//让现在的表格数据 等于操作的历史数据
      }); //调用撤销方法
    },
    //保存
    saveBut() {},
  },
};
</script>

<script>
//这里面是vuex 加script 是为了突显格式
import Vuex from 'vuex'
//引入router
import router from '@/router/index'
//使用vuex进行持久化
import persistedState from 'vuex-persistedstate'

export default new Vuex.Store({
    state: {
        tableData: [],//存表格数据
        historys: [],//存撤销历史后的平均值    这边是开始定义的数据
        avg: [],//存avg
    },
    mutations: {
        //更新历史
        avergehisd(state, data) {
            state.historys.push(data) //存历史
            const avg = []
            for (const item of state.historys) {
                avg.push(item.property)
            }
            state.avg = avg//存标识
        },
        //更新avg历史
        avergeavgd(state, data) {
            state.avg.push(data) // 将当前状态存入历史记录
        },
        //撤销avg历史
        avergeavgdel(state, data) {
            state.avg = data // 将当前avg状态存入历史记录
        },
        //撤销平均值
        averageDel(state, data) {
            state.historys = data//等于当前的记录
        },
        //存表格数据
        setTableData(state, data) {
            state.tableData = JSON.parse(JSON.stringify(data))//要保证之前的数据不变
        },
    },
    getters: {},
    actions: {
        //撤销
        setAverageDel({ commit }, data) {
            return new Promise((resolve) => {
                // 数组 【a,b,c】
                // 【a】只要一项就返回源数据tableData,
                // [a,b] 长度大于1就执行以下方法
                if (this.state.historys.length > 1) {
                    this.state.historys.pop()  //删除最后一项返回 最后一项【c】
                    this.state.avg.pop()
                    const len = this.state.historys.length
                    resolve(this.state.historys[len - 1].list)  //删除最后一项的前一项【b】
                    // debugger
                    commit('averageDel', this.state.historys) //清空的历史记录
                    commit('avergeavgdel', this.state.avg)//清空标识
                } else {
                    resolve(JSON.parse(JSON.stringify(this.state.tableData)))
                    commit('averageDel', [])//置空的历史记录
                    commit('avergeavgdel', [])//置空的标识
                }
            })
        },
        //重置
        reseAverageDel({ commit }, data) {
            return new Promise((resolve) => {
                // 数组 【a,b,c】
                // 【a】只要一项就返回源数据tableData,
                // [a,b] 长度大于1就执行以下方法
                if (this.state.historys.length > 1) {
                    commit('averageDel', JSON.parse(JSON.stringify(this.state.tableData)))//当前的历史记录
                    commit('avergeavgdel', this.state.avg) //当前的标识
                } else {
                    resolve(JSON.parse(JSON.stringify(this.state.tableData)))
                    commit('averageDel', [])//置空的历史记录
                    commit('avergeavgdel', [])//置空的标识
                }
            })
        }
    },
    plugins: [persistedState()]
})
</script>

都有注释 不懂得 ctrl+f查找一下就可以找到对应的