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)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
vue2.x中h函數(shù)(createElement)與vue3中的h函數(shù)詳解
h函數(shù)本質(zhì)就是createElement(),h函數(shù)其實是createVNode的語法糖,返回的就是一個Js普通對象,下面這篇文章主要給大家介紹了關于vue2.x中h函數(shù)(createElement)與vue3中h函數(shù)的相關資料,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了Vue實現(xiàn)todo應用的示例，幫助大家更好的理解和學習使用vue框架，感興趣的朋友可以了解下2021-02-02
隨著現(xiàn)在vue3越來越普及，相應的面試題也多了起來。說到vue3的面試題，有一個最經(jīng)典的就是對于實現(xiàn)ref和reactive這兩個方法的底層原理，本文就來和大家簡單講講吧2023-04-04
這篇文章主要介紹了vue3.0 搭建項目總結(jié)(詳細步驟),文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05
本篇文章主要介紹了vuejs2.0實現(xiàn)一個簡單的分頁示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
這篇文章主要給大家分享了一個寫給vue新手看的vue渲染頁面教程，文中通過圖文介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，感興趣的朋友們下面隨著小編來一起學習學習吧。2017-09-09
這篇文章主要為大家詳細介紹了vue實現(xiàn)滾動條始終懸浮在頁面最下方，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要給大家介紹了關于vue的ssr服務端渲染的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-04-04
vue下載excel的實現(xiàn)代碼后臺用post方法
這篇文章主要介紹了vue下載excel的實現(xiàn)代碼,后臺用post方法，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-05-05
Vue的nextTick方法是用于在DOM更新后執(zhí)行回調(diào)的工具函數(shù),它的作用是在當前JavaScript執(zhí)行環(huán)境中延遲執(zhí)行回調(diào),以確保在下次DOM更新循環(huán)之前,可以訪問到更新后的DOM,本文就給大家介紹一下Vue nextTick原理與作用,需要的朋友可以參考下2023-08-08