English | 中文
🌳 A Vue component to display tree chart
Vue3.x version is here
npm i vue-tree-chart --savein template:
<TreeChart :json="treeData" />in script:
import TreeChart from "vue-tree-chart"; export default { components: { TreeChart }, data() { return { treeData: { ... } } } ...Component data to support those field：
- name[String] to display a node name - image_url[String] to display a node image - children[Array] node`s children - mate[Array] node`s mate - class[Array] node`s class - extend[Boolean] show/hide node`s children, default True Example：
{ name: 'root', image_url: "https://static.refined-x.com/avat.jpg", class: ["rootNode"], children: [ { name: 'children1', image_url: "https://static.refined-x.com/avat1.jpg" }, { name: 'children2', image_url: "https://static.refined-x.com/avat2.jpg", mate: [{ name: 'mate', image_url: "https://static.refined-x.com/avat3.jpg" }], children: [ { name: 'grandchild', image_url: "https://static.refined-x.com/avat.jpg" }, { name: 'grandchild2', image_url: "https://static.refined-x.com/avat1.jpg" }, { name: 'grandchild3', image_url: "https://static.refined-x.com/avat2.jpg" } ] }, { name: 'children3', image_url: "https://static.refined-x.com/avat.jpg" } ] }Click on the node triggered, receive the current node data as a parameter
npm run servenpm run build-bundleCopyright (c) 2017-present, 前端路上