使用render實現v-model與多個slot分發

使用render函數實現表格與form表單之間的雙向綁定以及表格中使用slot分發（多個slot，分發不一樣的內容）。

主要思路

經過props給表單組件的value進行賦值，以後經過change、blur等元素監聽事件，進行取值，而後經過表格當前行索引對錶格相應元素進行賦值。這樣就完成了一個數據的雙向綁定了。
<!--more-->

<div class="reference">我這邊使用的是 ivewUI組件庫</div>

<!-- 表格代碼 -->
 <Table highlight-row :columns="columns3" border :data="data1" size="small" ref="table"></Table>

在表格中對一個input實現雙向綁定

{
  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實現雙向綁定

{
  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實現雙向綁定，外加slot

{
  title: 'switch開關slot實現',
  key: 'switchSlot', 
  renderHeader(h, params) {
    return h('Tooltip', {
      props: {
        placement: 'right',
        content: 'switch開關'
      }
    },'switch開關slot實現')
  },
  render: (h, params) => {
    let self = this;
    const switchList = [
      {
        slot: 'open',
        name: '打開'
      },
      {
        slot: 'close',
        name: '關閉'
      }
    ]
    return h('i-switch',{
      props: {
        size: 'large',
        value: params.row.switchSlot
      },
      on: {
        'on-change' : (val) =>{
          self.data1[params.index].switchSlot = val;
        }
      }
    // 這樣咱們就能夠在表格中完美的實現多個slot分發了
    },switchList.map(item => {
      return h('span',{
        slot:item.slot
      },item.name)
    }))
  }
}

注意

對錶格數據進行雙向綁定時，不建議直接更改源數據源，能夠copy出一份臨時數據源，在作相應修改操做時對臨時數據源進行更改，這樣能夠大大減小對dom的渲染，在須要的時候再將臨時數據源提交到主數據源就能夠了。

結尾

若是以爲render寫起來很煩的話，能夠使用jsx，會大大減小代碼量0.0
源碼地址