12.Vue+Element UI 獲取input的值

一、（表格內直接編輯並取值）

HTML:

　　

<el-table>
　　<el-table-column prop="time" label="日期" ></el-table-column>
　　　　<el-table-column prop="name" label="名稱" ></el-table-column>
　　　　<el-table-column prop="pv" label="點擊數(PV)"></el-table-column>
　　　　<el-table-column prop="uv" label="去重數(UV)" ></el-table-column>
　　　　<el-table-column prop="num" label="激活/注冊/CPS" >
　　　　　　<template slot-scope="{row}">
　　　　　　　　<span v-if="row.num != '-'">{{row.num}}</span>
　　　　　　　　<el-input size="small" v-if="row.num == '-'" v-model="row.date" placeholder="請輸入值" type="number"></el-input>
　　　　　　</template>
　　　　</el-table-column>
　　　　<el-table-column prop="operate" label="操作" >
　　　　　　<template slot-scope="scope">
　　　　　　　　<el-button type="primary" class="showSameBtns" @click="historySure(scope.row,scope.$index)" v-if="scope.row.num != '-'" :disabled="true">確定</el-button>
　　　　　　　　<el-button type="primary" class="showSameBtns" @click="historySure(scope.row,scope.$index)" v-if="scope.row.num == '-'" :disabled="false">確定</el-button>
　　　　　　</template>
　　</el-table-column>
</el-table>

 

 

METHODS:　

　　historySure(res,index){ // 歷史記錄設置激活數/注冊/CPS

　　　　// console.log(res)

　　　　// console.log(index)

　　　　// console.log(histtoryID)

　　　　let params={

　　　　　　 name:res.name,

　　　　　 　num: res.date

　　　　}

　　　　console.log(params)

　　}

 

二、（Ref：）單個input的值的獲取，多個ref為history_Num的input取最后，前值為空

HTML:
　　<input class="edit-cell" v-if="row.num == '-'" ref="history_Num" type="number" style="width: 100%;border: 1px solid #c3d4ff;padding: 4px;text-align: center;">

Data中：
　　data(){
　　　　return{
　　　　　　history_Num:'',
　　　　}
　　}

Methods：

　　aa(){

　　　　let num = this.$refs.history_Num.value

　　}