render 函数渲染表格的当前数据列使用

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>

最后效果即如图：

鼠标移入小单元格时，动态请求浮窗内容