Author：
Dawn_T17🥥
目录
一.简介
Element 库通常指的是前端开发中用于构建用户界面的一组组件和工具的集合。
例如在 Vue.js 框架中，Element UI 是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。
它具有以下特点：
- 丰富的组件：包含了常见的诸如按钮、输入框、表格、菜单、弹窗等各种组件，满足了大部分业务场景的需求。
- 比如
Button组件，提供了多种样式和功能的按钮。 - 还有复杂的
Table组件，支持排序、筛选、分页等功能。
- 比如
- 美观的样式：默认提供了一套美观且风格统一的视觉样式，使界面看起来简洁、专业。
- 良好的交互性：组件的交互设计符合用户习惯，提升了用户体验。
- 像
Dialog弹窗组件，具有清晰的提示和操作流程。
- 像
- 易于使用和定制：开发者可以方便地引入和使用组件，并且能够根据项目需求对组件的样式和功能进行定制。
总的来说，Element 库能够大大提高前端开发的效率和质量，让开发者能够更专注于业务逻辑的实现。
二.快速入门
直接去elemen官方网站搜索
1.安装组件库在当前页面
在当前项目终端中用npm下载获取
2.引入ElementUi组件库
官网中有介绍如何导入
import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui'; //1
import 'element-ui/lib/theme-chalk/index.css';//2
import router from './router'
Vue.config.productionTip = false
Vue.use(ElementUI); //3
new Vue({
router,
render: h => h(App)
}).$mount('#app')
3.创立组件，去官网复制组件代码
组件一般放在views目录下，不放在根目录（app.vue)下
遵循驼峰命名法字母都大写开头（因为会用名字调用），不然后面可能会报错
在官网找到想要的组件，复制代码
在views目录下创建一个存放组件的vue文件
直接按格式构造好，再把代码粘贴进去
<template>
<div>
<!-- button按钮 -->
<el-row>
<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="info">信息按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
</el-row>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>因为运行效果主要看根目录，所以要把自己的vue文件，挂到根目录下
<template>
<div id="app">
<!-- <h1>{{ message }}</h1> -->
<element-view></element-view>
</div>
</template>
<script>
import ElementView from './views/element/ElementView.vue'
export default{
components: { ElementView },
data() {
return {
message:"hello world"
}
},
}
</script>
<style>
#app {
}
</style>
有一个标签 <文件名字首个单词-view> 后面的导入会自动生成
在 Vue 中，components 是一个选项，用于注册和管理可复用的组件。
当您在一个 Vue 组件（比如 app.vue ）中使用 components 选项时，您可以将其他自定义组件注册进来，以便在当前组件的模板中使用。
****TIP****
关于根标签
template中只能存在一个根标签。所以当多个Element组件同时放进去时候，会报错，因为每一个组件都有自己的标签。
所以在template中先建一个div标签，让这个div标签当根标签，其他组件都放在这个div标签里，都成为这个根标签的子标签，就不会冲突报错了。
成功 后运行
案例：
<template>
<div>
<!-- Table表格 -->
<el-table :data="tableData" border style="width: 100%">
<el-table-column prop="date" label="日期" width="180">
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column prop="address" label="地址">
</el-table-column>
<!-- 分页 -->
</el-table>
<el-pagination background layout="sizes,prev, pager, next,jumper,total" @size-change="handleSizeChange"
@current-change="handleCurrentChange" :total="1000">
</el-pagination>
<br><br>
<!-- 对话框 -->
<el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>
<el-dialog title="收货地址" :visible.sync="dialogTableVisible">
<el-table :data="gridData">
<el-table-column property="date" label="日期" width="150"></el-table-column>
<el-table-column property="name" label="姓名" width="200"></el-table-column>
<el-table-column property="address" label="地址"></el-table-column>
</el-table>
</el-dialog>
<br><br>
<!-- 表单 -->
<el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>
<el-dialog title="Form表单" :visible.sync="dialogFormVisible">
<el-form :model="form">
<el-form-item label="活动名称" :label-width="formLabelWidth">
<el-input v-model="form.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="活动区域" :label-width="formLabelWidth">
<el-select v-model="form.region" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
<el-option label="区域三" value="nanjing"></el-option>
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click=submit>确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
gridData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}],
dialogTableVisible: false,
dialogFormVisible: false,
form: {
name: '',
region: '',
date1: '',
date2: '',
date3: '',
delivery: false,
type: [],
resource: '',
desc: ''
},
formLabelWidth: '120px',
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
}
},
methods: {
handleSizeChange(a) {
alert("每页条数为" + a)
},
handleCurrentChange: function (b) {
alert("当前页码为" + b)
},
submit(){
alert(JSON.stringify(this.form))
}
},
}
</script>
<style></style>Element提供了一些布局组件，快速搭建一个页面
关于element插槽
插槽（Slots）是在组件化开发中，用于增强组件灵活性和可扩展性的重要概念。
插槽允许父组件向子组件传递内容，并在子组件的特定位置进行显示。
scope（作用域) 所包含的属性取决于子组件通过插槽传递的数据。具体能跟哪些属性完全由子组件决定。
例如，如果子组件传递了 row 、 item 、 data 等属性，那么在父组件中通过 scope 就可以访问 scope.row 、 scope.item 、 scope.data 。
再比如，子组件可能传递一个包含多个字段的对象，如 scope.user ，而 user 对象又可能包含 name 、 age 等属性，那么在父组件中就可以通过 scope.user.name 、 scope.user.age 来获取具体的值。
这完全取决于子组件在插槽中传递数据的结构和内容。
把prop删除，通过插槽获取数据，并对数据进行一些处理
1602
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
