代碼如下：

    computed: {
        columns: function () {
            let columns = [];
            switch (this.tab) {
                case "1":
                    return [
                        {
                            label: "name",
                            prop: "name",
                            width: 260,
                        },
                        {
                            label: "gender",
                            prop: "gender",
                            formatter: (row, column, cellValue, index) => {
                                const value =
                                    cellValue &&
                                    ["男", "女"][cellValue];
                                const stateClass = [
                                    "status_error",
                                    "status_success",
                                ][cellValue];
                                return (
                                    <span class={status_success}>{value}</span>
                                );
                            },
                        },
                    ];
                    break;        
                default:
                    columns = [
                        {
                            label: "company",
                            prop: "company",
                            width: 260,
                        },
                        {
                            label: "status ",
                            prop: "status",
                            formatter: (row, column, cellValue, index) => {
                                const value =
                                    cellValue &&
                                    ["經(jīng)營中", "已關(guān)閉"][cellValue];
                                const stateClass = [
                                     "status_success",
                                    "status_warning"
                                ][cellValue];
                                return  <span class={stateClass}>{value}</span>;
                            },
                        },
                    ];
                    break;
            }
            return columns;
        },
    },

h未定義？h是啥？其實(shí)就是createElement函數(shù)的別名，具體可以看這里：vue中render: h => h(App)的理解。

另外一個(gè)頁面columns formatter也是這么寫的，沒問題呀。

等下，不能createElement？是不是this沒有綁定上？果然，在<span>標(biāo)簽的時(shí)候就報(bào)錯(cuò)了。

對比了另一個(gè)正確展示的頁面，發(fā)現(xiàn)columns是寫在data里的，而這組件columns需要根據(jù)props動(dòng)態(tài)生成，就寫在computed里面了。難道是這個(gè)影響了？提到data里試一下吧。

一試真的嚇一跳，oooooook了，頁面展示正確了?。。。?！

后來終于找到了原因：data是成員函數(shù)，所以會(huì)把h注入，而像methods,computed這些都只是對象，不會(huì)注入h。具體解釋見：ReferenceError: h is not defined。

h is not defined

但是,如果vue用的是3.4以上的版本(本項(xiàng)目中用的是2.6.12)，我一開始的寫法就沒問題，因?yàn)?code>method and getter 已經(jīng)自動(dòng)注入h了。詳情見 h-auto-injection。

auto-injection