Vue 事件的$event參數=事件的值案例
template
<el-table :data="dataList"> <el-table-column label="id" prop="id"></el-table-column> <el-table-column label="name" prop="name"> <template v-slot="props"> <el-input-number :min="0" v-model="props.row.count" @change="updateProduct($event)" size="mini" ></el-input-number> </template> </el-table-column> </el-table>
Script 部分
export default { data() { return { dataList: [ { id: 1, name: '001', count: 1 }, { id: 2, name: '002', count: 2 }, { id: 3, name: '003', count: 3 }, ] } }, methods: { updateProduct(value) { console.info(value) } } }
補充:vue學習筆記:事件中的$event對象作用
vue中點擊事件或者是其他的事件可以通過在事件中添加$event進行對標簽元素的dom獲取或者修改標簽指的屬性等等。具體用法如下:
1、可以通過$event進行對dom元素的獲取
html:
<button data-get="數據按鈕" @click="getRvent($event)">獲取事件對象</button>
首先我們先打印一下$event對象看一下,對象中有哪些屬性,如下圖
其中srcElement就是當前這個標簽元素,可以根據此屬性來獲取當前點擊事件的標簽元素。
比如我們可以對獲取的元素進行操作,就像原生js那樣,如下:
// 獲取事件對象e getRvent(e){ console.log(e); e.srcElement.style.background="red"; }
點擊前:
點擊後:
2、除此之外我們還可以對標簽自身的屬性進行修改,比如說改變button按鈕的文字值,這個時候是使用的$event下面的textContent進行修改。
點擊按鈕之前:
點擊按鈕之後:
3、我們也可以通過$event獲取標簽自定義的屬性值,如下:
html代碼:
<button data-get="數據按鈕" @click="getRvent($event)">獲取事件對象</button>
這個button按鈕標簽有一個自定義的屬性data-get,這時候我們可以根據$event的屬性target.dataset.get屬性進行獲取
可以在控制臺打印一下,如下:
其實有時候我們可以用元素本身自帶的屬性進行操作,摒棄添加class等操作,減少代碼的冗餘性,細化代碼。
以上為個人經驗,希望能給大傢一個參考,也希望大傢多多支持WalkonNet。如有錯誤或未考慮完全的地方,望不吝賜教。
推薦閱讀:
- vue+elementui實現動態添加行/可編輯的table
- 如何在vue中使用jsx語法
- vue+elementUI實現內嵌table的方法示例
- element el-table表格的二次封裝實現(附表格高度自適應)
- 關於el-table表格組件中插槽scope.row的使用方式