vue中render函数使用

需要在创建时间内提示 “催办”  

然而加载数据是直接通过table组件的

  <div style="width:98%;padding-top:1.6rem;">
      <lzy-table
        :columns="columns"
        :data="info.data.records"
      />
    </div>

那如何给符合条件的那一项数据加上“催办”标签呢？

         {
            title: "创建时间",
            key: "createTime",
            style: "width:15%",
          }

可以用到render函数（渲染函数）

        {
            title: "创建时间",
            key: "createTime",
            style: "width:15%",
            render: (h, params) => {
              return h('table',{
                style:{
                  width: '80%'
                }
              }, [
              h('td',{
                style:{
                  width: '60%',
                  border: "0",
                  rules: "none",
                  frame: "void"
                }
              },'2019-11-26'),
              h('td',{
                class:'radius',
                style:{
                  border: '1px solid #217ec9',
                  width: '40%'
                }
                },'催办')])
            }
          }

 render: (h, params) 的用法：

它所代表得含义是：render:(h,params) => {
return h(" 定义的元素 “，{ 元素的性质 }，” 元素的内容"/[元素的内容]) }

         {
            title: "创建时间",
            key: "createTime",
            style: "width:15%",
            render: (h, params) => {
              return h('div',{ style:{ color: 'red'} },'2019-11-26')
            }
          }

也可以实现嵌套渲染

就是将 ‘元素的内容’ 改成集合 [ ]

 可以在元素的内容里继续嵌套，我这里是将第一层第一层定义一个table，然后两个td

需要注意的是，写style的时候例如 text-align，border-radius（可能带“-”会报错）等会报错，然后我就写在了class里面

然后效果如下：