Vue ElementUi纯table组件实现购物车全选，结算

1.最终效果

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

2.艰难前行

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


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

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

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

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

3.分析

    <el-table
      show-summary
      class="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 index in val) {
        ids.push(val[index].id);
      }
      for (var i in this.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方法和选中商品数和价格和挂钩