【VUE】- 樹形視圖

原創 李丽贝-Arielle 2020-06-25 21:08

項目中用到了父子結構嵌套，層級縮進樣式，就想到了組織結構的形式，於是乎就去vue官網查看關於組織結構的展現形式的說明及實例，在官網的基礎上進行實踐，在此梳理總結；

首先看一下我們的UI界面：
在這裏插入圖片描述
樹形視圖其實也是父子組件的操作，接下來根據UI頁面進行靜態頁面設計

接下來根據UI頁面進行靜態頁面設計
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

pywebview cef打包 到達斷點的彌補辦法

cef 是chrome內核，支持vue，但是其它內核不支持，所以項目選用cef來做引擎，但是打包運行遇到了一個問題，報錯爲 已到達斷點 [0812/112825.786:ERROR:icu_util.cc(133)] Inval

qq_42289686 2020-07-08 12:00:21

VUE+element 遮罩層問題

一個dialog裏面再彈出一個dialog，頁面是灰色的，如圖 先點添加再點搜索用戶 彈出變成灰色 解決辦法：添加append-to-body屬性

一叶扁舟3 2020-07-07 23:03:23

Vue foreach

let codeKeyArr = []; this.displayTypeOptions.forEach((option) => { // if (this.detail.displayTy

一叶扁舟3 2020-07-07 23:03:23

vue報錯：Component template should contain exactly one root element

錯誤重現： 錯誤原因：Component template should contain exactly one root element ----翻譯爲：如果你正在使用模板應該只包含一個根元素。 解決辦法：對模板template下只

辛凡 2020-07-07 21:48:15

vue路由完成頁面跳轉

在項目中會有頁面跳轉的功能，跳轉不同的界面加載不同的內容，所以需要頁面跳轉。 （1）書寫頁面路由 import Vue from 'vue' import VueRouter from 'vue-router' import Ho

Nadia~ 2020-07-07 20:56:20

超簡單的基於vue的輪播圖實現

今天要做一個輪播圖,網上找了一圈都不滿意,自己寫了個. 效果如下: 圖片可自行配置,始終顯示6(改v-for後的列表可以控制數量)張; 核心代碼: <ul v-on:mouseout="move()" v-on:mouseove

付纵横 2020-07-07 11:24:12

VUE中 ECHART餅圖各扇區間加空格 及 消除鼠標放到扇區上隱藏第一行

1、餅圖的扇區間加空白間隔  series : [{ name: '', type: 'pie', radius: ['35%', '60%'], center: ['50%', '50%'],

净坛望月 2020-07-07 03:58:00

點擊el-table表頭中的某一列 觸發不同的事件 給表頭添加圖標

<template> <el-table :data="productList" @header-click="headerChange"> <el-table-column prop="title" lab

净坛望月 2020-07-07 03:58:00

element UI 設置 el-table 表格 表頭及各行的高度斑馬線樣式

設置表頭行高，各行行高 ，斑馬線樣式  <el-table :data="unitList" :header-cell-style="{ <!-- 設置表頭的背景色，字體顏色，行高 --> backgroun

净坛望月 2020-07-07 03:58:00

VUE 錯誤 ： Expected indentation of 4 spaces but found 6 和 Missing space before function parentheses

出現這個問題的原因是代碼的縮進沒有對其，例如 上圖代碼看上去沒有問題，但是會報下面的錯誤 如果改成這樣，把前面的縮進去掉，然後括號中間添加空格，就不會報錯。 但是這樣很噁心有沒有？使用代碼整理功能一個代碼整理，所有的代碼都異常了，很

乄星落 2020-07-07 02:08:03

vue+element進行普通佈局

注意：element有的標籤套用會有影響的。比如el-header裏面的el-form-item的label對不齊！ <template> <section> <el-container style="border: 1px

尔嵘 2020-07-06 21:27:59

MVVM雙向綁定簡單實現

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="

高大魔王就是我 2020-07-06 11:17:40

Vue form綁定數據後只能顯示不能編輯

問題描述： 數據綁定後form上，數據能夠正常顯示，像單選、下拉框等能操作，但是操作後，顯示的值不變，頁面自動更新後才能顯示。 原因分析： 是因爲在賦值的時候，沒有在data中聲明屬性，如下面的代碼： <script> expor

爱洗澡的拉布拉多 2020-07-06 11:11:31

vue記錄：把對象中的數據賦給某個變量，改變一個對象的值，另一個對象也變化

data(){ return{ tmp1:{ t:1 }, tmp2:{ t:'' } } }, 將tmp1的內容賦值給tm

一川死水 2020-07-06 11:03:38

VUE學習筆記(三) 運行VUE

.VUE學習筆記(一)   環境 VUE學習筆記(二) Visual Studio Code VUE學習筆記(三) 運行VUE VUE學習筆記(四) 引用element-ui VUE學習筆記(五) 引入axios     一  用VSCo

会飞De琥珀 2020-07-06 08:24:39