vue 解决el-table 表体数据发生变化时，未重新渲染问题

效果图

 父组件中数量改变后总数重新计算

子组件完整代码

<template>
  <el-table
    show-summary
    ref="multipleTable"
    v-bind="$props"
    @selection-change="handleSelectionChange"
    @row-click="handleRowClick"
    :summary-method="getSummaries"
    <--这里是关键-->
    :key="certKey"
  >
    <slot/>
  </el-table>
</template>

<script>
export default {
  props: ['data','certKey'],
  data() {
    return {
      selectionData: []
    }
  },

  watch: {
    certKey: {
      handler(val) { 
      }
    },
  },
  methods: {
    // 向父组件共享数据
    handleSelectionChange(val) {
      this.$emit('selection-change', val)
    },
    handleRowClick(row, column, event) {
      // selectionData -- 已选的数据
      let index = this.selectionData.findIndex(item => {
        // 判断已选数组中是否已存在该条数据
        return item.id == row.id
      })
      if (index == -1) {
        // 如果未存在，设置已选状态，并在list中添加这条数据
        this.$refs.multipleTable.toggleRowSelection(row, true); //设置复选框为选中状态
        this.selectionData.push(row)
      } else {
        // 如果已存在，设置未选状态，并在list中删除这条数据
        this.$refs.multipleTable.toggleRowSelection(row, false); //设置复选框为未选状态
        this.selectionData.splice(index, 1)
      }
    },
    //getSummaries()返回的是一个展示的数组 
      getSummaries(param) {
        const { columns, data } = param;
        const sums = []; //声明变量
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = "合计";
            return;
          }
          //计算planQuantity字段的统计
          const values = data.map((item) => Number(item.planQuantity));
          //需要显示和合计纵列
          if ( column.property == "quantity"   ) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
          } else {
          }
        });
        return sums;
      },

    }
}
</script>

父组件代码 WmsTable 是子组件名 WmsTable 中的数量字段quantity修改时重新计算合计文章来源地址https://www.toymoban.com/news/detail-809068.html

