使用Element-UI

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>