后台管理界面的前端组件

最新推荐文章于 2024-04-01 01:28:13 发布
最新推荐文章于 2024-04-01 01:28:13 发布
阅读量291 收藏
点赞数
分类专栏： 自用笔记 # 前端 文章标签： layui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43854673/article/details/103573714
版权

Layui控件的使用

一、Layui日期控件
1.开始时间结束时间的js
layui.use('laydate', function () {
				var laydate = layui.laydate;
				var startDate = laydate.render({
					elem: '#startTime',
					type: 'datetime',
					done: function (value, {year, month, date, hours, minutes, seconds}) {
						endDate.config.min = {
							year,
							month: month - 1,
							date,
							hours,
							minutes,
							seconds
						};
					}
				});
				var endDate = laydate.render({
					elem: '#endTime',
					type: 'datetime',
					done: function (value, {year, month, date, hours, minutes, seconds}) {
						startDate.config.max = {
							year,
							month: month - 1, //关键  
							date,
							hours,
							minutes,
							seconds
						};
					}
				});
			});
2.时间框的HTML
<div class="col-xs-6">
					<div class="form-group">
						<label class="control-label col-sm-4"  title="">
							<span class="required ">*</span> 结束时间:
						</label>
						<div class="col-sm-8">
							<div class="input-group">
							<input type="text" id="endTime" name="endTime" maxlength="64" minlength=1  class="form-control required "/>
							<span class="input-group-btn">
									<a href="javascript:$('#endTime').focus();" class="btn btn-default "><i class="fa fa-calendar"></i></a>
							</span>
							</div>
						</div>
					</div>
				</div>
3.补充重置的bug-
$("#btn-resert").on("click",function(){
					$("#searchForm")[0].reset();
					endDate.config.min='1900-1-1';
					startDate.config.max=endDate.config.max;
				});
二、Layui多选框
1.多选框的HTML
<div class="form-unit">套餐明细</div>
			<div class="row">
				<div class="col-xs-11">
					<a href="javascript:void(0);" class="layui-btn layui-btn-default layui-btn-sm " id="btnDishes" title="添加明细" onclick="geroRepastPlanInfoAddForm.addDishesDialog();"><i class="fa fa-plus-square"></i>&nbsp;添加菜品</a>
					<a href="javascript:void(0);" class="layui-btn layui-btn-primary layui-btn-sm"  onclick="geroRepastPlanInfoAddForm.removeAllLine();"><i class="fa fa-minus-square"></i>&nbsp;全部移除</a>
				</div>
			</div>
			<div class="row">
				<div class="col-xs-12">
					<table id="tab2" class="layui-table" style="margin-top:5px;">
						<thead>
						<tr>
							<td align="center">菜品名称</td>
							<td align="center">餐饮类型</td>
							<td align="center">操作</td>


						</tr>
						</thead>
						<tbody id="shift_tr">

						</tbody>
					</table>
				</div>
			</div>
