vue2 と vue3 の異なる使用法: レンダーヘッダー テーブルでのヘッダー ラッピング

vue2ではユニットとテキストを2行で表示したいのですが、

html部分：
  
  <el-table-column
          label="文字 & (单位)"
          :render-header="renderheader"
          align="center"
          prop="asd"
          key="asd"
        />

js部分：

    //实现table表头换行显示
    renderheader(h, { column, $index }) {
      return h("span", {}, [
        h("span", {}, column.label.split("&")[0]),
        h("br"),
        h("span", {}, column.label.split("&")[1]),
      ]);
    },

これは実現できます。分岐の記号として & を使用しました。他のものに変更することもできます。上下を忘れずに変更してください。

vue3 プロジェクトでもこのセットを使用しましたが、その結果、エラーが発生しました。

 で、公式ドキュメントを確認したところ、このように変更されました

import {h} from "vue";//引入h

//实现table表头换行显示
const renderheader = ({ column }) => {
  return h("span", {}, [
    h("span", {}, column.label.split("&")[0]),
    h("br"),
    h("span", {}, column.label.split("&")[1]),
  ]);
};

これは実現できますが、HTML 部分を設定する必要があることを覚えておく必要があります。

  :render-header="renderheader" このメソッド

          key="" と key と key が異なります。

効果の比較