資訊專欄INFORMATION COLUMN
摘要：使用函數(shù)實(shí)現(xiàn)表格與表單之間的雙向綁定以及表格中使用分發(fā)多個(gè)，分發(fā)不同的內(nèi)容。主要思路通過給表單組件的進(jìn)行賦值，之后通過等元素監(jiān)聽事件，進(jìn)行取值，然后通過表格當(dāng)前行索引對(duì)表格相應(yīng)元素進(jìn)行賦值。
使用render函數(shù)實(shí)現(xiàn)表格與form表單之間的雙向綁定以及表格中使用slot分發(fā)（多個(gè)slot，分發(fā)不同的內(nèi)容）。
主要思路通過props給表單組件的value進(jìn)行賦值，之后通過change、blur等元素監(jiān)聽事件，進(jìn)行取值，然后通過表格當(dāng)前行索引對(duì)表格相應(yīng)元素進(jìn)行賦值。這樣就完成了一個(gè)數(shù)據(jù)的雙向綁定了。
我這邊使用的是ivewUI組件庫
{
title: "姓名",
key: "name",
render: (h, params) => {
let self = this;
return h("div", [
h("Input", {
props: {
placeholder: "請(qǐng)輸入....",
value:params.row.name
},
"on": {
"on-blur":() => {
self.data1[params.index].name = event.target.value
}
},
}),
h("p",{
style: {
color: "red",
display: self.data1[params.index].name === "" ? "" : "none"
}
},"請(qǐng)輸入你的名字....")
]);
}
}
在表格中對(duì)一個(gè)select實(shí)現(xiàn)雙向綁定
{
title: "性別",
key: "sex",
render: (h, params) => {
let self = this;
const sexList = [
{name:"男",value:1},
{name:"女",value:2}
]
return h("Select",{
props:{
value:params.row.sex
},
on :{
"on-change" : (val) => {
self.data1[params.index].sex = val;
}
}
},sexList.map(item => {
return h("Option",{
props:{
value: item.value,
}
},item.name)
})
)
}
}
在表格中對(duì)一個(gè)switch實(shí)現(xiàn)雙向綁定，外加slot
{
title: "switch開關(guān)slot實(shí)現(xiàn)",
key: "switchSlot",
renderHeader(h, params) {
return h("Tooltip", {
props: {
placement: "right",
content: "switch開關(guān)"
}
},"switch開關(guān)slot實(shí)現(xiàn)")
},
render: (h, params) => {
let self = this;
const switchList = [
{
slot: "open",
name: "打開"
},
{
slot: "close",
name: "關(guān)閉"
}
]
return h("i-switch",{
props: {
size: "large",
value: params.row.switchSlot
},
on: {
"on-change" : (val) =>{
self.data1[params.index].switchSlot = val;
}
}
// 這樣我們就可以在表格中完美的實(shí)現(xiàn)多個(gè)slot分發(fā)了
},switchList.map(item => {
return h("span",{
slot:item.slot
},item.name)
}))
}
}
注意
對(duì)表格數(shù)據(jù)進(jìn)行雙向綁定時(shí)，不建議直接更改源數(shù)據(jù)源，可以copy出一份臨時(shí)數(shù)據(jù)源，在做相應(yīng)修改操作時(shí)對(duì)臨時(shí)數(shù)據(jù)源進(jìn)行更改，這樣可以大大減少對(duì)dom的渲染，在需要的時(shí)候再將臨時(shí)數(shù)據(jù)源提交到主數(shù)據(jù)源就可以了。
結(jié)尾如果覺得render寫起來很煩的話，可以使用jsx，會(huì)大大減少代碼量0.0
源碼地址
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/94565.html
摘要：事件總線事件總線首先創(chuàng)建了一個(gè)名為的空的實(shí)例然后全局定義了組件最后創(chuàng)建了實(shí)例。在父組件模板中，子組件標(biāo)簽上使用指定一個(gè)名稱，并在父組件內(nèi)通過來訪問指定名稱的子組件。 學(xué)習(xí)筆記：組件詳解 組件詳解 組件與復(fù)用 Vue組件需要注冊(cè)后才可以使用。注冊(cè)有全局注冊(cè)和局部注冊(cè)兩種方式。 全局注冊(cè) Vue.component(my-component, {}); 要在父實(shí)例中使用這個(gè)組件，必須要...
摘要：除了監(jiān)聽事件外，還可以用于組件之間的自定義事件。它僅僅作為一個(gè)直接訪問子組件的應(yīng)急方案，應(yīng)當(dāng)避免在模板或計(jì)算屬性中使用。將和合并成，會(huì)自動(dòng)去判斷是普通標(biāo)簽還是組件。子組件這里的狀態(tài)綁定的是父組件的數(shù)據(jù)。 查看原文站點(diǎn)，更多擴(kuò)展內(nèi)容及更佳閱讀體驗(yàn)！ 組件詳解 組件與復(fù)用 Vue組件需要注冊(cè)后才可以使用。注冊(cè)有全局注冊(cè)和局部注冊(cè)兩種方式。 全局注冊(cè) Vue.component(my-com...
摘要：根據(jù)組件單向數(shù)據(jù)流和和事件通信機(jī)制，需要由子組件通過事件通知父組件，并在父組件中修改原始的數(shù)據(jù)，完成狀態(tài)的更新。 本文同步在個(gè)人博客shymean.com上，歡迎關(guān)注 寫Vue有很長一段時(shí)間了，除了常規(guī)的業(yè)務(wù)開發(fā)之外，也應(yīng)該思考和反思一下封裝組件的正確方式。以彈窗組件為例，一種實(shí)現(xiàn)是在需要模板中引入需要彈窗展示的組件，然后通過一個(gè)flag變量來控制彈窗的組件，在業(yè)務(wù)代碼里面會(huì)充斥著冗余的彈...
摘要：以下內(nèi)容根據(jù)部分速記。同時(shí)，需要在父組件標(biāo)簽中添加這個(gè)屬性，該屬性才能傳遞到子組件內(nèi)。把父組件傳遞的數(shù)據(jù)當(dāng)做子組件的初始值。 以下內(nèi)容根據(jù)Vue.js Guide Essentials部分速記。 不含動(dòng)畫/mixin/SSR/路由/狀態(tài)管理等部分. Introduction 建議閱讀原文 https://vuejs.org/v2/guide/in... 什么是Vue 開始 聲明式...
摘要：假如以的作用域鏈作為類比，組件提供的對(duì)象其實(shí)就好比一個(gè)提供給子組件訪問的作用域，而對(duì)象的屬性可以看成作用域上的活動(dòng)對(duì)象。所以，我借鑒了作用域鏈的思路，把當(dāng)成是組件的作用域來使用。 前言 Context被翻譯為上下文，在編程領(lǐng)域，這是一個(gè)經(jīng)常會(huì)接觸到的概念，React中也有。 在React的官方文檔中，Context被歸類為高級(jí)部分(Advanced)，屬于React的高級(jí)API，但官方...
閱讀 3302·2023-04-26 01:31
閱讀 1922·2023-04-25 22:08
閱讀 3512·2021-09-01 11:42
閱讀 2857·2019-08-30 12:58
閱讀 2212·2019-08-29 18:31
閱讀 2462·2019-08-29 17:18
閱讀 3092·2019-08-29 13:01
閱讀 2580·2019-08-28 18:22
