D2Admin基本使用

JavaScript011

D2Admin基本使用,第1张

目录

或者

之后选择 简化版

进入项目文件夹

修改完成后重启项目即生效

首页LOGL:

替换 .publicimagethemed2logoall.png

网页 ico 小图标:

替换 .publicicon.ico

以折线图为例,其他类型详见官方文档。

为了美观,将其包含在elementUI的Card组件中。

从第二 tbgs 标签页起,将 lazy 属性设置为 true

D2 CURD是一个基于Vue.js 和 Element UI的表格组件,封装了常用的表格操作,使用该组件可以快速在页面上处理表格数据。

详见 官方文档

此处为带有新增和分页功能的表格,但CURD2.x中分页功能的数据需要从后台获取,因此这里只简单演示了表格的样式。

columns : 表格的列属性

data : 表格的数据

add-title : 弹出新增模态框的标题

pagination : 开启分页功能

loading : 加载数据时会有加载中的样式

slot="header" : 表格的头部信息,自定义样式(如:标题,按钮,输入框等)可以显示在表格的顶部(2.x新增,更好的替代了1.x中的 title 属性)

BusinessTable1List : 后台数据API,获取后台数据,这里只是页面展示,采用固定的数据,未使用API接口。

两个概念:

自定义组件,用于显示图片:

基于 CURD2.x 的本地增删改查 以及 分页功能实现

经测试,各功能全部正常。

用户权限:

控制权限的几种方式:

这个问题涉及到了两个知识点,一个知识点是利用js操作dom的css属性;另一个知识点是js进行定时操作。

有两种实现方式,一种是用原生js,另一种是用jquery。为了简单,以jquery为例:

<html>

<head>

<script src="./jquery.js"></script>

</head>

<body>

<div id="d1" style="display:none">d1</div>

<div id="d2">d2</div>

<script>

$(function(){

//转换div

function changeDiv(){

if($("#d1").style.display==none){

$("#d1").show()

$("#d2").hide()

}else{

$("#d1").hide()

$("#d2").show()

}

}

//利用setInterval,设置每隔10秒执行changeDiv函数。

window.setInterval("changeDiv()",10000)

})

</script>

</body>

</html>