Element-React 提供了许多基础组件,除了 Breadcrumb、Dropdown 和 Steps 之外,还有一些其他常用的组件。以下是一些常见的 Element-React 基础组件:

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