iView 是基于 vue.js 優(yōu)秀的 UI 框架彩匕，使用范圍非常廣泛策幼。博主在使用過(guò)后有種再也離不開(kāi)的感覺(jué)【捂臉】模她。尤其是 Table 組件的 render 函數(shù)链瓦，大大豐富了表格的可擴(kuò)展性发乔。為了更加全面的使用組件的便利性熟妓，在 render 函數(shù)中也經(jīng)常會(huì)嵌套使用到其他組件，不過(guò)文檔并沒(méi)有詳細(xì)的使用指導(dǎo)栏尚，自己在使用的時(shí)候也是經(jīng)過(guò)了一陣摸索起愈，這里就將常用的幾個(gè)記錄一下，權(quán)且當(dāng)作備忘錄译仗，也希望給有需要的人一點(diǎn)指導(dǎo)吧抬虽。

1、Poptip 組件

• 圖示

  Poptip 組件

• 使用

    columns: [
      {
        title: '查看合同',
        width: 120,
        key: 'setPayFeeB2CContractFileVos',
        fixed: 'right',
        render: (h, params) => {
          if (params.row.setPayFeeB2CContractFileVos.length > 0) {
            return h('poptip',{
              style: {
                width: '200px'
              },
              props: {
                trigger:"hover",
                placement: 'bottom',
                // 注意一定要添加該屬性纵菌，否則表格會(huì)遮蓋住氣泡浮框
                transfer: true
              }
            },[
              h('span',{
                style: {
                  color: '#5B70AB',
                  cursor: 'pointer'
                }
              },`已匹配${params.row.setPayFeeB2CContractFileVos.length}份`),
              h('div',{
                slot: 'content'
              },[
                h('ul',[
                  params.row.setPayFeeB2CContractFileVos.map(item => {
                    return h('li',{
                      style: {
                        lineHeight: '36px',
                        cursor: 'pointer'
                      },
                      on: {
                        click: async() => {
                          let data = {
                            contractNo: item.id
                          }
                          let res = await getFiles(qs.stringify(data))
                          if(res.code === 10200 && res.data.data) {
                            window.open(res.data.data)
                          } else {
                            this.$Modal.error({
                              title: '錯(cuò)誤',
                              content: res.message
                            })
                          }
                        }
                      }
                    },item.fileName)
                  })
                ])
              ])
            ])
          } else {
            return h('div','--')
          }
        }
      }
    ]
  

2阐污、Switch 組件

• 圖示

  switch.png

• 使用

    columns: [
      {
        title: "是否啟用",
        key: "status",
        width: 100,
        render: (h, params) => {
          let status = params.row.status === 1 ? true : false;
          let _this = this;
          return h("i-switch", {
            props: {
              // 開(kāi)關(guān)的值
              value: status
            },
            on: {
              "on-change": value => {
                params.row.status = value ? 1 : 0;
                _this.handelSwitch(params.row.status);
              }
            }
          });
        },
        fixed: "right"
      }
    ]
  

3、Input 組件

• 使用

    columns: [
      {
        title: '標(biāo)記金額',
        key: "amount",
        width: 150,
        render: (h, params) => {
          return h('Input',{
            props: {
              // 輸入框值
              value: ''
            },
            on: {
              // 監(jiān)聽(tīng)輸入事件咱圆，賦值
              input: (val) => {
                this.data[params.index].amount = val
              },
              // 焦點(diǎn)事件
              'on-blur':() => {
  
              }
            }
          })
        }
      }
    ]
  

4笛辟、Select 組件

• 使用

    columns: [
      {
        title: '職位',
        key: "position",
        width: 150,
        render: (h, params) => {
          return h('Select',{
            on: {
              // 選中賦值
              'on-change': (val) => {
                 this.data[params.index].position = val
              }
            },
            // 根據(jù)數(shù)據(jù)渲染下拉
            params.row.positionList.map((item) => {
              return h('Option', {
                props: {
                  value: item.value,
                  label: item.name
                }
              })
            })
          })
        }
      }
    ]
  

  以上，列出了幾種常見(jiàn)的在 render 函數(shù)中使用的組件序苏，主要是一些細(xì)節(jié)手幢，根據(jù)自己的業(yè)務(wù)需求，再配合vue.js官方文件關(guān)于渲染函數(shù) & JSX的介紹忱详，就可以融匯貫通的使用了围来。附上文檔鏈接：- 渲染函數(shù) & JSX。當(dāng)然，你也可以使用 Table 組件中的template模板達(dá)到嵌套使用組件的目的监透。我們這里只講使用 render 函數(shù)的方式桶错，就不做過(guò)度的贅述。