iview table-Render函数总结

公式

h('elementName',{allProperties},children)

Des：

1. h: createElement
2. elementName： 元素（例：div）|| 组件（例：Button）
3. allProperties：style:{行内样式} || class:{类} || attrs：{html上的属性} || domProps:{原生dom元素属性} props：{给组件传值} || slot:string-组件插槽 || on:{原生事件 && 组件自定义事件} || nativeOn:{类比vue .native}
4. children:String || [h('E',P,C)...]

案例

Eg: 简单：

render: (h, params) => {
    return h('div', 'pwd:whos your daddy');
}
//You will get : <div>pwd:whos your daddy</div>

render: (h, params) => {
//do your logic
    const p1Content = 'lisa and Jackson Wang'
    return h('div', [
       h('p','lisa and LV'),
       h('p',p1Content)
    ]);
}

综合案例：

// 在iview table中
columns: [
     {
          title: "Lisa信息展示",
          key: "lisaInfo",
          width: 240,
          align: "center",
          resizable: true,
          fixed: "left",
          render(h, params) {
            // console.log('params',params);
            const { column, row, index } = params;
            // 注意，在data 函数外面，将this赋值给_vue，否则this为params参数
            // console.log('_vue',_vue);
            // 数据逻辑处理
            const lisaFans = ["白茜妍", "白沐妍", "白舒雅", "白沐清", "白茜瑶"];
            // active the first fans
            const eleFansLi = lisaFans.map((item, fansIndex) => {
              return h(
                "li",
                {
                  class: {
                    active: fansIndex === index
                  },
                  style: { color: fansIndex === index ? "white" : "#ccc" }
                },
                "fansId:" + fansIndex + " name:" + item
              );
            });
        
            return h("div", [
              h(
                "div",

                {
                  style: {
                    color: "#2d8cf0",
                    fontSize: "14px"
                  },
                  class: {
                    lisaInfo: true
                  },
                  attrs: {
                    id: "lisaNum" + index
                  },
                  props: {
                    type: "primary"
                  }
                },
                [
                  h(
                    "Tooltip",
                    {
                      attrs: {
                        placement: "top",
                        transfer: true
                      }
                    },
                    [
                      h("span", row.name),
                      h(
                        "ul",
                        {
                          slot: "content"
                        },
                        eleFansLi
                      )
                    ]
                  ),
                  h(
                    "Button",
                    {
                      props: {
                        type: "primary",
                        size: "small"
                      },
                      style: {
                        marginLeft: "5px"
                      },
                      on: {
                        click: () => {
                          _vue.$Message.info(row.name);
                        }
                      }
                    },
                    // 注意 如果 直接使用组件不行的话，需要加上resolveComponent('Icon')
                    [h("Icon", { props: { type: "ios-eye" } })]
                  )
                ]
              )
            ]);
          }
        },
]