問題描述

使用iview-ui的Table組件，通過JSX渲染表格的操作列，但是綁定按鈕點擊事件時，報錯：
vue.esm.js?efeb:591 [Vue warn]: Invalid handler for event "click": got undefined

問題出現(xiàn)的環(huán)境背景及自己嘗試過哪些方法

• 項目.babelrc已經(jīng)配置好JSX的支持，組件都能渲染出來
• 查詢Vue官方文檔和JSX的Git文檔說明，確認事件綁定是沒問題的

https://cn.vuejs.org/v2/guide...
https://www.cnblogs.com/wenst...
https://github.com/vuejs/babe...

相關(guān)代碼

• vue組件

<template>
    <div>
        <div>
            <h4 class="font-weight-bold py-3 mb-4">數(shù)據(jù)源管理</h4>
            <p> This page is an example of basic layout. For more options use
                <strong>Vue starter template generator</strong> in the docs.</p>
        </div>
        <b-card header="數(shù)據(jù)源列表" header-tag="h6" class="mb-4">
            <Table stripe border :columns="table.columns" :data="table.dataList"></Table>
        </b-card>
    </div>
</template>

<script>
import iView from 'iview'
Vue.use(iView)

export default {
    name: "ReportIndex",
    data() {
        return {
            table: {
                showIndex: false,
                dataList: [
                    {
                        origin_name: "企查查",
                        quota: 1000,
                        total: 99999
                    },
                    {
                        origin_name: "工商信息查詢",
                        quota: 1000,
                        total: 99999
                    },
                    {
                        origin_name: "征信數(shù)據(jù)查詢",
                        quota: 1000,
                        total: 99999
                    }
                ],
                columns: [
                    {
                        title: "數(shù)據(jù)源",
                        key: "origin_name"
                    },
                    {
                        title: "調(diào)用配額",
                        key: "quota"
                    },
                    {
                        title: "累積調(diào)用次數(shù)",
                        key: "total"
                    },
                    {
                        title: "操作",
                        render (h) {
                            return (
                                <div>
                                    <i-button type="primary" size="small" class="mr-2" on-click={this.goConsole}>查看詳情</i-button>
                                    <i-switch>
                                        <span slot="open">開</span>
                                        <span slot="close">關(guān)</span>
                                    </i-switch>
                                </div>
                            )
                        }
                    }
                ]
            }
        };
    },
    created() {},
    methods:{
        goConsole: function(){
            console.log(123)
        }
    }
};
</script>

你期待的結(jié)果是什么？實際看到的錯誤信息又是什么？