1.效果显示 👇

这里还有涉及到全选和单选功能，点击确定获取到单选全选的数据，保存到一个新的数组，同时跳转到另一个页面，这个新数组也将传递过去。

这里没有用element的table表格组件

<div class="personalinvoicing_all_top">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/personalcenter' }">个人中心</el-breadcrumb-item>
          <el-breadcrumb-item>我的订单</el-breadcrumb-item>
          <el-breadcrumb-item class="personalinvoicing_all_top_active">申请开票</el-breadcrumb-item>
        </el-breadcrumb>
        <el-checkbox
          v-model="checkAll"
          @change="handleCheckAllChange()"
        >全选</el-checkbox>
      </div>
      <div class="personalinvoicing_all_bottom">
        <div class="personal_order_bottom">
          <div class="personal_order_bottom_table">
            <div class="personal_order_bottom_table_one">交易类型</div>
            <div class="personal_order_bottom_table_two">交易时间</div>
            <div class="personal_order_bottom_table_three">交易作品</div>
            <div class="personal_order_bottom_table_four">著作权人</div>
            <div class="personal_order_bottom_table_five">交易金额</div>
            <div class="personal_order_bottom_table_six">开具发票</div>
          </div>
          <div class="personal_order_bottom_table_such" v-for="(item,index) in table" :key="index">
            <div class="personal_order_bottom_table_such_one">{{item.type==5?'阅读':'独家'}}</div>
            <div class="personal_order_bottom_table_such_two">{{item.date}}</div>
            <div class="personal_order_bottom_table_such_three">{{item.worksName}}</div>
            <div class="personal_order_bottom_table_such_four">{{item.nickName}}</div>
            <div class="personal_order_bottom_table_such_five">¥ {{item.price}}</div>
            <div class="personal_order_bottom_table_such_six">
              <el-checkbox @change="handleCheckedCitiesChange(item)" v-model="item.checkModel"></el-checkbox>
            </div>
          </div>
        </div>
      </div>
      <div class="personalinvoicing_all_total">
        <div class="personalinvoicing_all_total_l">
          合计：
          <span>¥ {{total()}}</span>
        </div>
        <el-button class="personalinvoicing_all_total_btn" @click="goToBill" type="primary">确定</el-button>
      </div>

2.需要声明的参数 👇

table:[], //放入初始的数据集合

checkAll:false, //初始全选选按钮控制

newtable:[]； //用来储存最终选择的集合

3. methods方法 👇

单选的两种方法

 // handleCheckedCitiesChange(val) {
    //   for (let i = 0, l = this.table.length; i < l; i++) {
    //     if (this.table[i].checkModel !== val) {
    //       this.checkAll = false;
    //        console.log(this.checkAll);
    //       return;
    //     }
    //   }
    //   this.checkAll = val;

    // },
    handleCheckedCitiesChange(item) {
      this.table.every(function(item) {
        return item.checkModel == true;
      })
        ? (this.checkAll = true)
        : (this.checkAll = false);
    },

全选

 // 用户全选
    // handleCheckAllChange(val) {
    //   this.table.map((item, i) => {
    //     item.checkModel = val;
    //   });
    // },
    handleCheckAllChange() {
      for (var i = 0; i < this.table.length; i++) {
        this.table[i].checkModel = this.checkAll;
      }
    },

计算总的金额

total: function(i) {
      var togglePrice = 0;
      this.table.forEach(function(data) {
        if (data.checkModel) {
          togglePrice += parseInt(data.price);
        }
      });
      return togglePrice;
    }

点击确定按钮，获取到单选全选的数据，并将这个这个数组传递到你需要的页面

goToBill() {
      this.newtable = this.table.filter(function(item) {
        return item.checkModel == true;
      });
	  console.log("this.newtable:" + JSON.stringify(this.newtable));     
      this.$router.push({
        path: "/personalcenter/personalinvoicing/personalbill",
        query: {
          tableArr: JSON.stringify(this.newtable)
        }
      });

到另一个页面，你就需要写
，先声明参数，
tableArr：[], 保存获取到的数据

打印出来，就可以得到你想要的数据了，

watch: {
    $route: "getParams"
  },
  methods: {
    getParams() {
      this.tableArr = JSON.parse(this.$route.query.tableArr);
      console.log(this.tableArr);
      
    }
  },
  created() {
    this.getParams();
  }