vue樹形控件tree的使用方法
更新時間:2022年03月30日 09:23:51 作者:牽手北京99
這篇文章主要為大家詳細(xì)介紹了vue樹形控件tree的使用方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了vue樹形控件tree使用的具體代碼,供大家參考,具體內(nèi)容如下
<template> ? <div class="hello tree-container"> ? ? <el-tree ? ? ? :data="data" ? ? ? show-checkbox ? ? ? node-key="id" ? ? ? class="tree" ? ? ? :allow-drop="allowDrop" ? ? ? :props="defaultProps" ? ? ? :default-expanded-keys="[2, 3]" ? ? ? :default-checked-keys="[5]"> ? ? </el-tree> ? </div> </template>
<script> export default { ? name: 'HelloWorld', ? data () { ? ? return { ? ? ? msg: 'Welcome to Your Vue.js App|', ? ? ? data: [{ ? ? ? ? ? id: 1, ? ? ? ? ? label: '一級 2', ? ? ? ? ? children: [{ ? ? ? ? ? ? id: 3, ? ? ? ? ? ? label: '二級 2-1', ? ? ? ? ? ? children: [{ ? ? ? ? ? ? ? id: 4, ? ? ? ? ? ? ? label: '三級 3-1-1' ? ? ? ? ? ? }, { ? ? ? ? ? ? ? id: 5, ? ? ? ? ? ? ? label: '三級 3-1-2', ? ? ? ? ? ? ? disabled: true ? ? ? ? ? ? }] ? ? ? ? ? }, { ? ? ? ? ? ? id: 2, ? ? ? ? ? ? label: '二級 2-2', ? ? ? ? ? ? disabled: true, ? ? ? ? ? ? children: [{ ? ? ? ? ? ? ? id: 6, ? ? ? ? ? ? ? label: '三級 3-2-1' ? ? ? ? ? ? }, { ? ? ? ? ? ? ? id: 7, ? ? ? ? ? ? ? label: '三級 3-2-2', ? ? ? ? ? ? ? disabled: true, ? ? ? ? ? ? ? children: [{ ? ? ? ? ? ? ? ? id: 8, ? ? ? ? ? ? ? ? label: '二級 8-1', ? ? ? ? ? ? ? ? children: [{ ? ? ? ? ? ? ? ? ? id: 9, ? ? ? ? ? ? ? ? ? label: '三級 3-1-1' ? ? ? ? ? ? ? ? }, { ? ? ? ? ? ? ? ? ? id: 10, ? ? ? ? ? ? ? ? ? label: '三級 3-1-2', ? ? ? ? ? ? ? ? ? disabled: true ? ? ? ? ? ? ? ? }] ? ? ? ? ? ? ? }] ? ? ? ? ? ? }] ? ? ? ? ? }] ? ? ? ? }], ? ? ? ? defaultProps: { ? ? ? ? ? // 用于修改節(jié)點指定標(biāo)簽的屬性值 ? ? ? ? ? children: 'children', ? ? ? ? ? label: 'label' ? ? ? ? } ? ? } ? }, ? methods: { ? ? allowDrop(draggingNode, dropNode, type) { ? ? ? ? if (draggingNode.parrent.id=== dropNode.parrent.id) { ? ? ? ? ? return type !== 'next'; ? ? ? ? } else { ? ? ? ? ? return true; ? ? ? ? } ? ? ? } ? } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> /* 樹形結(jié)構(gòu)節(jié)點添加連線 */ .tree /deep/ .el-tree-node { ? position: relative; ? padding-left: 16px; } ? .tree /deep/ .el-tree-node__children { ? padding-left: 12px; } ? .tree /deep/ .el-tree-node :last-child:before { ? height: 50px; } .tree /deep/ > .el-tree-node:before { ? border: none !important; } .tree /deep/ .el-tree > .el-tree-node:before { ? border-left: none; } ? .tree-container /deep/ .el-tree > .el-tree-node:after { ? border-top: none; } ? .tree /deep/ .el-tree-node:before { ? content: ""; ? left: -4px; ? position: absolute; ? right: auto; ? border-width: 1px; } ? .tree /deep/ .el-tree-node:after { ? content: ""; ? left: -4px; ? position: absolute; ? right: auto; ? border-width: 1px; } .tree /deep/ .el-tree-node__expand-icon.is-leaf { ? display: none; } ? .tree /deep/ .el-tree-node:before { ? border-left: 1px solid #b8b9bb; ? bottom: 0px; ? height: 100%; ? top: -26px; ? width: 1px; } ? .tree /deep/ .el-tree-node:after { ? border-top: 1px solid #b8b9bb; ? height: 20px; ? top: 24px; ? width: 20px; } .tree /deep/ .el-tree-node__expand-icon{ ? display: none; } .tree /deep/ .el-tree-node__content{ ? padding-left: 0 !important; } .tree /deep/ .el-tree-node__content { ? height: 18px;padding-top: 16px; } </style>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Vue render函數(shù)實戰(zhàn)之實現(xiàn)tabs選項卡組件
這篇文章主要介紹了Vue render函數(shù)實戰(zhàn)之實現(xiàn)tabs選項卡組件的相關(guān)知識,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2019-04-04Ant design vue中的聯(lián)動選擇取消操作
這篇文章主要介紹了Ant design vue中的聯(lián)動選擇取消操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10vue+elementui實現(xiàn)動態(tài)控制表格列的顯示和隱藏
這篇文章主要介紹了vue+elementui實現(xiàn)動態(tài)控制表格列的顯示和隱藏,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-04-04淺談Vue2.0中v-for迭代語法的變化(key、index)
下面小編就為大家分享一篇淺談Vue2.0中v-for迭代語法的變化(key、index),具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03iview+vue實現(xiàn)導(dǎo)入EXCEL預(yù)覽功能
這篇文章主要為大家詳細(xì)介紹了iview+vue實現(xiàn)導(dǎo)入EXCEL預(yù)覽功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-07-07