1. Dialog 对话框：
Dialog 组件用于创建对话框，用于弹出额外的信息或操作。可以包含文本、表单、或其他自定义内容。
<template>
<div>
<el-button @click="showDialog">显示对话框</el-button>
<el-dialog :visible.sync="dialogVisible" title="对话框标题">
<!-- 对话框内容 -->
<p>这是对话框的内容。</p>
<!-- 对话框底部按钮 -->
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import { ElButton, ElDialog } from 'element-plus';
export default {
components: {
ElButton,
ElDialog,
},
data() {
return {
dialogVisible: false,
};
},
methods: {
showDialog() {
this.dialogVisible = true;
},
},
};
</script>
2. Table 表格：
Table 组件用于展示数据表格，支持分页、排序、筛选等功能。
<template>
<div>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
</div>
</template>
<script>
import { ElTable, ElTableColumn } from 'element-plus';
export default {
components: {
ElTable,
ElTableColumn,
},
data() {
return {
tableData: [
{ name: 'John', age: 28, address: 'New York' },
{ name: 'Jane', age: 24, address: 'Los Angeles' },
{ name: 'Doe', age: 32, address: 'Chicago' },
],
};
},
};
</script>
3. DatePicker 日期选择器：
DatePicker 组件用于选择日期，支持多种日期格式和配置。
<template>
<div>
<el-date-picker v-model="pickedDate" type="date" placeholder="选择日期"></el-date-picker>
</div>
</template>
<script>
import { ElDatePicker } from 'element-plus';
export default {
components: {
ElDatePicker,
},
data() {
return {
pickedDate: '',
};
},
};
</script>
这只是 Element Plus 提供的一小部分组件。你可以根据项目需要，查阅 Element Plus 的官方文档，了解更多组件的使用和配置信息。
转载请注明出处：http://www.zyzy.cn/article/detail/5574/ElementPlus