新闻视频网站开发,怎么做淘宝客网站优化,重大新闻事件2023,ps软件下载免费中文版Element#xff08;Java后端入门篇#xff09;
Element:是饿了么公司前端开发团队提供的一套基于Vue的网站组件库#xff0c;用于快速构建网页组件#xff1a;组成网页的部件#xff0c;例如超链接、按钮、图片、表格等等~
Element快速入门 引入Element的css、js文件和V…ElementJava后端入门篇
Element:是饿了么公司前端开发团队提供的一套基于Vue的网站组件库用于快速构建网页组件组成网页的部件例如超链接、按钮、图片、表格等等~
Element快速入门 引入Element的css、js文件和Vue.js script srcvue.js/script
script srcelement-ui/lib/index.js/script
link relstylesheet hrefelement-ui/lib/theme-chalk/index.css创建Vue核心对象 scriptnew Vue({el:#app})
/script官网复制Element组件代码:组件 | Element
Element布局 Element中有两种布局方式 Layout布局通过基础的24分栏迅速简便地创建布局默认 el-rowel-col :span24div classgrid-content bg-purple-dark/div/el-col
/el-row
el-rowel-col :span12div classgrid-content bg-purple/div/el-colel-col :span12div classgrid-content bg-purple-light/div/el-col
/el-row
el-rowel-col :span8div classgrid-content bg-purple/div/el-colel-col :span8div classgrid-content bg-purple-light/div/el-colel-col :span8div classgrid-content bg-purple/div/el-col
/el-row
el-rowel-col :span6div classgrid-content bg-purple/div/el-colel-col :span6div classgrid-content bg-purple-light/div/el-colel-col :span6div classgrid-content bg-purple/div/el-colel-col :span6div classgrid-content bg-purple-light/div/el-col
/el-row
el-rowel-col :span4div classgrid-content bg-purple/div/el-colel-col :span4div classgrid-content bg-purple-light/div/el-colel-col :span4div classgrid-content bg-purple/div/el-colel-col :span4div classgrid-content bg-purple-light/div/el-colel-col :span4div classgrid-content bg-purple/div/el-colel-col :span4div classgrid-content bg-purple-light/div/el-col
/el-rowstyle.el-row {margin-bottom: 20px;}.el-col {border-radius: 4px;}.bg-purple-dark {background: #99a9bf;}.bg-purple {background: #d3dce6;}.bg-purple-light {background: #e5e9f2;}.grid-content {border-radius: 4px;min-height: 36px;}.row-bg {padding: 10px 0;background-color: #f9fafc;}
/styleContainer布局容器用于布局的容器组件方便快速搭建页面的基本结构 el-container styleheight: 500px; border: 1px solid #eeeel-aside width200px stylebackground-color: rgb(238, 241, 246)el-menu :default-openeds[1, 3]el-submenu index1template slottitlei classel-icon-message/i导航一/templateel-menu-item-grouptemplate slottitle分组一/templateel-menu-item index1-1选项1/el-menu-itemel-menu-item index1-2选项2/el-menu-item/el-menu-item-groupel-menu-item-group title分组2el-menu-item index1-3选项3/el-menu-item/el-menu-item-groupel-submenu index1-4template slottitle选项4/templateel-menu-item index1-4-1选项4-1/el-menu-item/el-submenu/el-submenuel-submenu index2template slottitlei classel-icon-menu/i导航二/templateel-menu-item-grouptemplate slottitle分组一/templateel-menu-item index2-1选项1/el-menu-itemel-menu-item index2-2选项2/el-menu-item/el-menu-item-groupel-menu-item-group title分组2el-menu-item index2-3选项3/el-menu-item/el-menu-item-groupel-submenu index2-4template slottitle选项4/templateel-menu-item index2-4-1选项4-1/el-menu-item/el-submenu/el-submenuel-submenu index3template slottitlei classel-icon-setting/i导航三/templateel-menu-item-grouptemplate slottitle分组一/templateel-menu-item index3-1选项1/el-menu-itemel-menu-item index3-2选项2/el-menu-item/el-menu-item-groupel-menu-item-group title分组2el-menu-item index3-3选项3/el-menu-item/el-menu-item-groupel-submenu index3-4template slottitle选项4/templateel-menu-item index3-4-1选项4-1/el-menu-item/el-submenu/el-submenu/el-menu/el-asideel-containerel-header styletext-align: right; font-size: 12pxel-dropdowni classel-icon-setting stylemargin-right: 15px/iel-dropdown-menu slotdropdownel-dropdown-item查看/el-dropdown-itemel-dropdown-item新增/el-dropdown-itemel-dropdown-item删除/el-dropdown-item/el-dropdown-menu/el-dropdownspan王小虎/span/el-headerel-mainel-table :datatableDatael-table-column propdate label日期 width140/el-table-columnel-table-column propname label姓名 width120/el-table-columnel-table-column propaddress label地址/el-table-column/el-table/el-main/el-container
/el-containerstyle.el-header {background-color: #B3C0D1;color: #333;line-height: 60px;}.el-aside {color: #333;}
/stylescriptexport default {data() {const item {date: 2016-05-02,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄};return {tableData: Array(20).fill(item)}}};
/script想要哪个粘贴哪个
如果觉得文章对您有帮助请帮忙点赞或者收藏如果在文章中发现什么错误或不准确的地方欢迎与我交流。
