最少的代碼實現樹形菜單（Jquery+CSS）

果覺得對您有幫助，請關注一下，謝謝，這個代碼可以再加上 ul 和 li 的樣式，小圖標或者其他，那就基本是成品了：

$(document).ready(function(){

$("menu ul").hide();

$("menu li").click(function(){

if(typeof($(this).next().get(0))!=='undefined' && $(this).next().get(0).nodeName=='UL'){

$(this).next().slideToggle(400);

}

});

})

</script>

<style>

*{padding:0;margin:0;list-style:none;}

.mymenu{font-size:2em;line-height:2em;cursor:pointer;}

.mymenu ul{width:90%;margin-left:40px;}

.mymenu ul li{width:100%;transition:1s;-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;}

.mymenu ul li:hover{background: #f4f4f4;}

</style>

<ul>

</ul>

<ul>

<ul>

</ul>

</ul>

<ul>

</ul>

<ul>

</ul>

</menu>

求關注

天給小伙伴們分享一款縱享絲滑般體驗的Vue拖拽樹形表格DragTreeTable。

vue-drag-tree-table 基于vue.js實現可拖拽排序的樹形表格組件。支持拖拽排序、固定表頭、拖拽改變行寬、checkbox多選、自定義單元格內容、動態控制某些行是否拖拽等功能。

安裝

$ npm i drag-tree-table -S

使用組件

<template>
  <div id="app">
    <dragTreeTable
      :data="treeData"
      :onDrag="onTreeDataChange"
      :isdraggable="true"
      fixed
      border
      resize
    >
    </dragTreeTable>
  </div>
</template>

<script>
import dragTreeTable from "drag-tree-table"

export default {
  data() {
    return {
      treeData: {
        columns: [...],
        lists: [...]
      }
    };
  },
  components: {
    dragTreeTable
  },
  methods: {
    onTreeDataChange(list) {
      this.treeData.lists = list;
    }
  },
};
</script>

data參數接受一個對象，包含如下字段

columns:[] // 表頭配置參數
lists: [] // 表格數據
custom_field: {} // 自定義字段的配置（非必需）

columns表頭

[
  {
    type: 'selection',
    title: '菜單名稱',
    field: 'name',
    width: 200,
    align: 'center',
    formatter: (item) => {
      return '<a>'+item.name+'</a>'
    }
  },
  {
    type: 'checkbox',
	title: '鏈接',
	field: 'url',
	width: 200,
	align: 'center'
    isContainChildren: true, //是否勾選子節點，默認false
  },
  {
    type: 'action',
	title: '操作',
    width: 350,
    align: 'right',
    actions: [
      {
        text: '查看角色', onclick: (item) => { console.log(item) },
        formatter: (item) => {
          return '<i>查看角色</i>'
        }
      },
      {
        text: '編輯', onclick: (item) => { console.log(item) },
        formatter: (item) => {
          return '<i>編輯</i>'
        }
      }
    ]
  },
  // ...
]

lists數據體

[
  {
    "id":40,
    "parent_id":0,
    "order":0,
    "name":"動物類",
    "uri":"/masd/ds",
    "open":true,
    "lists":[]
  },{
    "id":5,
    "parent_id":0,
    "order":1,
    "name":"昆蟲類",
    "uri":"/masd/ds",
    "open":true,
    "isShowCheckbox": false,
    "lists":[
      {
        "id":12,
        "parent_id":5,
        "open":true,
        "order":0,
        "name":"螞蟻",
        "uri":"/masd/ds",
        "lists":[]
      }
    ]
  },
  // ...
]

組件全局方法

提供了各種豐富的DEMO及API使用。

# 文檔地址
https://www.mofazhuan.com/31.html

# 倉庫地址
https://github.com/mafengwo/vue-drag-tree-table

OK，就介紹到這里。如果大家有其它Vue樹形表格組件，歡迎一起交流討論哈~~

ss是前端領域的一個難纏戶，一提到css，沒有人會說難，也沒有人愿意承認自己不會寫，甚至在面試的過程中css相關的內容都很少提及，足以說明大家對css的不重視。你真的會寫css嗎？

關于css有兩類問題值得我們重視：樣式和工程。樣式問題指的是具體的效果實現，能否實現某個效果，同一個效果有多種實現方式，如何抉擇；工程問題是如何在大型項目中寫出可維護性、可讀的css。

在各種論壇中經常看到關于css是否是一門編程語言的爭論。在我看來，最好用對待編程語言的態度來看待css，不要忽視css，否則，在項目后期，你會發現，你的css越來越混亂，important會越來越多，不同位置的類名互相沖突覆蓋，改一個類的樣式，要檢查整個項目的頁面是否受到影響，項目內部的css共享完全依賴拷貝……從這個角度來說，你敢說css不是編程語言？它完全有了像編程語言一樣能把你搞得焦頭爛額的能力。而這一切都來源于你在一開始對她的忽視與不屑。出來混，總要還的啊！

css的問題

盲目的定義基礎樣式

在項目開始之初，拿到UI設計稿，信心滿滿地開始定義css的全局基礎樣式，謝天謝地，css對這一點支持得很徹底，一處定義，所有頁面都可以引用。

先來一個color-red。

.color-red {
	color: red
}

這樣，在整個項目中，都可以給任意元素添加一個color-red類，美滋滋，我真是個小機靈鬼！

幾個迭代過去，你已經把color-red這面紅旗插滿了整個項目。UED說，咱們改個版，所有紅色的文本改為藍色，紅色的link不變！

嗶！——（你發出的聲音）

你又得屁顛屁顛地把一個一個的紅旗拔出來，再插上藍色的旗子（因為你不敢不干呀）。

命名沖突

在一個頁面，你定義了一個.header，寫了個完美的特效，發布到dev一看，就是不管用，橫看豎看，本地是好的啊，神奇（生氣）！過了若干時間的排查，另一個同事在另一個地方也寫了一個.header，完美的覆蓋了你的。把你頭打歪！

編輯器可不會提醒你哦！

慢慢你會發現，這種命名沖突可太頻繁了呀！頭大，要不要用上css modular啊？

子類覆蓋

有的小伙伴聰明地將類名嵌套定義，這就不會沖突了吧？嘿嘿，你想多了！

/* in article.css */
.article .title {
  border-bottom: 1px solid;
  font-size: 1.5em;
}

/* in widget.css */
.widget .title {
  color: gray;
  text-transform: uppercase;
}

如果在dom樹里面，article和widget在一棵樹的路徑上，你說title是沖突呢還是不沖突呢？

以上的這些問題，在項目中相信大家都遇見過，并且項目越大，出現的概率就越高，最后就會演變成一座[屎]山。

“大家都別動，牽一發而動全身哦！”

“這就是蝴蝶效應吧？？？”

認識BEM

難道css這些問題就沒法解決了嗎？當然不是，我們來看看大神們是如何解決這些問題的。

BEM是Block、Element、Modifier的縮寫，是一個類命名的規范。

首先我們來看一個例子：

/* Block */
.btn {}

/* Element that depends upon the block */ 
.btn__price {}

/* Modifier that changes the style of the block */
.btn--orange {} 
.btn--big {}

相信小伙伴們已經有了一個初步的認知：

Block是一個獨立的組件（元素），定義的了“組件是什么，按鈕？還是菜單？”。

Element是屬于Block，是依賴于Block的元素，描述的是“Block里面的什么？比如，文本？圖標？”

Modifier用于描述Block或者Element的外在表現，比如大小、顏色、狀態等。

看一個例子：

<form class="search-form search-form_theme_islands">
    <input class="search-form__input">
    <button class="search-form__button search-form__button_size_m">Search</button>
</form>

search-form是Block；

search-form_theme_islands是Modifier，描述了theme為islands的search-form；

search-form__input是Element，描述的是search-form內部的input元素；

search-form__button是Element，描述的是search-form內部的button元素；

search-form__button_size_m是Modifier，描述的是size為m的search-form__button；

這樣寫css是不是非常的清晰？瞬間就提高了可讀性和可維護性？

概念如此簡單，還不趕緊多了解一下？

另外，可能有些小伙伴也注意到了，Block和Element使用雙下劃線分隔，和Modifier是用中劃線分隔，這也不是一成不變的，可以按照自己的喜好來決定如何分割。

Saas、Css Module

有些小伙伴可能會有疑問，BEM和Saas、Css Module有什么區別？解決的問題是一樣的嗎？

Sass是css的預處理器，在寫css的時候定義了一套規范，經過編譯處理后輸出為css，和BEM是兩個不同的概念。使用saas或less也能實現BEM。BEM其實是不推崇類名的嵌套定義的，如果想像sass那樣嵌套的寫出標準的BEM，可以使用@at-root。

Css Module解決的問題是多個模塊的css的命名沖突問題，個人覺得是傻瓜式解決方案，在應用層的css-in-js應用比較多，適合css入門選手。要想寫好css，還是得從根本上入手呀！

在線咨詢

上一篇：Jmeter(十九)-響應斷言
下一篇：Axure 教程：利用圖表前端插件實現高級可視化圖表

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

最少的代碼實現樹形菜單（Jquery+CSS）

css的問題

認識BEM

Saas、Css Module

您的項目需求