2.多选框的JS
addDishesDialog: function () {
			var options = {
				shade: 0.3,
				type: 2,
				maxmin: true,
				shadeClose: true,
				title: '【菜品选择】',
				area: ['50%', '70%'],
				content: ctx + '/repast/order/info/dishesDialog',
				btn: ['<i class="fa fa-check"></i> 确定'],
				btn1: function (index, layero) {
					var win = parent.layer.iframeWindow(index);
					var ids = win.$("#grid").jqGrid('getGridParam', 'selarrrow')
					if (ids.length == 0) {
						parent.layer.msg("请选择菜品！");
					} else {
						var num=0;
						var len=$("#shift_tr > tr").length
						if(len==1){
							num=len;
						}else{
							num=len+num;
						}
						$.each(ids, function (i, v) {
							var data = win.$("#grid").jqGrid('getRowData', v);
							_that.addDishesLine(i+num,data);
						})
					}
					parent.layer.close(index);
				}
			};
			options.btn.push('<i class="fa fa-close"></i> 关闭');
			options['btn' + options.btn.length] = function (index, layero) {
				if (typeof treeselectCallback == 'function') {
					treeselectCallback('parent', 'cancel', index, layero);
				}
			};
			parent.layer.open(options);
		},
		addDishesLine: function (index,shift) {
			//先获取 去重复
			var dom = "";
			dom += "<tr id=\"shiftTr_" + index + "\" data-index-id=" + shift.id + ">";
			dom += "    <td align='center'>";
			dom += "        <div class=\"input-group input-group-sm\">";
			dom += "            <input type=\"hidden\" id=\"geroRepastPlanDineDishesList[" + index + "].dishesId\" name=\"geroRepastPlanDineDishesList[" + index + "].dishesId\" value=\"" + shift.id + "\" class=\"form-control  dishesId\">";
			dom += "			<div>"+shift.dishesName+"</div>";
			dom += "        </div>";
			dom += "    </td>";

			dom += "    <td align='center' style=\"text-align:center;\">";
			dom += "       <select id='geroRepastPlanDineDishesList["+ index +"].planDineType' name='geroRepastPlanDineDishesList["+ index +"].planDineType' class='form-control required'>";
			dom += "       		<option value='' >--请选择--</option>";
			dom += "       		<option value='0' >早餐</option>";
			dom += "       		<option value='1' >早点</option>";
			dom += "       		<option value='2' >午餐</option>";
			dom += "       		<option value='3' >午点</option>";
			dom += "       		<option value='4' >晚餐</option>";
			dom += "       		<option value='5' >夜宵</option>";
			dom += "       	</select>";
			dom += "    </td>";

			dom += "    <td align='center' style=\"text-align:center;\">";
			dom += "        <a href=\"javascript:void(0);\" class=\"btnList layui-btn layui-btn-xs layui-btn-danger\"  οnclick=\"geroRepastPlanInfoAddForm.removeLine('shiftTr_" + index + "');\">&nbsp;删除</a>";
			dom += "    </td>";
			dom += "</tr>";

			var flag=true;
			$('tr .dishesId').each(function(i,val){
				if(shift.id==$(this).val()){
					Js.layer.msg("菜品【"+shift.dishesName+"】已经存在,不能重复添加");
					flag=false;
				}
			});
			if(flag){
				$("#shift_tr").append(dom);
			}
		},
		removeLine: function (id) {
			$("#" + id).remove();
		},
		removeAllLine: function () {
			$("#shift_tr").html("");
		},
三、Dialog界面的书写
1.HTML
<div class="form-unit">护理员明细</div>
			<div class="row">
				<div class="col-xs-11">
					<a href="javascript:void(0);" class="layui-btn layui-btn-default layui-btn-sm " id="btnDishes" title="添加明细" onclick="geroNursingArrangeCheckAddForm.addArrangeCheck();"><i class="fa fa-plus-square"></i>&nbsp;添加明细</a>
					<a href="javascript:void(0);" class="layui-btn layui-btn-primary layui-btn-sm"  onclick="geroNursingArrangeCheckAddForm.removeAllLine();"><i class="fa fa-minus-square"></i>&nbsp;全部移除</a>
				</div>
			</div>
			<div class="row">
				<div class="col-xs-12">
					<table id="tab2" class="layui-table" style="margin-top:5px;">
						<thead>
						<tr>
							<td align="center">护理员名称</td>
							<td align="center">排班时间</td>
							<td align="center">排班开始时间</td>
							<td align="center">排班结束时间</td>
							<td align="center">排班完成情况</td>
							<td align="center">操作</td>


						</tr>
						</thead>
						<tbody id="shift_tr">

						</tbody>
					</table>
				</div>
			</div>


<!--	编辑界面-->

