vue項(xiàng)目中使用elementui table遇到的幾個問題想請教大家一下？

 <el-table :data="tableData" style="width: 100%;" @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="兌換個數(shù)">\
          <template slot-scope="scope">
             <!-- <el-col :span="16"> -->
            <el-input placeholder="請輸入兌換個數(shù)" v-model="scope.row.input"></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="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;
    }
  },

<el-input placeholder="請輸入兌換個數(shù)" v-model="scope.row.input"></el-input> 想要獲得scope.row.input這個輸入的參數(shù) 在別的方法里面引用計(jì)算，應(yīng)該怎么獲取

2.handleSelectionChange 應(yīng)該怎么修改完善才能實(shí)現(xiàn) 選中表格某行共需要消耗的積分跟選中的同步，取消選擇則減掉或者變成0 如果是多選則是累加
3.獲取到scope.row.input 跟所消耗的積分相乘計(jì)算

請大家指點(diǎn)

回答

編輯回答

詆毀你

1 tableData 這個數(shù)組的每一個元素中有用戶輸入的參數(shù)
2 使用計(jì)算屬性

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

3 需要用的時候遍歷tableData就可以得到乘積

2017年4月7日 03:41