Button 按钮
<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>
Input 输入框
<el-input v-model="inputValue" placeholder="请输入内容"></el-input>
Radio 单选框
<el-radio v-model="radioValue" label="选项一">选项一</el-radio>
<el-radio v-model="radioValue" label="选项二">选项二</el-radio>
Checkbox 多选框
<el-checkbox v-model="checkboxValue">多选框</el-checkbox>
Switch 开关
<el-switch v-model="switchValue"></el-switch>
Table 表格
<el-table :data="tableData">
<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>
Dialog 对话框
<el-dialog :visible.sync="dialogVisible" title="提示" width="30%">
<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>
Form 表单
<el-form :model="formData" label-width="80px">
<el-form-item label="姓名">
<el-input v-model="formData.name"></el-input>
</el-form-item>
<el-form-item label="年龄">
<el-input v-model="formData.age"></el-input>
</el-form-item>
</el-form>
以上只是一些基础组件的简单用法示例。你可以根据具体需求,查阅 Element-React 的官方文档以获取更详细的信息和更多组件的用法:[Element-React 官方文档](https://element.eleme.cn/#/zh-CN/component/installation)。
转载请注明出处:http://www.zyzy.cn/article/detail/5632/Element-React