VUE-Table上綁定Input通過render實現(xiàn)雙向綁定數(shù)據(jù)的示例
更新時間：2018年08月27日 10:35:13 作者：TTcccCarrie
今天小編就為大家分享一篇VUE-Table上綁定Input通過render實現(xiàn)雙向綁定數(shù)據(jù)的示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
效果
HTML的Table
<Card>
<div ref="print" >
<Table width="100%" height="500" size="small" :columns="columns7" :stripe="true" :data="data" border ></Table>
</div>
</Card>
JS代碼
<script>
export default {
data () {
return {
columns7: [
{
title: '序號',
type: 'index',
width: 200
},
{
title: '新批次',
width: 350,
key:'newLots'
},
{
title: '數(shù)量',
key: 'numLots',
width: 350,
align: 'center',
render: (h, params) => {
var vm = this;
return h('div', [
h('Input', {
props: {
//將單元格的值給Input
value:params.row.numLots,
},
on:{
'on-change' (event) {
//值改變時
//將渲染后的值重新賦值給單元格值
params.row.numLots = event.target.value;
vm.data[params.index] = params.row;
}
}
},)
]);
}
},
{
title: '操作',
key: 'action',
width: 350,
align: 'center',
render: (h, params) => {
return h('div', [
h('Button', {
props: {
type: 'error',
size: 'default'
},
style: {
marginRight: '5px'
},
on: {
click: () => {
this.openDeleteDialog(params.index)
}
}
}, '刪除')
]);
}
}
],
data: [],
}
}
}
</script>
這樣就實現(xiàn)Input和Table單元格數(shù)據(jù)的雙向綁定，取值是直接循環(huán)單元格來取值。
雙向綁定數(shù)據(jù)的核心代碼：
on:{
'on-change' (event) {
//值改變時
//將渲染后的值重新賦值給單元格值
params.row.numLots = event.target.value;
vm.data[params.index] = params.row;
}
}
完成~
以上這篇VUE-Table上綁定Input通過render實現(xiàn)雙向綁定數(shù)據(jù)的示例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue3中配置404路由及懶加載的解決過程,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-04-04
在Vue?3中,可以通過創(chuàng)建一個事件總線（event?bus）來實現(xiàn)組件之間的通信,要在Vue?3中使用事件總線,主要步驟有：1、創(chuàng)建一個新的Vue實例作為事件總線,2、在組件中引入并使用該事件總線,以下是詳細的步驟和示例,需要的朋友可以參考下2025-01-01
下面小編就為大家分享一篇vue中element組件樣式修改無效的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
VUE v-model表單數(shù)據(jù)雙向綁定完整示例
這篇文章主要介紹了VUE v-model表單數(shù)據(jù)雙向綁定,結(jié)合完整實例形式分析了vue.js實現(xiàn)表單數(shù)據(jù)雙向綁定相關(guān)操作技巧,需要的朋友可以參考下2019-01-01
這篇文章主要為大家詳細介紹了vue驗證碼插件使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要為大家詳細介紹了Vue中的自定義渲染器和異步渲染的相關(guān)知識,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2024-03-03
這篇文章主要介紹了10分鐘教你快速上手Vue3中新增的API,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-09-09
vue自定義指令和動態(tài)路由實現(xiàn)權(quán)限控制
這篇文章主要介紹了vue自定義指令和動態(tài)路由實現(xiàn)權(quán)限控制的方法，幫助大家更好的理解和學習vue，感興趣的朋友可以了解下2020-08-08
這篇文章主要給大家介紹了關(guān)于vue中跳轉(zhuǎn)界面的3種實現(xiàn)方法,文中通過實例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-07-07
這篇文章主要介紹了VUE中如何動態(tài)綁定類名和樣式問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06