Element-UI 常用组件和属性总结
Button 按钮
Button 组件是 Element-UI 中最基础的组件之一。它可以用于触发事件或者进行页面跳转。常用属性包括：
- type：按钮类型，可选值有 primary、success、warning、danger、info。
- size：按钮大小，可选值有 medium、small、mini。
- plain：是否为朴素按钮，即是否有边框和背景色。
- round：是否为圆角按钮。
- loading：是否为加载状态。
- disabled：是否禁用按钮。
示例代码:
<template>
<div>
<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
<el-button type="info">信息按钮</el-button>
<el-button>默认按钮</el-button>
<br />
<el-button size="medium">中等按钮</el-button>
<el-button size="small">小型按钮</el-button>
<el-button size="mini">超小按钮</el-button>
<br />
<el-button plain>朴素按钮</el-button>
<el-button round>圆角按钮</el-button>
<el-button loading>加载按钮</el-button>
<el-button disabled>禁用按钮</el-button>
</div>
</template>
Input 输入框
Input 组件是 Element-UI 中常用的表单组件之一。它可以用于用户输入文本、数字、密码等内容。常用属性包括：
- type：输入框类型，可选值有 text、textarea、password、email、number、date、datetime 等。
- placeholder：输入框的提示文本。
- clearable：是否显示清空按钮。
- disabled：是否禁用输入框。
- readonly：是否只读。
- v-model：绑定输入框的值。
示例代码：
<template>
<div>
<el-input v-model="inputValue" placeholder="请输入内容"></el-input>
<br />
<el-input v-model="inputValue" placeholder="请输入密码" type="password"></el-input>
<br />
<el-input v-model="inputValue" placeholder="请输入数字" type="number"></el-input>
<br />
<el-input v-model="inputValue" placeholder="请输入日期" type="date"></el-input>
<br />
<el-input v-model="inputValue" placeholder="请输入多行文本" type="textarea"></el-input>
<br />
<el-input v-model="inputValue" placeholder="只读输入框" readonly></el-input>
<el-input v-model="inputValue" placeholder="禁用输入框" disabled></el-input>
<el-input v-model="inputValue" placeholder="带清空按钮" clearable></el-input>
</div>
</template>
Select 选择器
Select 组件是 Element-UI 中常用的表单组件之一。它提供了多种下拉选项，可以进行单选、多选等操作。常用属性包括：
- multiple：是否多选，默认为 false。
- placeholder：选择器占位符。
- clearable：是否可清空，默认为 false。
- disabled：是否禁用选择器，默认为 false。
- size：选择器尺寸，可选值有 medium、small、mini，默认为medium。
- filterable：是否可搜索选项，默认为 false。
- remote：是否使用远程搜索，默认为 false。
- remote-method：远程搜索函数。
- loading：是否加载中。
示例代码：
<el-select v-model="value" placeholder="请选择">
<el-option label="选项1" value="1"></el-option>
<el-option label="选项2" value="2"></el-option>
<el-option label="选项3" value="3"></el-option>
</el-select>
<el-select v-model="value" multiple placeholder="请选择">
<el-option label="选项1" value="1"></el-option>
<el-option label="选项2" value="2"></el-option>
<el-option label="选项3" value="3"></el-option>
</el-select>
<el-select v-model="value" filterable remote :remote-method="querySearchAsync"></el-select>
Table 表格
Table 组件是 Element-UI 中常用的数据展示组件之一。它提供了多种功能，包括排序、筛选、分页等。常用属性包括：
- data：表格数据。
- columns：表格列的配置。
- height：表格高度。
- border：是否显示表格边框，默认为 false。
- stripe：是否显示间隔斑马纹，默认为 false。
- size：表格尺寸，可选值有 medium、small、mini，默认为 medium。
- fit：是否自适应父元素宽度，默认为 true。
- empty-text：表格为空时的提示文本。
示例代码：
<el-table :data="tableData" :height="250" border>
<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>
Form 表单
Form 组件是 Element-UI 中常用的表单组件之一。它提供了表单的基本功能，包括表单验证、表单重置等。常用属性包括：
- model：表单数据模型。
- rules：表单验证规则。
- inline：是否为行内表单，默认为 false。
- label-position：表单域标签的位置，可选值有 right、left、top，默认为 right。
- label-width：表单域标签的宽度，如 "50px"，默认为自动计算宽度。
- size：表单尺寸，可选值有 medium、small、mini，默认为 medium。
示例代码：
<el-form :model="form" :rules="rules" ref="form" label-width="80px">
<el-form-item label="姓名" prop="name">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="年龄" prop="age">
<el-input v-model.number="form.age"></el-input>
</el-form-item>
<el-form-item label="性别" prop="gender">
<el-radio-group v-model="form.gender">
<el-radio label="male">男</el-radio>
<el-radio label="female">女</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">提交</el-button>
<el-button @click="resetForm">重置</el-button>
</el-form-item>
</el-form>
Dialog 对话框
Dialog 组件是 Element-UI 中常用的弹窗组件之一。它提供了弹窗的基本功能，包括弹窗内容、弹窗标题、弹窗按钮等。常用属性包括：
- title：弹窗标题。
- visible：弹窗是否可见。
- width：弹窗宽度，默认为 50%。
- center：弹窗是否居中显示，默认为 false。
- modal：是否显示遮罩层，默认为 true。
- show-close：是否显示关闭按钮，默认为 true。
- before-close：弹窗关闭前的回调函数。
示例代码：
<template>
<div>
<el-button type="primary" @click="dialogVisible = true">打开弹窗</el-button>
<el-dialog
title="提示"
:visible="dialogVisible"
:before-close="handleBeforeClose"
:close-on-click-modal="false"
width="30%"
>
<p>这是一段内容。</p>
<p>这是一段内容。</p>
<p>这是一段内容。</p>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
dialogVisible: false,
};
},
methods: {
handleBeforeClose(done) {
this.$confirm("确定关闭？")
.then(() => {
done();
})
.catch(() => {});
},
},
};
</script>
