如何将 zk 树元素的打开/关闭图标放置在树元素的右侧？

Question

我想知道，是否可以在下面的屏幕截图中显示的树单元右侧放置打开/关闭元素？

Answer 1

一种非侵入性的方式是一种基于 CSS 的方法，使用display:flex并定义order图标和一些margin-left调整：

<zk>

  <style>

    .z-treecell:first-child .z-treecell-content {

      display: flex;

    }

    .z-treecell:first-child .z-tree-icon {

      order: 1; /*order it to the right*/

    }

    .z-treecell:first-child .z-tree-icon+.z-treecell-text {

      margin-left: 24px; /*this value might need adjustment based on the theme*/

    }

  </style>

  <tree>

    <treechildren>

      <treeitem label="item 1"/>

      <treeitem label="item 2">

        <treechildren>

          <treeitem label="item 2.1">

            <treechildren>

              <treeitem label="item 2.1.1"/>

            </treechildren>

          </treeitem>

        </treechildren>

      </treeitem>

    </treechildren>

  </tree>

</zk>

这是一个关于 zkfiddle的运行示例，该示例与 zk 7.0.0+兼容，针对 8.5.2.1 进行了优化，带有 iceblue 主题。