<tbody id="shift_tr">
<!--							geroNursingArrangeCheck-->
								<tr id="shiftTr_1">
								<td align="center">
									<div class="input-group input-group-sm">
										<div>${geroNursingArrangeCheck.employeeName}</div>
									</div>
								</td>

									<td align="center" style="text-align:center;">
										<div class="input-group input-group-sm">
											<div>${geroNursingArrangeCheck.arrangeTime,"yyyy-MM-dd HH:mm:ss"}</div>
										</div>
									</td>

									<td align="center" style="text-align:center;">
										<div class="input-group input-group-sm">
											<div>${geroNursingArrangeCheck.startTime}</div>
										</div>
									</td>

									<td align="center" style="text-align:center;">
										<div class="input-group input-group-sm">
											<div>${geroNursingArrangeCheck.endTime}</div>
										</div>
									</td>

									<td align="center" style="text-align:center;">
										<div class="input-group input-group-sm">
											<input id="performance" name="performance" class='form-control required' type="number"  min="0.00" max="1.00" value="${geroNursingArrangeCheck.performance}" step="0.01"  />
										</div>
									</td>

<!--							<td align='center' style=text-align:center;>-->
<!--								<a href="javascript:void(0);" class="btnList layui-btn layui-btn-xs layui-btn-danger"  οnclick=geroNursingArrangeCheckEditForm.removeLine('shiftTr_1');>&nbsp;删除</a>-->
<!--							</td>-->
							</tr>

							</tbody>
2.JS
addArrangeCheck: function () {
			var options = {
				shade: 0.3,
				type: 2,
				maxmin: true,
				shadeClose: true,
				title: '【护理员选择】',
				area: ['60%', '70%'],
				content: ctx + '/nursing/arrange/arrangeDialog',
				btn: ['<i class="fa fa-check"></i> 确定'],
				btn1: function (index, layero) {
					var win = parent.layer.iframeWindow(index);
					var ids = win.$("#grid").jqGrid('getGridParam', 'selarrrow')
					if (ids.length == 0) {
						parent.layer.msg("请选择护理员！");
					} else {
						var num=0;
						var len=$("#shift_tr > tr").length
						if(len==1){
							num=len;
						}else{
							num=len+num;
						}
						$.each(ids, function (i, v) {
							var data = win.$("#grid").jqGrid('getRowData', v);
							_that.addArrangeLine(i+num,data);
						})
					}
					parent.layer.close(index);
				}
			};
			options.btn.push('<i class="fa fa-close"></i> 关闭');
			options['btn' + options.btn.length] = function (index, layero) {
				if (typeof treeselectCallback == 'function') {
					treeselectCallback('parent', 'cancel', index, layero);
				}
			};
			parent.layer.open(options);
		},
		addArrangeLine: function (index,shift) {
			//先获取 去重复
			var dom = "";
			dom += "<tr id=\"shiftTr_" + index + "\" data-index-id=" + shift.id + ">";
			dom += "    <td align='center'>";
			dom += "        <div class=\"input-group input-group-sm\">";
			dom += "            <input type=\"hidden\" id=\"geroNursingArrangeCheckList[" + index + "].arrangeId\" name=\"geroNursingArrangeCheckList[" + index + "].arrangeId\" value=\"" + shift.id + "\" class=\"form-control  arrangeId\">";
			dom += "			<div>"+shift.employeeName+"</div>";
			dom += "        </div>";
			dom += "    </td>";

			dom += "    <td align='center' style=\"text-align:center;\">";
			dom += "        <div class=\"input-group input-group-sm\">";
			dom += "			<div>"+shift.arrangeTime+"</div>";
			dom += "        </div>";
			dom += "    </td>";

			dom += "    <td align='center' style=\"text-align:center;\">";
			dom += "        <div class=\"input-group input-group-sm\">";
			dom += "			<div>"+shift.startTime+"</div>";
			dom += "        </div>";
			dom += "    </td>";

			dom += "    <td align='center' style=\"text-align:center;\">";
			dom += "        <div class=\"input-group input-group-sm\">";
			dom += "			<div>"+shift.endTime+"</div>";
			dom += "        </div>";
			dom += "    </td>";

			dom += "    <td align='center' style=\"text-align:center;\">";
			dom += " <div class=\"input-group input-group-sm\">";
			dom += "<input id=\"geroNursingArrangeCheckList[" + index + "].performance\" name=\"geroNursingArrangeCheckList[" + index + "].performance\" class='form-control required' type=\"number\"  min=\"0.00\" max=\"1.00\" value='0.00' step=\"0.01\"  />";
			dom += "        </div>";
			dom += "    </td>";

			dom += "    <td align='center' style=\"text-align:center;\">";
			dom += "        <a href=\"javascript:void(0);\" class=\"btnList layui-btn layui-btn-xs layui-btn-danger\"  οnclick=\"geroNursingArrangeCheckAddForm.removeLine('shiftTr_" + index + "');\">&nbsp;删除</a>";
			dom += "    </td>";
			dom += "</tr>";

			var flag=true;
			$('tr .arrangeId').each(function(i,val){
				if(shift.id==$(this).val()){
					Js.layer.msg("已经存在的排班信息,不能重复添加");
					flag=false;
				}
			});
			if(flag){
				$("#shift_tr").append(dom);
			}
		},
		removeLine: function (id) {
			$("#" + id).remove();
		},
		removeAllLine: function () {
			$("#shift_tr").html("");
		},
