使用render實現(xiàn)v-model與多個slot分發(fā)

LeexMuller 發(fā)布于2019-08-22 16:41 / 3138人閱讀

摘要：使用函數(shù)實現(xiàn)表格與表單之間的雙向綁定以及表格中使用分發(fā)多個，分發(fā)不同的內(nèi)容。主要思路通過給表單組件的進行賦值，之后通過等元素監(jiān)聽事件，進行取值，然后通過表格當(dāng)前行索引對表格相應(yīng)元素進行賦值。

使用render函數(shù)實現(xiàn)表格與form表單之間的雙向綁定以及表格中使用slot分發(fā)（多個slot，分發(fā)不同的內(nèi)容）。

主要思路

通過props給表單組件的value進行賦值，之后通過change、blur等元素監(jiān)聽事件，進行取值，然后通過表格當(dāng)前行索引對表格相應(yīng)元素進行賦值。這樣就完成了一個數(shù)據(jù)的雙向綁定了。

我這邊使用的是ivewUI組件庫

在表格中對一個input實現(xiàn)雙向綁定

{
  title: "姓名",
  key: "name",
  render: (h, params) => {
    let self = this;
    return h("div", [
      h("Input", {
        props: {
          placeholder: "請輸入....",
          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"
        }
      },"請輸入你的名字....")
    ]);
  }
}

在表格中對一個select實現(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)
      })
    )
  }
}

在表格中對一個switch實現(xiàn)雙向綁定，外加slot

{
  title: "switch開關(guān)slot實現(xiàn)",
  key: "switchSlot", 
  renderHeader(h, params) {
    return h("Tooltip", {
      props: {
        placement: "right",
        content: "switch開關(guān)"
      }
    },"switch開關(guān)slot實現(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;
        }
      }
    // 這樣我們就可以在表格中完美的實現(xiàn)多個slot分發(fā)了
    },switchList.map(item => {
      return h("span",{
        slot:item.slot
      },item.name)
    }))
  }
}

注意

對表格數(shù)據(jù)進行雙向綁定時，不建議直接更改源數(shù)據(jù)源，可以copy出一份臨時數(shù)據(jù)源，在做相應(yīng)修改操作時對臨時數(shù)據(jù)源進行更改，這樣可以大大減少對dom的渲染，在需要的時候再將臨時數(shù)據(jù)源提交到主數(shù)據(jù)源就可以了。

結(jié)尾

如果覺得render寫起來很煩的話，可以使用jsx，會大大減少代碼量0.0
源碼地址