vue中render函数使用-js开发中需要用render来创建HTML

最近开发vue过程中，在js处理过程中需要显示页面，并且需要渲染多个页面的组件，这时候得用render函数

{
          title: "标签",
          width: 400,
          render: (h, params) => {
            let tag = params.row.tag_content_list;
            let id = params.row.id;
            let input_tag ;
            return h("div", [
              tag.map(function (items,index){
                return h("h-tag", {props: {color: "yellow",closable:"true"},
                  on:{
                    'on-close':(event)=>{
                      // console.info("123"+items.id);
                      this.delTag(items.id);
                    }
                  }
                },items.tag_content)
              }),
              h("Button", {props: {icon:"ios-plus-empty",type:"dashed",size:"small"},
                on:{click:()=>{
                // console.info(column_id)
                    this.$hMsgBox.confirm({
                      title: '标签管理',
                      render: (h) => {
                        return h('Input', {
                          props: {
                            autofocus: true,
                            placeholder: '请输入标签内容...'
                          },
                          on: {
                            input: (val) => {
                              input_tag = val;
                            }
                          },
                        })
                      },
                      onOk: () => {
                        //新增标签接口调用
                        // this.$hMessage.info('点击了确定'+id+input_tag);
                        this.addTag(id,input_tag);
                      },
                    });

                  }
              }}, "添加标签")
            ]);
          }
        }

render 函数传入两个参数，第一个是 h，第二个是对象，包含 row、column 和 index，分别指当前单元格数据，当前列数据（columns内列数据），当前是第几行。

用法：

render: (h, params) => {

return h("div", [

tag.map(function (items,index){

map函数可以作为获取的多个对象之后来循环使用，循环创建多个tag

其中

return h("h-tag", {props: {color: "yellow",closable:"true"},

使用中有以下几个参数

props  属性设置

on      事件设置，以下是tag标签的关闭事件

on:{
  'on-close':(event)=>{
    // console.info("123"+items.id);
    this.delTag(items.id);
  }

还有其他配置

         'class':{ 
            show:true, 
            hide:false, 
          }, 
          style:{ 
            width:'200px', 
            height:'400px', 
            background:'red', 
          }, 
          attrs:{ 
            name:'h-ex', 
            id:'h-id'
          },