iview表单render使用

使用：

<Table border ref="selection" :columns="columns" :data="listData" :loading="false"></Table>
复制代码

设置：

columns: [
    {
      type: 'selection',
      width: 60,
      align: 'center'
    },
    {
      title: '排序值',
      key: 'sortOrder',
      align: 'center'
    },
    {
      title: '品牌链接',
      key: 'siteUrl',
      align: 'center',
      render: (h, params) => {
        return h('a', {
          attrs: {
            href: params.row.siteUrl,
          },
          class:{
            siteUrl: true,
          }
        }, params.row.siteUrl);
      }
    },
    {
      title: '操作',
      align: 'center',
      render: (h, params) => {
        let row = params.row;
        return h('div', [
          h('Button', {
            props: {
              type: 'ghost',
              size: 'small'
            },
            style: {
              marginRight: '5px'
            },
            on: {
              click: () => {
                this.toCheckDetails(row.id);
              }
            }
          }, '查看'),
          h('Button', {
            props: {
              type: 'ghost',
              size: 'small'
            },
            style: {
              marginRight: '5px'
            },
            on: {
              click: () => {
                this.toEdit(row.id);
              }
            }
          }, '编辑')
        ]);
      }
    }
  ]
复制代码

属性大全：

render: (h, params) {//params是一个对象，包含 row、column 和index，分别指当前行数据，当前列数据，当前行索引
  return h('div', {
    props: { // Component props
      msg: 'hi',
    },
    
    attrs: { // normal HTML attributes
      id: 'foo'
    },
    
    domProps: { // DOM props
      innerHTML: 'bar'
    },
    
    on: { // Event handlers
      click: this.clickHandler
    },
    // For components only. Allows you to listen to native events, rather than events emitted from the component using vm.$emit.
    nativeOn: {
      click: this.nativeClickHandler
    },
    
    class: { // class is a special module, same API as `v-bind:class`
      foo: true,
      bar: false
    },
    
    style: { // style is also same as `v-bind:style`
      color: 'red',
      fontSize: '14px'
    },
    // other special top-level properties
    key: 'key',
    ref: 'ref',
    // assign the `ref` is used on elements/components with v-for
    refInFor: true,
    slot: 'slot'
  })
}
复制代码

table组件input值的绑定和获取： 1、render函数中不能直接使用v-model； 2、解决办法：

render: (h, {row}) => {
    return h('Input', {
      props: {
        clearable: true,
        placeholder: '标签编号',
        value: row.tagCode,
      },
      on: {
        input: (val) => {
          row.tagCode = val;
        }
      }
    });
  }
复制代码