【Vue】vue项目中使用elementui table遇到的几个问题想请教大家一下？

【Vue】vue项目中使用elementui table遇到的几个问题想请教大家一下？

 <el-table :data="tableData" @selection-change="handleSelectionChange">
<el-table-column align="center" type="selection" width="55" fixed></el-table-column>
<el-table-column align="center" prop="" label="方案名称">
<!-- <template slot-scope="scope">{{scope.row.beginCardNo}} - {{scope.row.endCardNo}}</template> -->
</el-table-column>
<el-table-column align="center" label="兑换类型">
<!-- <template slot-scope="scope">{{scope.row.cardTypeName}}</template> -->
</el-table-column>
<el-table-column align="center" prop="count" label="兑换个数">\
<template slot-scope="scope">
<!-- <el-col :span="16"> -->
<el-input placeholder="请输入兑换个数" v-model="scope.row.input"></el-input>
<!-- </el-col> -->
</template>
</el-table-column>
<!--<el-table-column align="center" prop="" label="未配送数量"></el-table-column>-->
<el-table-column align="center" label="消耗积分" prop="price">
<!-- <template slot-scope="scope">{{scope.row.deposit | money}}</template> -->
</el-table-column>
<!-- <el-table-column align="center" label="操作" fixed="right">
<template slot-scope="scope">
<a class="operation" @click="deleteItem(scope.row)" v-authority="508003">删除</a>
</template>
</el-table-column> -->
</el-table>

handleSelectionChange (val) {
this.multipleSelection = val.map((item) =>{
return item.price;
});
// console.log(this.multipleSelection);
},

 data () {
return {
form: {
mobile: "",
cardNo: ""
},
isUserInfo: false,
rules: {},
cardTypes: [],
count:0,
input:'',
multipleSelection:[],
selectedIds: []
};
},
computed: {
activeName () {
this.multipleSelection.map(item => {
this.count += item;
});
return this.count;
}
},

  1. <el-input placeholder="请输入兑换个数" v-model="scope.row.input"></el-input> 想要获得scope.row.input这个输入的参数 在别的方法里面引用计算，应该怎么获取

2.handleSelectionChange 应该怎么修改完善才能实现 选中表格某行 共需要消耗的积分 跟选中的同步，取消选择 则减掉或者变成0 如果是多选 则是累加
3.获取到scope.row.input 跟 所消耗的积分 相乘计算

请大家指点

回答

1 tableData 这个数组的每一个元素中有用户输入的参数
2 使用计算属性

methods:
  handleSelectionChange (rows) {
    this.multipleSelection = rows
  }
  computed:
  totalScore() {
    return this.multipleSelection.reduce((sum, item) => sum + item.price, 0)
  }

3 需要用的时候遍历tableData就可以得到乘积

以上是 【Vue】vue项目中使用elementui table遇到的几个问题想请教大家一下？ 的全部内容， 来源链接： utcz.com/a/78795.html

回到顶部