iview render 数据不显示也没报错

Question

<div class="device-table-list">
    <Table stripe :columns="columns" :data="getTableData(currentPage)" @on-row-click="markerTap($event)" :disabled-hover="true"></Table>
</div>

columns: [
        {
          title: "设施编号",
          align: "center",
          key: "sn",
          width:110,
        },
        {
          title: "设施名称",
          align: "center",
          key: "alias",
          width:160,
        },
        {
          title: "设施工艺",
          align: "center",
          key: "devtec",
          width:140,
        },
        {
          title: "设施处理量",
          align: "center",
          key: "devsize",
          width:110,
        },
        {
          title: "能耗",
          align: "center",
          key: "sum_energy",
          width:90,
        },
        {
          title: "流量",
          align: "center",
          key: "sum_flow",
          width:90,
        },
        {
          title: "状态",
          key: "monitor_object_state",
          align: "center",
          width:90,
          render: (h, params) => {
            if(params.row.monitor_object_state==1 || params.row.monitor_object_state==2){
              return "正常"
            }else if (params.row.monitor_object_state==3){
              return "异常"
            }else {
              return "离线"
            }
            console.log(monitor_object_state);
          }
        },
        {
          title: "操作",
          align: "center",
          key: "ckxq",
          render: (h, params) => {
            return params.row.ckxq = "查看详情";
          }

        },
      ],

这样写不显示也不报错，实在找不出原因了。
或者有没有别的办法能够显示啊

Answer 1

兄dei，render函数的作用是创建虚拟dom，你这个返回值肯定是不行的啦。返回值一定是 return h(html标签, 属性对象(可省略)[Object], 子节点(可省略)[String|Array])。你先试试最简单的render('div', '详情')，这个会在对应列渲染出一个“详情”div。

Answer 2

         render: (h, params) => {
            if(params.row.monitor_object_state==1 || params.row.monitor_object_state==2){
             return h('span', "正常")
            }else if (params.row.monitor_object_state==3){
              //return "异常"
              return h('span', "异常")
            }else {
              //return "离线"
              return h('span', "离线")
            }
            console.log(monitor_object_state);
          }

以前按注释的内容是可以直接显示的
然后现在要改成这样才会显示也不知道是什么问题
反正是解决了

Answer 3

render 返回的应该是一个虚拟 DOM 对象

Answer 4

测试可以显示

{
              title: "状态",
              key: "monitor_object_state",
              align: "center",
              width:90,
              render: (h, params) => {
                let value = ''
                if(params.row.monitor_object_state == 1 || params.row.monitor_object_state==2){
                  value = "正常"
                }else if (params.row.monitor_object_state==3){
                  value = "异常"
                }else {
                  value = "离线"
                }
                return h('div',value)
              }
            },
            {
              title: "操作",
              align: "center",
              key: "ckxq",
              render: (h, params) => {
                return h('div',"查看详情");
              }
            },