最少的代码实现树形菜单（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

您的项目需求