修改antd tree组件，使其子类横向排列。

<template>
  <div>
    <a-tree-select
      dropdownClassName="selecttree"
      v-model="value"
      treeDefaultExpandAll="true"
      style="width: 100%"
      :tree-data="treeData"
      tree-checkable
      :show-checked-strategy="SHOW_PARENT"
      search-placeholder="Please select"
    />
  </div>
</template>

<script>
import {
     TreeSelect } from "ant-design-vue";
const SHOW_PARENT = TreeSelect.SHOW_PARENT;
const treeData = [
  {
    
    title: "你好",
    value: "0-0",
    key: "0-0",
    children: [
      {
    
        title: "你好开",
        value: "0-0-0",
        key: "0-0-0",
      },
      {
    
        title: "你好关",
        value: "0-0-1",
        key: "0-0-1",
      },
    ],
  },
  {
    
    title: "Node2",
    value: "0-1",
    key: "0-1",
    children: [
      {
    
        title: "Child Node3",
        value: "0-1-0",
        key: "0-1-0",
      },
      {
    
        title: "Child Node4",
        value: "0-1-1",
        key: "0-1-1",
      },
      {
    
        title: "Child Node5",
        value: "0-1-2",
        key: "0-1-2",
      },
    ],
  },
];
export default {
    
  data() {
    
    return {
    
      value: ["0-0-0"],
      treeData,
      SHOW_PARENT,
    };
  },
};
</script> 

<style>
/* lang="less" */
/* 这里不用scoped 即可修改子类的样式 但是防止影响全局样式 前面可以加一个其他类名 */
.selecttree .ant-select-tree li ul {
    
  display: flex;
}
</style>