VUE-Table上綁定Input通過render實(shí)現(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) { //值改變時(shí) //將渲染后的值重新賦值給單元格值 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>
這樣就實(shí)現(xiàn)Input和Table單元格數(shù)據(jù)的雙向綁定,取值是直接循環(huán)單元格來取值。
雙向綁定數(shù)據(jù)的核心代碼:
on:{ 'on-change' (event) { //值改變時(shí) //將渲染后的值重新賦值給單元格值 params.row.numLots = event.target.value; vm.data[params.index] = params.row; } }
完成~
以上這篇VUE-Table上綁定Input通過render實(shí)現(xiàn)雙向綁定數(shù)據(jù)的示例就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue2.x中h函數(shù)(createElement)與vue3中的h函數(shù)詳解
h函數(shù)本質(zhì)就是createElement(),h函數(shù)其實(shí)是createVNode的語法糖,返回的就是一個(gè)Js普通對象,下面這篇文章主要給大家介紹了關(guān)于vue2.x中h函數(shù)(createElement)與vue3中h函數(shù)的相關(guān)資料,需要的朋友可以參考下2022-12-12Vue實(shí)現(xiàn)todo應(yīng)用的示例
這篇文章主要介紹了Vue實(shí)現(xiàn)todo應(yīng)用的示例,幫助大家更好的理解和學(xué)習(xí)使用vue框架,感興趣的朋友可以了解下2021-02-02vue3.0 搭建項(xiàng)目總結(jié)(詳細(xì)步驟)
這篇文章主要介紹了vue3.0 搭建項(xiàng)目總結(jié)(詳細(xì)步驟),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05vuejs2.0實(shí)現(xiàn)一個(gè)簡單的分頁示例
本篇文章主要介紹了vuejs2.0實(shí)現(xiàn)一個(gè)簡單的分頁示例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-02-02vue實(shí)現(xiàn)滾動(dòng)條始終懸浮在頁面最下方
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)滾動(dòng)條始終懸浮在頁面最下方,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04vue下載excel的實(shí)現(xiàn)代碼后臺用post方法
這篇文章主要介紹了vue下載excel的實(shí)現(xiàn)代碼,后臺用post方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-05-05