<template>
  <div class="app-container"> 
    </el-form>
 
    <el-table v-loading="loading" :data="materialList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column label="id" align="center" prop="id" v-if="true"/>
      <el-table-column label="编号" align="center" prop="materialNo"/>
      <el-table-column label="名称" align="center" prop="materialName"/>
      <el-table-column label="状态" align="center" prop="status"/>
      <el-table-column label="备注" align="center" prop="remark"/>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['wms:material:edit']"
          >修改
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['wms:material:remove']"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改物料申请单对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="60%" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="auto">
        <el-form-item label="编号" prop="materialNo">
          <el-input v-model="form.materialNo" placeholder="请输入编号"/>
        </el-form-item>
        <el-form-item label="名称" prop="materialName">
          <el-input v-model="form.materialName" placeholder="请输入名称"/>
        </el-form-item>
        <el-form-item label="总数量" prop="amount">
          <el-input v-model="form.amount" placeholder="请输入总数量"/>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" placeholder="请输入备注"/>
        </el-form-item>
      </el-form>

      <div>
        <div class="ops">
          <el-button type="primary" plain="plain" size="small" @click="handleLeaderAdd(2)">添加物料</el-button>
        </div>
        <WmsTable :data="form.details" @selection-change="handleSelectionChange" ref="wmstable" :certKey="certKey">
          <el-table-column type="selection" width="100" align="center"></el-table-column>
          <el-table-column label="物料名" align="center" prop="applyMaterialName"></el-table-column>
          <el-table-column label="物料编号" align="center" prop="applyMaterialNo"></el-table-column>
          <el-table-column label="物料类型" align="center" prop="itemTypeName"></el-table-column>
          <el-table-column label="数量" align="center" prop="quantity" row-key="quantity" width="150">
            <template slot-scope="scope">
              <el-input-number v-model="scope.row.planQuantity"  @change="recalculateTotal" placeholder="计划数量" :min="1" size="small"  :max="2147483647"></el-input-number>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <a class="red" @click="form.details.splice(scope.$index, 1)">删除</a>
            </template>
          </el-table-column>
        </WmsTable>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible="modalObj.show" :title="modalObj.title" :width="modalObj.width" @close="modalObj.cancel">
      <template v-if="modalObj.component === 'add-item'">
        <item-select ref="item-select" :data="this.form.details"></item-select>
      </template>
      <span slot="footer">
        <el-button v-if="modalObj.cancel" @click="modalObj.cancel">取消</el-button>
        <el-button v-if="modalObj.ok" type="primary" @click="modalObj.ok">确认</el-button>
      </span>
    </el-dialog>
    <!-- 添加 用户对话框 -->
    <el-dialog title="选择负责人" :visible.sync="leaderOpen" width="50%" append-to-body destroy-on-close :key="leaderOpen">
      <el-row :gutter="20">
        <el-col :span="24" :xs="24">
          <div class="relatedRoleDIv">
            <el-form :model="roleRelateObj" ref="form" :inline="true" v-show="showSearch" label-width="68px">
              <el-form-item label="姓名" prop="realName">
                <el-input
                  v-model="roleRelateObj.realName"
                  placeholder="请输入姓名"
                  clearable
                  size="small"
                  style="width: 240px"
                  @keyup.enter.native="getListItem"
                />
              </el-form-item>
              <el-form-item label="手机号码" prop="phonenumber">
                <el-input v-model="roleRelateObj.phonenumber" placeholder="请输入手机号码" clearable size="small"
                          style="width: 240px" @keyup.enter.native="getListItem"/>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="getListItem">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery2">重置</el-button>
              </el-form-item>
            </el-form>
            <el-table :data="userList" style="height: 484px" @selection-change="handleSelectionChange2">
              <template v-if="addType == 1">
                <el-table-column align="center" width="65" :type="addType == 1 ? '' : 'selection'">
                  <template scope="scope">
                    <el-radio :label="scope.$index" v-model="radio" @change.native="getCurrentRow(scope.row)">
                      {{ `` }}
                    </el-radio>
                  </template>
                </el-table-column>
              </template>
              <el-table-column type="selection" width="55" v-if="addType == 2">
              </el-table-column>
              <el-table-column label="物料名"   prop="applyMaterialName"/>
              <el-table-column label="物料编号"  prop="applyMaterialNo" :show-overflow-tooltip="true"/>
              <el-table-column label="物料类型" align="center"  prop="itemTypeName"  />
              <el-table-column label="计量单位" align="center"  prop="unitName"  />
            </el-table>
            <pagination
              v-show="total2 > 0" :total="total2" :page.sync="roleRelateObj.pageNum"
              :limit.sync="roleRelateObj.pageSize"
              @pagination="getListItem"
            />
            <div style="height: 35px;margin-top:40px;display: flex;    justify-content: flex-end;">
              <el-button :loading="buttonLoading" type="primary" @click="submitLeaderForm">确 定</el-button>
              <el-button @click="leaderOpen = false">取 消</el-button>
            </div>
          </div>

        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import {listMaterial, getMaterial, delMaterial, addMaterial, updateMaterial} from "@/api/wms/material";
import {randomId} from '@/utils/RandomUtils'
import {listUser} from "../../../api/system/user";
import { listItem, getItem, delItem, addItem, updateItem } from "@/api/wms/item";