3.controller
 /**
     * 护理员选择跳转弹窗
     * @param request
     * @param response
     * @param model
     * @return
     */
    @GetMapping(value = "/arrangeDialog")
    public String arrangeDialog(
        HttpServletRequest request,
        HttpServletResponse response,
        Model model
    ){
//        QueryWrapper<GeroNursingArrange> nursingArrangeQueryWrapper = new QueryWrapper<>();
//        nursingArrangeQueryWrapper.lambda().eq(GeroNursingArrange::getDelFlag, State.NORMAL.getValue());

//        model.addAttribute("arrange",arrangeService.selectList(nursingArrangeQueryWrapper));

        return prefix + "/arrange_dialog";
    }

    /**
     * 跳转弹窗的护理人员分页列表
     * @param request
     * @param geroNursingArrange
     * @param pageNo
     * @param pageSize
     * @param startTime
     * @param endTime
     * @return
     */
    @PostMapping(value = "/getNormalStatePage")
    @ResponseBody
    public JqGrid<GeroNursingArrange> getNormalStatePage(
            HttpServletRequest request,
            @ModelAttribute GeroNursingArrange geroNursingArrange,
            @RequestParam(value = "pageNo", required = true)Integer pageNo,
            @RequestParam(value = "pageSize", required = true)Integer pageSize,
            @RequestParam(value = "startTime", required = false) String startTime,
            @RequestParam(value = "endTime", required = false) String endTime
            ){
        QueryWrapper<GeroNursingArrange> wrapper = new QueryWrapper<>();
        wrapper.lambda().like(StringUtils.isNoneBlank(geroNursingArrange.getEmployeeName()),
                GeroNursingArrange::getEmployeeName,geroNursingArrange.getEmployeeName())
                .ne(GeroNursingArrange::getCheckFlag,"1")
                .ge(StringUtils.isNoneBlank(startTime),
                        GeroNursingArrange::getArrangeTime,startTime)
                .le(StringUtils.isNoneBlank(endTime),
                        GeroNursingArrange::getArrangeTime,endTime);

        return arrangeService.jqGridPage(pageNo, pageSize, wrapper);
    }
