1.最终效果

毕设有用到购物车模块，用的也是ElementUi组件库，想着就用里面的table组件，看了下官方文档，感觉最后结尾的那里可以不用写在table外面，最后也是能实现的，虽然过程有亿点点艰苦。。。

2.艰难前行

一看就能看出来购物车肯定是一个表格，所以看了下Elementui官方的table组件，会发现


这个全选表单和表尾合计行，合到一起不就差不多完成任务了嘛

实现多选非常简单: 手动添加一个el-table-column，设type属性为selection即可；

将show-summary设置为true就会在表格尾部展示合计行。默认情况下，对于合计行，第一列不进行数据求合操作，而是显示「合计」二字（可通过sum-text配置），其余列会将本列所有数值进行求合操作，并显示出来。当然，你也可以定义自己的合计逻辑。使用summary-method并传入一个方法，返回一个数组，这个数组中的各项就会显示在合计行的各列中，具体可以参考本例中的第二个表格。

好好琢磨下这两句话，把两个整在一起

3.分析

<el-table
      show-summaryclass="table"
      ref="multipleTable":data="tableData"
      tooltip-effect="dark"
      style="width: 100%":summary-method="getSummaries"
      @selection-change="handleSelectionChange"><el-table-column type="selection" min-width="8.5%"></el-table-column><el-table-column label="商品预览" min-width="10.5%"><template slot-scope="scope">{{ scope.row.date}}</template></el-table-column><el-table-column
        prop="name"
        label="商品信息"
        min-width="27%"
        show-overflow-tooltip></el-table-column><el-table-column prop="price" label="单价" min-width="8%"><template slot-scope="scope">{{ scope.row.price.toFixed(2)}}</template></el-table-column><el-table-column prop="num" label="数量" min-width="12%"><template slot-scope="scope"><el-input-number
            size="mini"
            v-model="scope.row.num":min="1"
            label="描述文字"></el-input-number></template></el-table-column><el-table-column label="金额" min-width="11%"><template slot-scope="scope">{{(scope.row.price* scope.row.num).toFixed(2)}}</template></el-table-column><el-table-column label="操作" min-width="15%"><template slot-scope="scope"><el-button
            type="text"
            size="small"
            icon="el-icon-edit"
            @click="editfollowupForm(scope.row.id)">移入收藏夹</el-button><el-button
            type="text"
            size="small"class="deleteBtn"
            icon="el-icon-delete">删除</el-button></template></el-table-column></el-table>//js
  watch:{tableData:function(){let _this=this;this.$nextTick(()=>{// debugger;
        console.log(_this.$refs.multipleTable.$refs);let html= _this.$refs.multipleTable.$refs.footerWrapper.querySelector(".el-table__footer").querySelectorAll("td")[6].querySelector(".cell");
        html.innerHTML=`   <button
            type="button"
            class="el-button el-button--default el-button--mini cart-btn"
            style="color: #fff; background: #f56c6c;width:120px;height:50px;font-size:20px"
          >
          <span>结算</span>
          </button>`;
         html.onclick=function(){
           console.log("点击",_this.totalPrice)}});},},
  methods:{handleSelectionChange(val){var ids=[];this.selNum= val.length;for(var indexin val){
        ids.push(val[index].id);}for(var iinthis.tableData){if(ids.indexOf(this.tableData[i].id)!=-1){this.tableData[i].selected=1;}else{this.tableData[i].selected=0;}}},getSummaries(param){const{ columns, data}= param;const sums=[];if(columns.length>0){this.totalPrice=this.tableData.filter((item)=> item.selected==1).map((row)=> row.num* row.price).reduce((total, num)=> total+ num,0).toFixed(2);}else{this.totalPrice=0;}
      columns.forEach((column, index)=>{if(index===0){
          sums[index]="合计";return;}if(index===4){
          sums[index]="已选中商品"+this.selNum+"件";}if(index===5){
          sums[index]=this.totalPrice+"元";return;}if(index==6){}});return sums;},

注意的地方就是getSummaries方法和尾行集合挂钩，watch中的tableData和按钮挂钩，handleSelectionChange方法和选中商品数和价格和挂钩