運用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
源碼地點