element table表格show-summary不生效

Question

<el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      fit
      border
      show-summary
      highlight-current-row
      @row-click="rowClick"
    >
      <el-table-column label="入库单号" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.pushNo }}</span>
        </template>
      </el-table-column>
      <el-table-column label="序号" width="90">
        <template slot-scope="scope">
          <span>{{ scope.row.serialNumber }}</span>
        </template>
      </el-table-column>
      <el-table-column label="入库类型">
        <template slot-scope="scope">
          <template v-for="(item, index) in codeList.inboundTypeList">
            <span
              v-if="item.value.toString() === scope.row.pushType && item.predId != ''"
              :key="index"
            >{{ item.text }}</span>
          </template>
        </template>
      </el-table-column>
      <el-table-column label="品名" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.goodsName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="仓位" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.shippingNo }}</span>
        </template>
      </el-table-column>
      <el-table-column label="存匹数">
        <template slot-scope="scope">
          <span>{{ scope.row.pushPieces }}</span>
        </template>
      </el-table-column>
      <el-table-column label="存数量">
        <template slot-scope="scope">
          <span>{{ scope.row.pushCount }}</span>
        </template>
      </el-table-column>
      <el-table-column label="客户编号">
        <template slot-scope="scope">
          <span>{{ scope.row.customerNo }}</span>
        </template>
      </el-table-column>
      <el-table-column label="客户名称">
        <template slot-scope="scope">
          <span>{{ scope.row.customerName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="订单号" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.orderNo }}</span>
        </template>
      </el-table-column>

Answer 1

el-table-column上要绑定prop

Answer 2

你的表格使用了template模版显示数据，这个table就不自动合计就不生效，不显示了，你只需要将template去掉，就直接在el-table-column上绑定prop就可以了，但是如果你不该目前结果，你就需要传入summary-method，这个方法可以定义自己的合计逻辑。

Answer 3

我遇到过，当时是有两个问题：
1、el-table标签没有ref属性，加上ref="detailTable"
2、el-table标签外层的el-dialog标签没有用el-row包起来
我加上这两个地方后就显示出来了，仅供参考。