useDark 顾名思义，是否使用深色模式，useDark它是通过读取localStorage/sessionStorage的存储值（key是可自定义的）。从而设置html的class。VueUse的官方案例使用了TailwindCSS偏好的暗模式。因为我们不一定都用得到TailwindCSS。所以这里我以element-plus的深色主题为例子。 从element-plus官网可以看到，它自己就带有暗黑主题，我们只需要在html上添加一个名为 dark 的类。所以选择使用useDark工具那就太方便了。注意：既然使用到了elementPlus，要实现深色主题的切
本文档从零开始搭建一个通用的管理后台，技术栈为vue2.0+vue-router+vuex+element-ui+axios。最终效果如下： 左侧为菜单栏，右侧包含头部，面包屑，主内容区。左侧菜单栏可折叠，可全屏，刷新页面后还是之前页面状态。gitee地址：https://gitee.com/liubangbo/yilin-admain/tree/master如对您有帮助，麻烦给个star。另外如有问题，欢迎在此留言讨论。下面对此框架主要部分进行详细阐述。1.准备工作 此框架采用了vue-cli脚手架创建的项目，选中vuexvue-router，然后按官方文档安装element-ui并按需
本文档从零开始搭建一个通用的管理后台，技术栈为vue2.0+vue-router+vuex+element-ui+axios。最终效果如下： 左侧为菜单栏，右侧包含头部，面包屑，主内容区。左侧菜单栏可折叠，可全屏，刷新页面后还是之前页面状态。gitee地址：https://gitee.com/liubangbo/yilin-admain/tree/master如对您有帮助，麻烦给个star。另外如有问题，欢迎在此留言讨论。下面对此框架主要部分进行详细阐述。1.准备工作 此框架采用了vue-cli脚手架创建的项目，选中vuexvue-router，然后按官方文档安装element-ui并按需
实现效果：需求描述： A模块B模块用户可在“A模块”中新增、编辑、删除、隐藏表头项。在“B模块”中动态显示用户设置好的表头。表头下数据类型有StringNumeric、Date、List四种类型。类型为String、Numeric、Date时为input格式。类型为List时为el-select格式。类型为List时el-select内数据由用户在新增时与规定模块进行关联选择。 实现方法：思路：根据后端接口返回数据实现动态表头后台接口可为“A模块”中的查询全部列表的接口，也可以是后端新写的接口（推荐）。 代码：html中：addRedStar(h,obj,item.isWrited)":lab
实现效果：需求描述： A模块B模块用户可在“A模块”中新增、编辑、删除、隐藏表头项。在“B模块”中动态显示用户设置好的表头。表头下数据类型有StringNumeric、Date、List四种类型。类型为String、Numeric、Date时为input格式。类型为List时为el-select格式。类型为List时el-select内数据由用户在新增时与规定模块进行关联选择。 实现方法：思路：根据后端接口返回数据实现动态表头后台接口可为“A模块”中的查询全部列表的接口，也可以是后端新写的接口（推荐）。 代码：html中：addRedStar(h,obj,item.isWrited)":lab
一、概述基于Vue和Element-UI的电商后台管理系统1.1实现功能用户登录/退出用户管理用户列表实现用户的增删改查、分页查询以及分配角色功能权限管理角色列表实现角色的增删改查以及分配权限、删除权限功能权限列表展示所有权限以及权限等级商品管理商品列表实现商品的增删改、分页查询分类参数实现分类参数的增删改商品分类实现商品分类的增删改以及查看该分类下的所有子分类订单管理订单列表实现修改地址实现查看物流进度数据统计数据报表1.2前端技术栈电商后台管理里系统整体采用前后端分离的开发模式，其中前端是基于Vue技术栈的SPA项目vuevue-routerElement-UIAxiosEcharts1.
一、概述基于Vue和Element-UI的电商后台管理系统1.1实现功能用户登录/退出用户管理用户列表实现用户的增删改查、分页查询以及分配角色功能权限管理角色列表实现角色的增删改查以及分配权限、删除权限功能权限列表展示所有权限以及权限等级商品管理商品列表实现商品的增删改、分页查询分类参数实现分类参数的增删改商品分类实现商品分类的增删改以及查看该分类下的所有子分类订单管理订单列表实现修改地址实现查看物流进度数据统计数据报表1.2前端技术栈电商后台管理里系统整体采用前后端分离的开发模式，其中前端是基于Vue技术栈的SPA项目vuevue-routerElement-UIAxiosEcharts1.
Vue+element-ui的el-cascader实现动态添加/删除级联地点输入框文章目录Vue+element-ui的el-cascader实现动态添加/删除级联地点输入框1.需求2.场景说明3.实现代码3.1表单结构3.2script结构3.3需要注意的点1.需求实现省市区三级地点级联选择，可联想；包括始发地点、途径地点、终止地点，始发地点、终止地点均为一个，途径地点可以没有也可以是多个；用户可以动态添加/删除途径地点。2.场景说明使用级联选择器Cascader需要的树形数据，前端请求到后端获取省市区数据并处理为elementui官网示例的树形数据格式，如下所示，为节省篇幅树形数据示例只
Vue+element-ui的el-cascader实现动态添加/删除级联地点输入框文章目录Vue+element-ui的el-cascader实现动态添加/删除级联地点输入框1.需求2.场景说明3.实现代码3.1表单结构3.2script结构3.3需要注意的点1.需求实现省市区三级地点级联选择，可联想；包括始发地点、途径地点、终止地点，始发地点、终止地点均为一个，途径地点可以没有也可以是多个；用户可以动态添加/删除途径地点。2.场景说明使用级联选择器Cascader需要的树形数据，前端请求到后端获取省市区数据并处理为elementui官网示例的树形数据格式，如下所示，为节省篇幅树形数据示例只
一、最终效果二、具体HTML代码（详情请看源码）template>el-selectref="select"v-model="selectValue":multiple="multiple":filter-method="dataFilter"@remove-tag="removeTag"@clear="clearAll"popper-class="t-tree-select":style="{width:width||'100%'}"v-bind="attrs"v-on="$listeners">el-optionv-model="selectTree"class="option-style
