<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>
修改antd tree组件,使其子类横向排列。
最新推荐文章于 2024-03-21 16:20:48 发布