Breadcrumb 面包屑 | Element Plus (gitee.io)https://element-plus.gitee.io/zh-CN/component/breadcrumb.html
注意:如果使用的是element-ui,直接省略安装这一步,因为在element-ui 中,通过使用类属性 separator-class="el-icon-arrow-right" 就可以显示图标分隔符了。
1.打开可视化面板,选择依赖--安装依赖--运行依赖
2. 搜索 element-plus-icoons
由于是学习探索阶段,全局引入后,页面直接使用属性 separator-icon="arrowRight" ,分隔图标显示不出来。暂时先放这里。有那个大佬看到这里,知道的,还请留个言告知一二。
separator-class="el-icon-arrow-right"
注意:由于所用到的组件是按需导入,所以每使用到一个新的组件,务必进行导入后方可生效
注意:每一个组件,都是一个类选择器
注意:在栅格系统中,每一行总共设置为24 小格子
添加用户
1.根据接口文档,动态请求数据填充表单
2. 理清楚了请求路径和方法以及参数后,接下来,发起后台请求。
注意:1.由于get 会返回一个 promise 对象,所以为了简化promise 操作,需要添加 async 和 await 来优化本次的异步操作。
2. 使用到了 await后 ,该请求就会得到一个数组对象。紧接着,需要对该数据对象进行解构赋值。
3. 接下来,把数据保存在 data 数据区定义的对象上面
实现思路:
通过作用域插槽来实现
1. 在状态模板内容中,放置一个 template
2. 定义一个 v-slot="scope" 来接收一下数据。
3. 其中,这个 scope 身上有一个属性,就是scope.row 它就代表当前这一行数据
总结:
1. 状态列,首先它是属于一个单元格,那也就肯定属于某一行。所以只要拿到状态列所在的行的那一行数据,就可以通过 . 出来状态的具体属性值。然后就可以按需来渲染状态的效果了。
/* 全局样式表 */
html,body,#app{
/* 高度占100% */
height: 100%;
/* margin重置为0 */
margin: 0;
/* padding重置为0 */
padding: 0;
}
.el-breadcrumb{
/* 设置下拉距 */
margin-bottom: 15px;
/* 重置字体大小 */
font-size: 12px;
}
.el-card{
box-shadow: 0 1px 1px rgba(0,0,0,0.15) !important;
}
.el-table{
margin-top: 15px;
font-size: 12px;
}
首页
用户管理
用户列表
添加用户
import {
ElButton,
ElForm,
ElFormItem,
ElInput,
ElRow,
ElMessage,
ElContainer,
ElHeader,
ElAside,
ElMain,
ElMenu,
ElSubmenu,
ElMenuItem,
ElIcon,
ElBreadcrumb,
ElBreadcrumbItem,
ElCard,
ElCol,
ElTableColumn,
ElTable,
ElSwitch
} from 'element-plus'
import {
Location,
Menu as IconMenu,
Search
} from '@element-plus/icons'
import {
ArrowRight
} from '@element-plus/icons-vue'
export default (app) => {
app.use(ElButton)
app.use(ElForm)
app.use(ElFormItem)
app.use(ElInput)
app.use(ElRow)
app.use(ElContainer)
app.use(ElHeader)
app.use(ElAside)
app.use(ElMain)
app.use(ElMenu)
app.use(ElSubmenu)
app.use(ElMenuItem)
app.use(ElIcon)
app.use(ElBreadcrumb)
app.use(ElBreadcrumbItem)
app.use(ElCard)
app.use(ElCol)
app.use(ElTable)
app.use(ElTableColumn)
app.use(ElSwitch)
app.component('location', Location)
app.component('iconMenu', IconMenu)
app.component('arrowRight', ArrowRight)
app.component('search', Search)
app.config.globalProperties.$message = ElMessage
}
以上出自:
【黑马程序员】前端开发之Vue项目实战_Element-UI【配套源码+笔记】_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1x64y1S7S7?p=43
【黑马程序员】前端开发之Vue项目实战_Element-UI【配套源码+笔记】_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1x64y1S7S7?p=44【黑马程序员】前端开发之Vue项目实战_Element-UI【配套源码+笔记】_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1x64y1S7S7?p=45
【黑马程序员】前端开发之Vue项目实战_Element-UI【配套源码+笔记】_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1x64y1S7S7?p=46&spm_id_from=pageDriver
【黑马程序员】前端开发之Vue项目实战_Element-UI【配套源码+笔记】_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1x64y1S7S7?p=47&spm_id_from=pageDriver