element-ui の tree コンポーネントでノードのレンダリングをカスタマイズする

フロントエンド Vue.js element-ui

かなりマイナーなネタですが、element-ui の tree コンポーネントで表示されるノードをカスタマイズしてみたいと思います。

環境

  • Vue.js : v2.4.4
  • element-ui : v1.4.6

コード

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui@1.4.6/lib/theme-default/index.css">
</head>
<body>
  <div id="app">
    <el-tree
      node-key="id"
      default-expand-all
      :data="table"
      :render-content="renderContent"
      :props="defaultProps">
    </el-tree>
  </div>
</body>
  <!-- import Vue before Element -->
  <script src="https://unpkg.com/vue@2.4.4/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui@1.4.6/lib/index.js"></script>
  <script src="./script.js"></script>
  <script>
  </script>
</html>

JavaScript

new Vue({
  el: '#app',
  data: function() {
    return {
      table : [
        {
          id: 1,
          label: "Level one 1",
          children: [
            {
              id: 2,
              label: "Level two 1"
            },
            {
              id: 3,
              label: "Level two 2",
              children: [
                {
                  id: 5,
                  label: "Level three 1"
                },
                {
                  id: 6,
                  label: "Level three 2"
                },
                {
                  id: 7,
                  label: "Level three 3"
                },
              ]
            },
            {
              id: 4,
              label: "Level two 3"
            },
          ]
        },
      ],
      defaultProps: {
        children: "children",
        label: "label"
      },
      renderContent(h, { node, data, store }){
        console.log(h);
        return h("span", [
          h("span", node.label),
          h("span", { attrs: { style: "float: right; margin-right: 20px;" } }, [
            h("el-button", { attrs: { type: "primary", size: "mini" } }, "button")
          ])
        ]);
      }
    }
  }
})

https://jsfiddle.net/jxc0m2n6/1/

el-tree の :render-content で各ノードのレンダリングを行う関数(renderContent)を指定することが出来ます。
element-ui のサンプルコードでは renderContent 内で JSX っぽい記述を行っていたのですが、上記のコードでは生JSで記述しています。
書き方とかはまあこんな感じになりますよ、と（生 JS だと hyperscript っぽい記述？よくわかってない…

参照