elementui props

ElementUI Props 使用指南

ElementUI 是一个基于 Vue.js 的组件库，提供了丰富的 UI 组件。每个组件都有特定的 props（属性），用于配置组件的行为和外观。以下是常见组件 props 的说明和使用方法。

按钮组件 (el-button)

type：指定按钮类型，可选值包括 primary、success、warning、danger、info 或 text。
size：控制按钮大小，可选值包括 medium、small 或 mini。
plain：布尔值，设置为 true 时显示为朴素按钮。
disabled：布尔值，设置为 true 时禁用按钮。

<el-button type="primary" size="small" plain disabled>提交</el-button>

输入框组件 (el-input)

v-model：双向绑定输入值。
placeholder：输入框的占位文本。
disabled：布尔值，设置为 true 时禁用输入框。
clearable：布尔值，设置为 true 时可清空输入内容。

<el-input v-model="inputValue" placeholder="请输入内容" clearable></el-input>

表格组件 (el-table)

data：绑定表格数据，通常是一个数组。
border：布尔值，设置为 true 时显示边框。
stripe：布尔值，设置为 true 时显示斑马纹效果。

<el-table :data="tableData" border stripe>
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
</el-table>

对话框组件 (el-dialog)

visible：控制对话框的显示与隐藏，通常绑定到一个布尔变量。
title：设置对话框的标题。
width：设置对话框的宽度，可以是百分比或固定像素值。

<el-dialog :visible.sync="dialogVisible" title="提示" width="50%">
  <span>这是一段内容</span>
</el-dialog>

表单组件 (el-form)

model：绑定表单数据对象。
rules：绑定表单验证规则。
label-width：设置表单标签的宽度。

<el-form :model="formData" :rules="formRules" label-width="100px">
  <el-form-item label="用户名" prop="username">
    <el-input v-model="formData.username"></el-input>
  </el-form-item>
</el-form>

分页组件 (el-pagination)

total：总数据条数。
page-size：每页显示的数据条数。
current-page：当前页码。

<el-pagination :total="100" :page-size="10" :current-page="1"></el-pagination>

注意事项

• 使用 props 时需确保传入的数据类型与组件要求一致。
• 动态 props 通常使用 v-bind 或简写 : 进行绑定。
• 部分 props 支持 .sync 修饰符，用于实现双向绑定。

通过合理配置 props，可以灵活控制 ElementUI 组件的行为和样式，满足不同的业务需求。