render 函數渲染表格的當前數據列使用，及渲染表格中的Tooltip 的實例

render 函數渲染表格的當前數據列使用

實例1：

columns7: [
     // 實例1：代碼段
      {
          title: '編號',
          align: 'center',
          width: 90,
          key: 'No',
          render: (h, params) => {
            return h('p', {
              style: 'color:#2D8CF0;font-size:14px;cursor: pointer;',
              on: {
                'click': () => {
                  this.GotoPage(params.row)
                }
              }
            }, params.row.No)
          }
        },
        // 實例2代碼段： 未寫成組件前    
        {
          title: '個數',
          align: 'center',
          width: 100,
          key: 'popupArr',
          render: (h, params) => {
            let arrData = params.row.SumArr
            let rowData = []
            // 彈窗內容處理
            let popupCon = []
            if (params.row.popupArr.length){
              popupCon = [
                h('p', {}, `個數: ${params.row.popupArr.length}`),
                h('p', {}, [
                  h('span', {class: 'pop-span1'}, '金額'),
                  h('span', {class: 'pop-span3'}, '號碼')
                ])
              ]
              params.row.popupArr.map(items => {
                let money = null
                money = h('p', {}, [
                  h('span', {class: 'pop-span1'}, `￥${this.numberComma(Number(items.Amount).toFixed(2))}`),
                  h('span', {class: 'pop-span2'}, `${items.Number}`)
                ])
                popupCon.push(money)
              })
            }
            // 外層內容
            arrData.map((item, index) => {
              // 單元格行的內容  
             // on-popper-show 為監聽事件，鼠標移上去請求接口拿數據展示在浮窗中
              let rowsC = null
              let tooltip = []
　　　　　　　　// Tooltip 
              tooltip[0] = h('Tooltip', {
                props: {placement: 'left', 'delay': 700, 'max-width': '600'},
                on: {
                  'on-popper-show': () => {
                    this.PopperShow(h, params)
                  }
                }
              }, [
                h('p', {style: 'min-width: 70px;'}, item.Count),
                h('div', {slot: 'content'}, popupCon)
              ])
              // 小單元格外層框
              if (index + 1 === arrData.length) {
                rowsC = h('p', {
                  style: 'padding:0 0 0 0;height:40px;line-height:40px;'
                }, tooltip)
              } else {
                rowsC = h('p', {
                  style: 'padding:0 0 0 0;height:40px;line-height:40px;border-bottom: 1px solid #E8EAEC;'
                }, tooltip)
              }
              rowData.push(rowsC)
            })
            return h('div', {class: 'countCol'}, rowData)
          }
        },
]

// 方法
methods: {
　PopperShow (h, params) {
   // 請求接口已封裝
     this.$store.dispatch('GetInvoicedInfo', params.row.Id).then((res) => {
　　　　　if (res.Result) {
　　　　　　 this.$nextTick(() => {
　　　　　　    params.row.popupArr = res.Data
　　　　　　   this.$forceUpdate()
　　　　    })
　　     }
    })
　　}
}

　　

實例2：

render： Tooltip 動態獲取浮窗數據的實例

以上代碼我們可以優化下，將浮窗Tooltip寫成公共組件的方式，在render中引入該模板組件：

columns7: [
        {
          title: '個數',
          align: 'center',
          width: 100,
          key: 'popupArr',
          render: (h, params) => {
            let arrData = params.row.SumArr
            let rowData = []// 外層內容
            arrData.map((item, index) => {
              // 單元格行的內容  
             // on-popper-show 為監聽事件，鼠標移上去請求接口拿數據展示在浮窗中
              let rowsC = null
              let tooltip = []
　　　　　　　　// Tooltip 

　　　　　　　　　　 tooltip[0] = h(vInfoTooltip, {

　　　　　　　　　　　　props: {

　　　　　　　　　　　　　　placement: 'left',

　　　　　　　　　　　　　　rowId: params.row.Id,

　　　　　　　　　　　　　　dataNo: item.No

　　　　　　　　　　　　},

　　　　　　　　　　　　slot: 'content'

　　　　　　　　　　}, [

　　　　　　　　　　　　h('p', {

　　　　　　　　　　　　　　style: 'min-width: 70px;',

　　　　　　　　　　　　　　slot: 'infoTooltip'

　　　　　　　　　　　　}, [

　　　　　　　　　　　　　　h('span', {

　　　　　　　　　　　　　　　　style: 'color: rgb(45, 140, 240);cursor: pointer;font-size:14px;',

　　　　　　　　　　　　　　　　slot: 'content'

　　　　　　　　　　　　　　}, item.Count)

　　　　　　　　　　　　])

　　　　　　　　　　])

　　　　　　　　// 小單元格外層框
              if (index + 1 === arrData.length) {
                rowsC = h('p', {
                  style: 'padding:0 0 0 0;height:40px;line-height:40px;'
                }, tooltip)
              } else {
                rowsC = h('p', {
                  style: 'padding:0 0 0 0;height:40px;line-height:40px;border-bottom: 1px solid #E8EAEC;'
                }, tooltip)
              }
              rowData.push(rowsC)
            })
            return h('div', {class: 'countCol'}, rowData)
          }
        },
 ]

InfoTooltip.vue

<template>
  <div class="InfoTooltip">
    <Tooltip :placement="placement" :delay="700" @on-popper-show="PopperShow" @on-popper-hide="PopperHide" max-width="600">
        <slot name="infoTooltip"></slot>    <!-- 該內容即 鼠標移上去的內容 -->
        <div class="demo-InfoList" slot="content">    <!-- 該div內的內容即為 浮窗的內容 -->
          <p>個數： {{InfoList.length}}</p>
          <p>
            <span class="pop-span1">金額</span>
            <span class="pop-span2">號碼</span>
            <span class="pop-span3">狀態</span>
          </p>
          <p v-for="(items, index) in InfoList" :key="index">
            <span class="pop-span1">￥{{numberComma(Number(items.Amount).toFixed(2))}}</span>
            <span class="pop-span2">{{items.Number}}</span>
            <span class="pop-span3">{{items.Status}}</span>
          </p>
        </div>
    </Tooltip>
  </div>
</template>
<script>
export default {
  name: 'InfoTooltip',
  components: {
  },
  data () {
    return {
      InfoList: []
    }
  },
  props: {
    rowId: String,
    dataNo: String,
    placement: {
      type: String,
      default: 'right-start'
    }
  },
  created () {
  },
  computed: {
  },
  methods: {
    GetPopupArrFn (arrData, dataNo) {
      let obj = {}
      arrData.map(function (item) {
        let timeKey = item.InvoDate.split(' ')[0]
        if (!obj[timeKey]) {
          obj[timeKey] = []
        }
        obj[timeKey].push(item)
      })
      return obj[dataNo]
    },
    PopperHide () {
    },
    PopperShow () {
      this.$store.dispatch('GetInvoicedInfo', this.rowId).then((res) => {
        if (res.Result) {
          this.$nextTick(() => {
            this.InfoList = this.GetPopupArrFn(res.Data, this.dataNo)
          })
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
.demo-InfoList {
  display: inline-table;
  p {
    float: left;
    width: 100%;
    line-height: 22px;
  }
  .pop-span1 {
    width:120px;
    display:inline-block;
  }
  .pop-span2{
    width:200px;
    display:inline-block;
  }
  .pop-span3{
    width:80px;
    display:inline-block;
    text-align:center;
  }
}
</style>

 最后效果即如圖：

鼠標移入小單元格時，動態請求浮窗內容