Ant-design-vue: tsx a-table scopedSlots: { customRender: 'action'} 无效

[paul-wj]

tsx使用table组件 scopedSlots 属性无效

tableColumns: any[] = [

  {title: '用户名称', dataIndex: 'name', align: 'center'},
  {title: '邮箱', dataIndex: 'email', align: 'center'},
  {title: '真实姓名', dataIndex: 'nick', align: 'center'},
  {title: '操作', align: 'center', scopedSlots: { customRender: 'action'}}
];

tableData: any[] = [];

loading: boolean = false;

render(h: CreateElement) {

  return(
    <div class="user-content">
     <a-table bordered  loading={this.loading}  columns={this.tableColumns} dataSource={this.tableData}>
        <a-button  slot="action" slot-scope="text, record">编辑</a-button>
      </a-table>
  </div>
  )
}

[tangjinzhou]

JSX就不要用slot-scope了 直接function
{title: '操作', align: 'center', customRender: (text, record)=><a-button />}

[paul-wj]

@tangjinzhou
直接function就报错了，[Vue warn]: Error in render: "TypeError: h is not a function"
{title: '操作', align: 'center', customRender: (text, record)=><a-button>编辑</a-button>}
好像customRender并没有h: CreateElement 参数,希望能和ant-design-react一样具备render功能

[paul-wj]

已解决

tableColumns: any[] = [

  {title: '用户名称', dataIndex: 'name', align: 'center'},
  {title: '邮箱', dataIndex: 'email', align: 'center'},
  {title: '真实姓名', dataIndex: 'nick', align: 'center'},
  {title: '操作', align: 'center', scopedSlots: { customRender: 'action' }}
];

        bordered
        rowKey={record => record.uid}
        loading={this.loading}
        pagination={{...this.pagination}}
        columns={this.tableColumns}
        dataSource={this.tableData}
        scopedSlots={{action: props => <a-button>编辑</a-button>}}>
      </a-table>

[tangjinzhou]

那你添加个 const h = this.$createElement
如果你的代码在methods, render等中，jsx插件默认会添加这行代码

[paul-wj]

@tangjinzhou 这种方案也可以，谢谢，已解决

tableColumns: any[] = [

  {title: '用户名称', dataIndex: 'name', align: 'center'},
  {title: '邮箱', dataIndex: 'email', align: 'center'},
  {title: '真实姓名', dataIndex: 'nick', align: 'center'},
  {title: '操作', align: 'center', customRender: (text, record) => {
    const h: any = this.$createElement;
    return <a-button>编辑</a-button>;
    }}
];

[SongJuXin]

@tangjinzhou 这种方案也可以，谢谢，已解决

tableColumns: any[] = [

  {title: '用户名称', dataIndex: 'name', align: 'center'},
  {title: '邮箱', dataIndex: 'email', align: 'center'},
  {title: '真实姓名', dataIndex: 'nick', align: 'center'},
  {title: '操作', align: 'center', customRender: (text, record) => {
    const h: any = this.$createElement;
    return <a-button>编辑</a-button>;
    }}
];

const h= this.$createElement;这种方式，如何绑定事件呢？

自问自答
绑定事件和正常jsx绑定事件一样，

{
title:'变量',
dataIndex:'iv',
customRender:(text)=>{
            const h = this.$createElement;
            return (<a  onClick={this.handleShowImgClick.bind(null,text)}>查看 </a>)
       }  
 }

[mseaspring]

我用{title: '操作', align: 'center', customRender: (text, record) => {
const h: any = this.$createElement;
return 编辑;
}} 这种方式怎么报错那？

[nongzhenli]

@tangjinzhou 这种方案也可以，谢谢，已解决

tableColumns: any[] = [

  {title: '用户名称', dataIndex: 'name', align: 'center'},
  {title: '邮箱', dataIndex: 'email', align: 'center'},
  {title: '真实姓名', dataIndex: 'nick', align: 'center'},
  {title: '操作', align: 'center', customRender: (text, record) => {
    const h: any = this.$createElement;
    return <a-button>编辑</a-button>;
    }}
];

你好，请教下！这里的 const h ...貌似没有被调用到呀，起到什么作用呢？

[bhabgs]

JSX就不要用slot-scope了 直接function
{title: '操作', align: 'center', customRender: (text, record)=><a-button />}

我在使用customRender时，提示我 creteElement undefined; 即使加上 const h: any = this.$createElement; 也是错误的。带customRender 有并且需要返回JSX.Element 格式的customRender 需要使用类上的方法进行绑定。

private columns(): any[] {
        [
          ...,
          {
             title: '***',
             dataIndex: 'alert_time',
             customRender: (text: string, record: any) => {
                return <a>{text}</a>;
             },
           }
        ]
      },

[beijinaqie]

我用{title: '操作', align: 'center', customRender: (text, record) => {
const h: any = this.$createElement;
return 编辑;
}} 这种方式怎么报错那？

同样报错，貌似不支持tsx语法？有没有解决方案或者更新版本中解决了这个问题

[SongJuXin]

我用{title: '操作', align: 'center', customRender: (text, record) => {
const h: any = this.$createElement;
return 编辑;
}} 这种方式怎么报错那？

同样报错，貌似不支持tsx语法？有没有解决方案或者更新版本中解决了这个问题

如果仅仅是不支持ts，看懂这段代码的意思，改成js的不就行了。
即const h: any = this.$createElement;改成cosnt h=this.$createElement。

[beijinaqie]

我用{title: '操作', align: 'center', customRender: (text, record) => {
const h: any = this.$createElement;
return 编辑;
}} 这种方式怎么报错那？

同样报错，貌似不支持tsx语法？有没有解决方案或者更新版本中解决了这个问题

如果仅仅是不支持ts，看懂这段代码的意思，改成js的不就行了。
即const h: any = this.$createElement;改成cosnt h=this.$createElement。

不是ts的问题，而是就算加上这个cosnt h=this.$createElement，依然会报错$createElement undefined

[luckyxutao]

customRender里jsx 怎么能得到 vue实例呢？