鍍金池/ 問答/HTML/ table 里面的數(shù)據(jù)選中之后,更改input里面的值完成實(shí)時(shí)計(jì)算

table 里面的數(shù)據(jù)選中之后,更改input里面的值完成實(shí)時(shí)計(jì)算

clipboard.png
想實(shí)現(xiàn)的 在選中情況下 如果 兌換個(gè)數(shù)下的input里面的數(shù)字更改的話 需要消耗的積分 實(shí)現(xiàn)同步更新
求實(shí)現(xiàn)方法

 <el-table :data="tableData" style="width: 100%;" @selection-change="handleSelectionChange" ref="multipleTable">
             <el-table-column align="center" type="selection" width="55" fixed></el-table-column>
        <el-table-column align="center" prop="name" label="方案名稱" width='120'>
          <!-- <template slot-scope="scope">{{scope.row.beginCardNo}} - {{scope.row.endCardNo}}</template> -->
        </el-table-column>
        <el-table-column align="center" prop ="type" label="兌換類型">
          <!-- <template slot-scope="scope">{{scope.row.cardTypeName}}</template> -->
        </el-table-column>
        <el-table-column align="center"  label="兌換個(gè)數(shù)" width="160px" prop ="exchangeNum">
          <template slot-scope="scope">
             <!-- <el-col :span="16"> -->
            <el-input placeholder="請(qǐng)輸入兌換個(gè)數(shù)" v-model="scope.row.exchangeNum" @change="change"></el-input>
             <!-- </el-col> -->
          </template>
        </el-table-column>
        <!--<el-table-column align="center" prop="" label="未配送數(shù)量"></el-table-column>-->
        <el-table-column align="center" label="消耗積分" prop="costPointsNum">
          <!-- <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>
 data () {
    return {
      form: {
        mobile: "",
        cardNo: ""
      },
      userInfo:'',
      isUserInfo: false,
      rules: {},
      count:0,
      multipleSelection:[],
      exchange:true,
      noExchange:false
    };
  },
 handleSelectionChange (val) {
      console.log(val);
      this.multipleSelection = val.map((item) =>{
        return item.costPointsNum * item.exchangeNum;
        
      });
      let len = this.multipleSelection.length;
      console.log(len);
      if (len === 0) {
        this.count = 0;
        this.noExchange = false;
        this.exchange = true;
      } else {
        this.count = 0;
        this.multipleSelection.map(item => {
          this.count += item;
        });
        let len = 0;
      }
      let leftPoints = this.userInfo.leftPoints;
      console.log(leftPoints); 
      if (this.count < leftPoints){
        console.log("可以兌換");
      } else {
        this.exchange = false;
        this.noExchange = true;
        console.log('積分余額不足');
      }
      return this.count;
      // console.log(this.multipleSelection); 
    },

疑惑點(diǎn):輸入框里面的值不知道該怎么獲取

回答
編輯回答
笨笨噠
<div> {{count}}</div>
<el-table :data="tableData" style="width: 100%;" @selection-change="handleSelectionChange" ref="multipleTable">
    <el-table-column align="center" type="selection" width="55" fixed></el-table-column>
    <el-table-column align="center" prop="name" label="方案名稱" width='120'></el-table-column>
    <el-table-column align="center" prop ="type" label="兌換類型"></el-table-column>
    <el-table-column align="center"  label="兌換個(gè)數(shù)" width="160px" prop ="exchangeNum">
      <template slot-scope="scope">
        <el-input placeholder="請(qǐng)輸入兌換個(gè)數(shù)" v-model="scope.row.exchangeNum" @input="change"></el-input>
      </template>
    </el-table-column>
    <el-table-column align="center" label="消耗積分" prop="costPointsNum"></el-table-column>
  </el-table>

//js
data() {
  return {
    tableData: [{
      type: '禮品',
      name: 'name1',
      exchangeNum:1,
      costPointsNum: 10
    },{
        type: '券',
      name: 'name2',
      exchangeNum:1,
      costPointsNum: 10
    }],
    count:0,
    selectData:[]
  }
},
methods:{
    handleSelectionChange(data){
    data && (this.selectData = data);
    this.computeCount()
  },
  change(a){
      a = a || 0;
    if(/^\d*$/.test(a))
        this.computeCount()
  },
  computeCount(){
      this.count = 0;
    this.selectData.map(i=>{
        this.count += Number(i.costPointsNum*i.exchangeNum)
    })
  }
}
2018年3月29日 01:04