Heim >Web-Frontend >View.js >Eine detaillierte Einführung in die ElementUI-Komponentenbibliothek
Dieser Artikel vermittelt Ihnen relevantes Wissen über vue und stellt hauptsächlich verwandte Themen zur ElementUI-Komponentenbibliothek vor Werfen wir einen Blick darauf. Ich hoffe, es wird für alle hilfreich sein. 🔜 Benutzer erstellen schnell Seiten mit leistungsstarken Funktionen und einheitlichen Stilen.
Offizielle Website-Adresse: http://element-cn.eleme.io/#/zh-CN
<!-- 引入ElementUI样式 --> <link> <script></script> <!-- 引入ElementUI组件库 --> <script></script>Container-Layout-Container ist Wird für das Layout verwendet. Die Containerkomponente eignet sich zum schnellen Erstellen der Grundstruktur der Seite:
<el-container></el-container>
: äußerer Container. Wenn die untergeordneten Elemente <el-header></el-header>
oder <el-footer></el-footer>
enthalten, werden alle untergeordneten Elemente vertikal nach oben und unten angeordnet, andernfalls werden sie horizontal angeordnet links und rechts
<el-aside></el-aside>
: Container in der Seitenleiste
: Hauptbereichscontainer
<el-footer></el-footer>
: Container für die untere Leiste
<div>
<el-container>
<el-header>Header</el-header>
<el-container>
<el-aside>Aside</el-aside>
<el-container>
<el-main>Main</el-main>
<el-footer>Footer</el-footer>
</el-container>
</el-container>
</el-container>
</div>
<style>
.el-header, .el-footer {
background-color: #B3C0D1;
color: #333;
text-align: left;
line-height: 60px;
}
.el-aside {
background-color: #D3DCE6;
color: #333;
text-align: center;
line-height: 200px;
}
.el-main {
background-color: #E9EEF3;
color: #333;
text-align: center;
line-height: 590px;
}
</style>
<script>
new Vue({
el:'#app'
});
</script>
Dropdown-Dropdown-Menü
<el-container></el-container>
:外层容器。当子元素中包含 <el-header></el-header>
或 <el-footer></el-footer>
时,全部子元素会垂直上下排列,否则会水平左右排列
<el-header></el-header>
:顶栏容器
<el-aside></el-aside>
:侧边栏容器
<el-main></el-main>
:主要区域容器
<el-footer></el-footer>
Eine Aktion oder ein Menü in ein Dropdown-Menü reduzieren.
<el-dropdown>
个人中心
<el-dropdown-menu>
<el-dropdown-item>退出系统</el-dropdown-item>
<el-dropdown-item>修改密码</el-dropdown-item>
<el-dropdown-item>联系管理员</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
NavMenu Navigationsmenü
Ein Menü, das Navigationsfunktionen für die Website bereitstellt.
<el-menu>
<el-submenu>
<template>
<i></i>
<span>导航一</span>
</template>
<el-menu-item>选项1</el-menu-item>
<el-menu-item>选项2</el-menu-item>
<el-menu-item>选项3</el-menu-item>
</el-submenu>
<el-submenu>
<template>
<i></i>
<span>导航二</span>
</template>
<el-menu-item>选项1</el-menu-item>
<el-menu-item>选项2</el-menu-item>
<el-menu-item>选项3</el-menu-item>
</el-submenu>
</el-menu>
Tabelle
wird verwendet, um mehrere Daten mit ähnlicher Struktur anzuzeigen. Die Daten können sortiert, gefiltert, verglichen oder für andere benutzerdefinierte Vorgänge verwendet werden.
<el-table>
<el-table-column></el-table-column>
<el-table-column></el-table-column>
<el-table-column></el-table-column>
<el-table-column>
<!--
slot-scope:作用域插槽,可以获取表格数据
scope:代表表格数据,可以通过scope.row来获取表格当前行数据,scope不是固定写法
-->
<template>
<el-button>编辑</el-button>
<el-button>删除</el-button>
</template>
</el-table-column>
</el-table>
<script>
new Vue({
el:'#app',
data:{
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}]
},
methods:{
handleUpdate(row){
alert(row.date);
},
handleDelete(row){
alert(row.date);
}
}
});
</script>
Paginierung Paginierung
Wenn die Datenmenge zu groß ist, verwenden Sie Paginierung, um die Daten aufzuschlüsseln.
<!--
current-change:内置的事件,当前页码改变时会触发,可以获取到改变之后的页码
-->
<el-pagination>
</el-pagination>
<script>
new Vue({
el:'#app',
methods:{
handleCurrentChange(page){
alert(page);
}
}
});
</script>
Nachrichtenaufforderung
wird häufig als Rückmeldungsaufforderung nach aktiven Vorgängen verwendet.
<el-button>消息</el-button>
<el-button>成功</el-button>
<el-button>警告</el-button>
<el-button>错误</el-button>
<script>
new Vue({
el: '#app',
methods: {
open1() {
this.$message('这是一条消息提示');
},
open2() {
this.$message({
message: '恭喜你,这是一条成功消息',
type: 'success'
});
},
open3() {
this.$message({
message: '警告哦,这是一条警告消息',
type: 'warning'
});
},
open4() {
this.$message.error('错了哦,这是一条错误消息');
}
}
})
</script>
Tabs
Separate Datensammlungen, die inhaltlich verwandt sind, aber zu unterschiedlichen Kategorien gehören.
<h3>基础的、简洁的标签页</h3>
<!--
通过value属性来指定当前选中的标签页
-->
<el-tabs>
<el-tab-pane>用户管理</el-tab-pane>
<el-tab-pane>配置管理</el-tab-pane>
<el-tab-pane>角色管理</el-tab-pane>
<el-tab-pane>定时任务补偿</el-tab-pane>
</el-tabs>
<h3>选项卡样式的标签页</h3>
<el-tabs>
<el-tab-pane>用户管理</el-tab-pane>
<el-tab-pane>配置管理</el-tab-pane>
<el-tab-pane>角色管理</el-tab-pane>
<el-tab-pane>定时任务补偿</el-tab-pane>
</el-tabs>
<h3>卡片化的标签页</h3>
<el-tabs>
<el-tab-pane>用户管理</el-tab-pane>
<el-tab-pane>配置管理</el-tab-pane>
<el-tab-pane>角色管理</el-tab-pane>
<el-tab-pane>定时任务补偿</el-tab-pane>
</el-tabs>
<script>
new Vue({
el: '#app'
})
</script>
Formular besteht aus Eingabefeldern, Selektoren, Optionsfeldern, Mehrfachauswahlfeldern und anderen Steuerelementen und wird zum Sammeln, Überprüfen und Übermitteln von Daten verwendet. In der Formularkomponente besteht jedes Formularfeld aus einer Form-Item-Komponente. Im Formularfeld können verschiedene Arten von Formularsteuerelementen platziert werden, darunter Eingabe, Auswahl, Kontrollkästchen, Radio, Schalter, Datumsauswahl und Zeitauswahl.
<!--
rules:表单验证规则
-->
<el-form>
<!--
prop:表单域 model 字段,在使用 validate、resetFields 方法的情况下,该属性是必填的
-->
<el-form-item>
<el-input></el-input>
</el-form-item>
<el-form-item>
<el-select>
<el-option></el-option>
<el-option></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-col>
<el-date-picker></el-date-picker>
</el-col>
<el-col>-</el-col>
<el-col>
<el-time-picker></el-time-picker>
</el-col>
</el-form-item>
<el-form-item>
<el-switch></el-switch>
</el-form-item>
<el-form-item>
<el-checkbox-group>
<el-checkbox></el-checkbox>
<el-checkbox></el-checkbox>
<el-checkbox></el-checkbox>
<el-checkbox></el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item>
<el-radio-group>
<el-radio></el-radio>
<el-radio></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item>
<el-input></el-input>
</el-form-item>
<el-form-item>
<el-button>立即创建</el-button>
</el-form-item>
</el-form>
<script>
new Vue({
el: '#app',
data:{
form: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
},
//定义校验规则
rules: {
name: [
{ required: true, message: '请输入活动名称', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
region: [
{ required: true, message: '请选择活动区域', trigger: 'change' }
]
}
},
methods:{
onSubmit() {
console.log(this.form);
//validate:对整个表单进行校验的方法,参数为一个回调函数。
//该回调函数会在校验结束后被调用,并传入两个参数:是否校验成功和未通过校验的字段。
this.$refs['form'].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
}
}
})
</script>
【Verwandte Empfehlungen:
Javascript-Video-Tutorial,
vue.js-Tutorial】
Das obige ist der detaillierte Inhalt vonEine detaillierte Einführung in die ElementUI-Komponentenbibliothek. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!