4.dialog的html
<% layout('/layouts/manager_content.html',{title:'geroNursingArrange-page',libs: ['jqGrid','siufung','select2']}){ %>
<div class="main-content">
    <div class="box box-main">
        <div class="box-body">
            <form id="searchForm" action="${ctxPath}/nursing/arrange/getNormalStatePage" class="form-inline" method="post">
                <div class="form-group">
                    <label class="control-label">护理员名称：</label>
                    <div class="control-inline">
                        <input id="employeeName" name="employeeName" class="form-control width-140"/>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label">排班起止时间：</label>
                    <div class="control-inline">
                        <input id="startTime" name="startTime" readonly style="background: #fff" class="form-control width-120"/> -
                        <input id="endTime" name="endTime" readonly style="background: #fff" class="form-control width-120"/>
                    </div>
                </div>
                <div class="form-group">
                    <button type="submit" class="layui-btn layui-btn-default layui-btn-sm"><i class="fa fa-search"></i>&nbsp;查询</button>
                    <button type="reset" class="layui-btn layui-btn-primary layui-btn-sm"><i class="fa fa-wrench"></i>&nbsp;重置</button>
                </div>
            </form>
            <table id="grid"></table>
            <div id="gridPage"></div>
        </div>
    </div>
</div>
<script src="${ctxPath}/modules/nursing/arrange/arrange_dialog.js"></script>
<script type="text/javascript">
    $(function(){
        arrangeCheckDialogForm.init();
        $('#grid').dataGrid({
            searchForm: $("#searchForm"),
            showCheckbox:true,
            columnModel: [
                {header:'序列号', name:'id', index:'ID', hidden:true, key:true},
                {header:'护理员名称', name:'employeeName', index:'EMPLOYEE_NAME', width:150, align:"center"},
                {header:'排班日期', name:'arrangeTime', index:'ARRANGE_TIME', width:150, align:"center"},
                {header:'开始时间', name:'startTime', index:'START_TIME', width:150, align:"center"},
                {header:'结束时间', name:'endTime', index:'END_TIME', width:150, align:"center"},
            ],
            ajaxSuccess: function(data){

            }
        });
    });
</script>
<% } %>
5.dialog的js
var arrangeCheckDialogForm = function($){
    var _that = null;
    return {
        init:function(){
            _that = this;
            _that.bindEvent();
            _that.bindData();
            _that.bingComponent();
        },
        bindEvent:function(){

        },
        bindData:function(){

        },
        bingComponent:function () {
            layui.use('laydate', function () {
                var laydate = layui.laydate;
                var startDate = laydate.render({
                    elem: '#startTime',
                    type: 'date',
                    max:getNowFormatDate(),
                    done: function (value, {year, month, date}) {
                        endDate.config.min = {
                            year,
                            month: month - 1,
                            date
                        };
                    }
                });
                var endDate = laydate.render({
                    elem: '#endTime',
                    type: 'date',
                    max:getNowFormatDate(),
                    done: function (value, {year, month, date}) {
                        startDate.config.max = {
                            year,
                            month: month - 1, //关键  
                            date
                        };
                    }
                });
            });
            function getNowFormatDate (){
                var date = new Date();
                var seperator1 = "-";
                var seperator2 = ":";
                var month = date.getMonth() + 1;
                var strDate = date.getDate();
                if (month >= 1 && month <= 9) {
                    month = "0" + month;
                }
                if (strDate >= 0 && strDate <= 9) {
                    strDate = "0" + strDate;
                }
                var currentdate = date.getFullYear() + seperator1 + month
                    + seperator1 + strDate + " " + date.getHours() + seperator2
                    + date.getMinutes() + seperator2 + date.getSeconds();
                return currentdate;
            }
        },

    }
}(jQuery);
知有丶
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
后端给前端提供渲染组件
Geek_Nana爱学习
08-28 364
缘由 一般意义上前端的组件具体内容（如输入框、纯文本、复选框、下拉框等）均由前端自行定义渲染，但在某些时候，为了日后或当前已有的过多类型的通用性，我们也可以将某一部分的可配置组件交由后端定义，如此各类型下的可配置属性仅需后端一方维护；前端则可以直接获取到该类型下的一系列组件定义后直接渲染即可 实现思路 例如，某项目下有多种不同类型的 ”people“ 需要进行基本信息及可配置的信息展示，不同类型 people 的基本信息相同，均包括姓名、性别、年龄等；同时，根据身份的不同，需要对各个类型配置一些不同的其他信
企业级中后台前端/设计解决方案Vue生态Ui组件库（蚂蚁/饿了么/腾讯/字节/华为/Naive）
最新发布
Soujer的博客
06-19 1020
管理后台模板可以帮助开发人员快速构建管理后台，其有高效的开发方式和组件库以及设计风格，通过开发文档的指引，可以快速完成管理后台的开发，提高了开发效率以及统一了开发标准。在前端开发技术非常先进和完善的时代，Vue的发展已经衍生了很多很多的开发模板，很多大型公司和团队都有开发UI组件库及管理后台组件库，可做到开箱即用。
WidgetsPlayground前端组件管理系统
08-09
前端组件管理系统，前端基于Vue2/Vue-router/Vuex实现，界面基于Flow-UI实现，后端基于野狗云实现。
基于Vue全家桶开发的前端组件管理平台
weixin_30666753的博客
06-14 253
项目背景 项目背景是外包类建站公司里，设计环节沉淀了大量可复用组件，设计师往往只需要微调组件就拼凑出页面，交付给前端，理论上这些组件在前端也可以复用，但实际上前端每次都要重新实现整个页面，浪费很多人力。 功能需求 这个项目的思路是，将所有组件开发出来，统一录入到一个平台上管理，设计师可以到平台上挑选组件，并实时预览和调整组件，整个过程所见即所得，平台会将调整结果生成一串代码，只要将代码交给前...
通用后台管理系统前端界面Ⅶ——公用组件（Header+Footer+Menu）
qq_45947664的博客
11-19 1103
components下新建文件夹common，新建三个组件：Header.vue Footer.vue Menu.vue从element-ui官网找到想要的组件，粗略写好后，挂载在主页Home.vue上，
管理系统后台前端各种组件模板
04-08
“组件丰富”意味着该模板包含多种常见的前端组件，如导航栏、侧边栏、表格、图表、按钮、表单元素、提示信息等，这些都是构建功能完善的后台系统所必需的。这些组件往往已经进行了良好的封装和定制，可以快速插入到...
黑马电商后台管理系统前端vue后端nodejs.zip
12-02
在黑马电商后台管理系统中，Vue.js用于构建用户界面，提供动态数据绑定、指令系统和组件通信等功能，使得页面交互更加流畅，提高用户体验。开发者可以通过学习项目中的Vue代码，掌握如何组织项目结构，使用Vuex进行...
后台管理界面UI 漂亮 通用后台管理界面
01-09
开发者可以下载并解压此文件，根据提供的组件和模板来定制自己的后台管理界面，从而节省时间和精力，提高开发效率。 在实际应用中，后台管理界面UI的设计需要考虑以下几个关键知识点： 1. 响应式设计：确保界面在...
整套后台管理系统前端html模板，适配不同尺寸，超多前端插件
11-30
在IT行业中，前端开发是构建用户交互界面的关键环节，而一个高质量的后台管理系统前端HTML模板则是提升开发效率、保证项目稳定性的有力工具。本文将深入探讨标题为“整套后台管理系统前端html模板，适配不同尺寸，超...
电商后台管理系统(前端项目）
06-27
在这个电商后台管理系统中，“大前端”意味着前端开发者需要具备全面的技术能力，不仅负责用户界面，还要处理部分业务逻辑和数据处理。 项目名称中的“vue-shop-admin-master”表明了该项目基于Vue.js框架进行构建...
vue-element-admin 是基于 Vue2.0，配合使用 Element-UI 组件库的一个前端管理后台集成
11-07
vue-element-admin 是基于 Vue2.0，配合使用 Element UI 组件库的一个前端管理后台集成解决方案
蚂蚁金服后台界面Axure组件 经典
09-26
蚂蚁金服后台原型规范，不仅各组件分为多种类型，详细描述，而且还有现成界面模板，非常经典！掌握这一套，制作简单后台的原型基本没问题了。
Bootstrap前端组件库+构建管理
hhhh
04-18 1573
Bootstrap使用Grunt来构建CSS、JavaScript，并用Jekyll来写作文档。 Grunt是Node.js中一个JavaScript的任务管理器，也可以使用其他工具与技术来构建Bootstrap Bootstrap的版本 默认版本、支持Flexbox的版本、仅包含网格系统的版本 Bootstrap内置一个移动优先、12栏布局的响应网格系统 Bootstrap 的所有 JavaScript 插件都依赖 jQuery，因此 jQuery 必须在 Bootstrap 之前引入，就像在基本
关于前端组件化、状态管理规范化的思考
weixin_33970449的博客
10-31 614
苏格团队 作者：Tomey 一、开篇 说起前端组件化是这几年老生常谈的话题，笔者就不在这里对前端组件化思想的发展史、优劣做详细的介绍。今天主要与大家分享一下，笔者在开发中从初期的小项目，到后期的项目功能迭代，功能模块越来越多，项目越来越大，组件化规范制定不够完善，多人团队协作开发导致的一些问题，与笔主自己处理的方案的思考。 二、发现、提出问题 1、三张图说明一个业务模块功能迭代图。 第1版...
后台产品素材大全，你要的组件、原型、页面我都有
Lemonliyi的博客
07-24 797
上周我们分享了一些关于小程序相关的内容，包括点击弹窗设计的方法、基础组件和一些原型分享，错过的点击这里。 本周，我们将继续专题路线，分享一些关于后台的产品设计。 后台产品虽不如前台产品那样被大众所熟知，但其重要性丝毫不比前台产品弱。 一方面来说，它是公司业务的支撑，运用它可以优化工作流程，提升工作的效率；另一方面，它能够让我们获取到用户和服务相关的数据，并因此进行分析，从而推动前台的优化。 好了，话不多说，赶紧进入正题吧～ 后台组件 原型搭建第一步——获取组件素材。 我们素材广场也给刀友们准备了丰富的后
vue el-form中添加el-checkbox多选框，实现将所选内容保存到后台，并能回显到前端的解决（如果有更好的方法欢迎评论）
m0_60282866的博客
03-14 1237
1、el-table的单元格不仅要能点击，而且需要显示后台数据(由于我保存的是数字形式到后台，但是展示到前端时需要将这些数字翻译成对应的中文)，下面的是一个简单的实现方法。2、点击完单元格出现dialog弹框，然后勾选相应的信息，点击保存就可以啦。最后也顺便说下这个一个单元格显示多行数据是如何实现的，很简单直接看代码。实现的效果图，证据这一栏可以点击。后台返回的数据主要是这个函数。以上的各种方法的代码。
Naive UI Admin后台管理系统的组件BasicTable使用指南
qq_15233495的博客
03-10 3619
BasicTable集成了很多功能，如下：（1）分页信息，可以自定义分页字段名，方便和后端做数据交互。（2）可编辑单元格，通过配置column的edit属性使该列渲染为可编辑组件，同时支持整行编辑。（3）基础工具，包括表格斑马纹显示、刷新、密度以及列相关的设置选项。（4）动态计算调整表格的高度
HTML5 纯CSS3实现正方体旋转3D效果，零基础也能看得懂
04-01 624
right: 0;
后台管理系统前端模板
04-03
后台管理系统前端模板是一种用于构建管理系统界面的模板，它提供了一套通用的UI组件和布局，使得开发者可以快速搭建出功能完善、美观大方的后台管理系统。 常见的后台管理系统前端模板有很多，其中比较受欢迎的包括Ant Design、Element UI、Bootstrap等。这些模板都提供了丰富的UI组件和样式，以及灵活的布局方式，可以满足不同项目的需求。 Ant Design是一个基于React开发的UI组件库，它提供了一套美观、易用的组件，包括表单、表格、图表等常见的后台管理系统所需的功能组件。Ant Design还提供了一套配套的设计规范，使得开发者可以快速构建出符合用户体验的界面。 Element UI是一个基于Vue.js开发的UI组件库，它也提供了丰富的组件和样式，可以帮助开发者快速搭建出漂亮的后台管理系统界面。Element UI还支持国际化和自定义主题，可以根据项目需求进行个性化定制。 Bootstrap是一个流行的前端框架，它提供了一套响应式的网页设计模板和CSS样式，可以帮助开发者快速构建出适配不同设备的后台管理系统界面。Bootstrap还提供了丰富的组件和插件，可以满足各种功能需求。 以上是一些常见的后台管理系统前端模板，它们都具有一定的优势和特点，开发者可以根据自己的项目需求和技术栈选择合适的模板进行开发。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值