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 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 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 class="personalinvoicing_all_total">
        <div class="personalinvoicing_all_total_l">
          <span>¥ {{total()}}</span>
        <el-button class="personalinvoicing_all_total_btn" @click="goToBill" type="primary">确定</el-button>

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();
                    1.效果显示  ????这里还有涉及到全选和单选功能,点击确定获取到单选全选的数据,保存到一个新的数组,同时跳转到另一个页面,这个新数组也将传递过去。这里没有用element的table表格组件&lt;div class="personalinvoicing_all_top"&gt;        &lt;el-breadcrumb separator-class="el-icon-arrow-right"&gt;          &lt;el-breadcrumb-item :to="{ p
				
作者:李俊涛,来自原文地址  上面这个需求我说的似乎不太明白,之前也是没有碰到过,也是最近在搞小程序,涉及到小程序前后台数据交互,展示的部分!!不太明白没关系等会我给大家举个例子,就明白了说起来有点拗口,一看就明白了,其实如果是原生js开发,并不要这么做,就因为小程序它把一些东西绑到了视图层上了,例如:for循环,当你拿到的数据格式不对时,所以就会在展示数据的时候你就需要做一点点处理,当然了如果你们后台能给到你正好需要的格式那你就轻松,万一不是你需要的正好的格式那就需要你自己去做些处理!! 例如下面这个界面:  (此图片来源于网络,如有侵权,请联系删除! ) 其实在wxml视图层就一个
Vue.js 中,可以使用 JavaScript 数组的 slice() 方法复制一个数组数据到另一个数组中。例如: let list1 = [1, 2, 3, 4, 5]; let list2 = list1.slice(); 也可以使用 JavaScript 的 spread 运算符: let list1 = [1, 2, 3, 4, 5]; let list2 = [...list1...
这个问题其实是业务里的一个需求,先附上ui的设计图和后台返回的数据, 我前段样式是每个月份进行遍历,然后在遍历月份里面的每个数据。而后端返回的是一条条的数据(需要我们按照相同月份的数据合并成一个对象):1,截取全部数据的年份和月份: 2.去重 用到indexOf()方法,有则返回对应的索引,没有则-1: 3.创建数据方便赋: 4:赋 全部代码: jfList (arr) { var array = [] arr.forEach((item,index) => { <div class="question" v-for="(item, index) in questionArr" //遍历存放问题的数组 :key="index" //设置key属性
这几天遇到了一个难题,就是如题目所示,需要把选中的el-table表格里的数据提交到数据库里,经过了几天的折磨,总算是完成了。现在把从前端到一直提交到数据库里的全过程已经使用的方法写出来,帮助有疑问的小伙伴少走弯路。 1.前端vue代码 UpOne() { let that = this; var a = this.tableDataSelections //这个就是我们选中的el-table表格里的数据 conso.
标题写得不是很明白,结合以下的效果图,在这里描述一下这个功能,当在input框中输入数字几,下面就会产生多少条数据(这里输入数字2,下面产生两条数据,下图中的每一行为 一条数据)。 实现的思路 1、在input框中绑定回车事件和得焦事件,并且使用v-model绑定一个变量PepNumber,该变量用于绑定input框中输入的; 2、将下面的每一条数据定义为对象obj; 3、定义一个变量PepoleNumber,该变量为数组类型; 4、在每一条数据的最外层div中绑定定义的那个数组类型的变量;
选择框多选时绑定到数组上 <div id="app"> <select v-model="selected" multiple="multiple" id="" style="width: 50px"> <!-- <option value="">请选择</option>--> <option value="">a</option> <option value="">b</opt
vue 和 angular 还有有些区别的, 比如,vue中的数组数据改变后,view并没有发生改变,angular就不会这样。 所以VUE数组扩展方法中提供以了一个的API arr.$set(index, value); 此方法通过索引index设置数组元素来触发视图的跟。 例如:vue 中的 data {     return {        aa: [{name:jxj,ag...
```javascript // 假设你有一个名为 "myArray" 的数组,其中包含多个对象,每个对象都有一个 "id" 属性 // 假设你想把 id 为 3 的对象排到数组的第一个位置 // 首先,找到数组中 id 为 3 的对象的索引 const index = myArray.findIndex(item => item.id === 3); // 如果找到了,将该对象从数组中删除 if (index !== -1) { const item = myArray.splice(index, 1)[0]; // 将该对象插入数组的第一个位置 myArray.unshift(item); 上述代码中,`findIndex()` 方法用于找到数组中 `id` 属性为 `3` 的对象的索引。如果找到了,`splice()` 方法会将该对象从数组中删除,并返回被删除的元素组成的数组。最后,使用 `unshift()` 方法将该元素插入到数组的第一个位置。 请注意,上述代码只会将一个特定的元素排到数组的第一个位置。如果有多个元素需要排到数组的第一个位置,可以使用类似的方法依次处理每个元素。