问答

element table表格show-summary不生效

作者:admin 2021-06-29 我要评论

el-table v-loading="listLoading" :data="list" element-loading-text="Loading" fit border show-summary highlight-current-row @row-click="rowClick" el-ta...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

image.png

<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>
###

el-table-column上要绑定prop

###

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

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • element table表格show-summary不生效

    element table表格show-summary不生效

  • springcloud gateway 路由配置问题

    springcloud gateway 路由配置问题

  • iOS 证券APP我的持仓左右滑动效果如何

    iOS 证券APP我的持仓左右滑动效果如何

  • Print.js打印阿里图标字体不显示什么原

    Print.js打印阿里图标字体不显示什么原

腾讯云代理商
海外云服务器