export default {
  name: "Material",
  data() {
    return {
      certKey: "",
      radio: "",
      leaderOpen: false,
      userList: [],
      templateSelection2: [],
      checkList: [],
      roleRelateObj: {},
      addType: "",
      total2: 0,
      modalObj: {
        show: false,
        title: '',
        width: '50%',
        component: null,
        model: {},
        ok: () => {
        },
        cancel: () => {
        }
      },
      hasSupplier: false,
      // 按钮loading
      buttonLoading: false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 物料申请单表格数据
      materialList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        materialNo: undefined,
        materialName: undefined,
        amount: undefined,
        status: undefined,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        id: [
          {required: true, message: "id不能为空", trigger: "blur"}
        ],
        materialNo: [
          {required: true, message: "编号不能为空", trigger: "blur"}
        ],
        materialName: [
          {required: true, message: "名称不能为空", trigger: "blur"}
        ],
        amount: [
          {required: true, message: "总数量不能为空", trigger: "blur"}
        ],
        status: [
          {required: true, message: "1采购中2已完成采购不能为空", trigger: "change"}
        ],
        remark: [
          {required: true, message: "备注不能为空", trigger: "blur"}
        ],
      }
    };
  },
  created() {
    this.getList();
    this.getListItem();
  },
  methods: {
    //数量改变调用方法
    recalculateTotal() {
      this.certKey=!this.certKey;
      console.log(this.certKey)
    },
    //
    handleLeaderAdd(type) {
      this.addType = type;
      this.leaderOpen = true;
      this.getListItem();
    },
    submitLeaderForm() {
      console.log(this.templateSelection2)
      this.form.details=this.templateSelection2;
      this.leaderOpen = false;
    },
    getCurrentRow(row) {
      this.templateSelection = row;
      console.log(row);
      console.log(this.checkList);
      // 获取选中数据 row表示选中这一行的数据，可以从里面提取所需要的值
    },
    handleSelectionChange2(selection) {
      this.templateSelection2 = selection;
    },
    getListItem() {
      listItem().then((response) => {
        this.userList = response.rows;
        this.total2 = response.total;

        console.log(
          this.userList,
        );
      });
    },
    /** 重置按钮操作 */
    resetQuery2() {
      this.resetForm("roleRelateObj");
      this.handleQuery2();
    },
    /** 关联角色弹框重置按钮 */
    handleQuery2() {
      this.getListItem();
    },
    /** 查询物料申请单列表 */
    getList() {
      this.loading = true;
      listMaterial(this.queryParams).then(response => {
        this.materialList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        materialNo: 'SQ-' + randomId(),
        id: undefined,
        materialName: undefined,
        amount: undefined,
        status: undefined,
        delFlag: undefined,
        remark: undefined,
        createBy: undefined,
        createTime: undefined,
        updateBy: undefined,
        updateTime: undefined
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加物料申请单";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.loading = true;
      this.reset();
      const id = row.id || this.ids
      getMaterial(id).then(response => {
        this.loading = false;
        this.form = response.data;
        this.open = true;
        this.title = "修改物料申请单";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.buttonLoading = true;
          if (this.form.id != null) {
            updateMaterial(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            }).finally(() => {
              this.buttonLoading = false;
            });
          } else {
            addMaterial(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            }).finally(() => {
              this.buttonLoading = false;
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除物料申请单编号为"' + ids + '"的数据项？').then(() => {
        this.loading = true;
        return delMaterial(ids);
      }).then(() => {
        this.loading = false;
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      }).finally(() => {
        this.loading = false;
      });
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('wms/material/export', {
        ...this.queryParams
      }, `material_${new Date().getTime()}.xlsx`)
    },


    confirmSelectItem() {
      const value = this.$refs['item-select'].getRightList()
      this.form.details = value.map(it => {
        return {
          id: it.id,
          prod: it,
          planQuantity: null,
          realQuantity: null,
          place: [],
          receiptOrderStatus: 0,
          delFlag: 0
        }
      })
      this.closeModal()
    },
    closeModal() {
      this.modalObj.show = false
    },
    showAddItem() {
      try {
        this.$refs['item-select'].initDetailsList(this.form.details)
      } catch (err) {

      }
      const ok = () => this.confirmSelectItem()
      const cancel = () => this.closeModal()
      this.modalObj = {
        show: true,
        title: '添加物料',
        width: '50%',
        component: 'add-item',
        model: {},
        ok,
        cancel
      }
    },

  }
};
</script>

到了这里，关于vue 解决el-table 表体数据发生变化时，未重新渲染问题的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！