vue实现树形结构样式和功能的实例代码

一、主要运用元素封装的控件并封装成组件运用，如图所示

代码如图所示：

下面是子组件的代码：

模板ul class=' l _ tree ' Li class=' l _ tree _ branch ' v-for=' model '中的项目：键=' item。id ' div class=' l _ tree _ click '按钮类型=' button ' class=' l _ tree _ children _ BTN ' v-if=' item。children ' @ click=' toggle(item)' {！项目。显示？-' : ' ' } }/button span class=' l _ folder ' @ click=' click size(item。id)' : class=' current===item。身份证？当前' : '当前大小' ' { { item。name } }/span/div ew-tree v-show='！项目。显示“:型号=”项目。children ' : current=' current ' @ change current '/ew-tree/Li/ul/template script export default { name : ' EwTree }，prop 3360 { model : { type : Array，default() { return [] }，current: { type: String，default: ' ' }，methods 3333333: { toggle(item){ console $ set(this . model[idx]，' show '，item.show) }，单击大小(id) { console.log(1，id)这个.$emit('change '，id) }，change current(id){ this。单击size(id)} }，mounted(){ }/script style lang=' less '作用域* { box-size :边框-box；保证金： 0；padd : 0；}*:before，* : before { box-size : border-box；}ul、李{列表式：无；}.当前{ color: #e9c309！重要}。l _ tree _ container {宽度： 100%；高度： 100%;盒影： 0 3px # CCCmargin: 13px相对位置：}.l _ tree { width : calc(100%)；左衬垫left: 15px}。l _ tree _ branch {宽度： 100%；高度： 100%;显示器：块；padding: 13px相对位置：}.l _树_枝l _ tree _ children _ BTN { width : 12px；高度： 12px背景色： # 515 a68font-size : 8px文本对齐：中心；color: # bbbec1outline:无；边框： 0；光标：指针；border: 1px固体# bbbec1线高： 11px左边距left : 5px } ul . l _ tree : before在{内容： }之前；边框-左侧： 1px虚线# 999999;高度： calc(100%-24px)；绝对位置：left: 10pxtop: 0px }。l_tree，l _ tree _ branch {位置：相对；}.{内容： }之后的l _ tree _ branch:after宽度： 18px高度： 0;边框-底部： 1px虚线# bbbec1绝对位置：右： calc(100%-10px)；top : 24 pxleft :-5px；}.l _ tree _容器。之前的l _ tree :{显示：无}之后的l _ tree _容器。l _树。l _ tree _ branch :}.l _ folder { font-size :11 px左边距left : 5pxdisplay : inline color : # bbbec 1 cursor :指针；}/样式主要难点是：当前传值问题，所以目前的绑定在父组件

父组件中的值和方法：

当然在运行新公共管理时是需要安装新公共管理安装ewtree -S，实现组件化

最终效果如下：

总结

以上所述是小编给大家介绍的某视频剪辑软件实现树形结构样式和功能的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！