Vue教学17：Element UI基础组件上手，打造美观实用的Vue应用

大家好，欢迎回到我们的Vue教学系列博客！在前十六篇博客中，我们学习了Vue.js的基础知识、安装Node.js与npm、使用Vue Devtools进行调试、Vue实例与生命周期钩子、数据绑定（单向与双向）、计算属性与侦听器、条件渲染和列表渲染、事件处理、组件之间的传值（props和$emit）、动态组件和异步组件、组件间的通信（provide/inject，event bus），以及探索并尝试安装一个基于Vue.js的UI框架——Element UI。今天，我们将深入探讨并学习如何使用Element UI的基础组件，以打造美观实用的Vue应用。无论你是Vue新手小白，还是有一定基础的开发者，掌握Element UI的基础组件都将大大提高你的开发效率。

一、Element UI基础组件概览

Element UI提供了丰富的组件，包括按钮、输入框、表格、弹窗、分页等。这些组件可以帮助我们快速搭建界面，提高开发效率。接下来，我们将学习一些常用的Element UI基础组件。

二、按钮组件（ElButton）

按钮组件（ElButton）是Element UI中非常基础且重要的组件之一，它用于触发各种操作或事件。按钮组件支持多种类型，包括主要按钮、成功按钮、信息按钮、警告按钮和危险按钮等，每种类型的按钮都有其特定的样式和用途。

1. 按钮类型

按钮的类型决定了按钮的外观和默认行为。以下是一些常用的按钮类型：

主要按钮（Primary）：默认样式，通常用于主要操作。
成功按钮（Success）：表示成功的操作，如“保存”或“提交”。
信息按钮（Info）：表示提供信息或状态，如“详情”或“帮助”。
警告按钮（Warning）：表示可能会有副作用的操作，如“删除”或“取消”。
危险按钮（Danger）：表示危险或破坏性操作，如“删除”或“重置”。

<template>
  <div>
    <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>
  </div>
</template>

在这个例子中，我们使用了不同类型的按钮，包括主要按钮、成功按钮、信息按钮、警告按钮和危险按钮。

2. 禁用状态

<template>
  <div>
    <el-button type="primary" :disabled="true">禁用按钮</el-button>
  </div>
</template>

在这个例子中，我们通过:disabled="true"属性禁用了一个按钮。

3. 圆角按钮

<template>
  <div>
    <el-button type="primary" round>圆角按钮</el-button>
  </div>
</template>

在这个例子中，我们通过round属性创建了一个圆角按钮。

4. 加载状态

按钮还可以显示加载状态，这通常用于表示后台操作正在进行中。

<el-button type="primary" :loading="loading">加载按钮</el-button>

在这个例子中，按钮的加载状态通过:loading="loading"绑定了一个布尔值。

5. 按钮尺寸

按钮有多种尺寸，包括大号按钮、小号按钮和默认尺寸。

<el-button type="primary" size="large">大号按钮</el-button>
<el-button type="primary" size="small">小号按钮</el-button>
<el-button type="primary" size="default">默认按钮</el-button>

在这个例子中，按钮有三种不同的尺寸，通过size属性进行设置。

6. 图标按钮

按钮可以包含图标，常用于需要视觉提示但不需要文字说明的情况。

<el-button type="primary" icon="el-icon-search">搜索按钮</el-button>

在这个例子中，按钮包含了一个搜索图标。

7. 按钮组

当需要放置多个相关按钮时，可以使用按钮组（Button Group）。

<el-button-group>
  <el-button type="primary">上一页</el-button>
  <el-button type="primary">下一页</el-button>
</el-button-group>

在这个例子中，两个按钮被放置在一个按钮组中，通常用于实现导航或切换功能。

三、输入组件（ElInput）

输入组件（ElInput）是Element UI中用于创建输入框的组件，它常用于收集用户数据，如文本、密码、数字等。ElInput组件支持多种类型，包括普通文本输入、密码输入、数字输入等，并且可以通过v-model指令实现双向数据绑定。

1. 基础用法

ElInput的基础用法非常简单，只需要在模板中添加<el-input>标签，并使用v-model指令绑定数据即可。

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

<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  }
};
</script>

在这个例子中，我们创建了一个简单的文本输入框，用户可以在其中输入内容，输入框的内容会实时更新到inputValue数据属性中。

2. 类型

ElInput支持多种类型，包括：

text：普通文本输入。
password：密码输入，显示为点。
number：数字输入，支持数字键盘。
email：电子邮件输入，会自动校验邮箱格式。
url：URL输入，会自动校验URL格式。

<template>
  <div>
    <el-input v-model="inputValue" placeholder="请输入内容" type="text"></el-input>
    <el-input v-model="passwordValue" placeholder="请输入密码" type="password"></el-input>
    <el-input v-model="numberValue" placeholder="请输入数字" type="number"></el-input>
    <el-input v-model="emailValue" placeholder="请输入邮箱" type="email"></el-input>
    <el-input v-model="urlValue" placeholder="请输入网址" type="url"></el-input>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
      passwordValue: '',
      numberValue: '',
      emailValue: '',
      urlValue: ''
    };
  }
};
</script>

3. 禁用状态

输入组件也可以被禁用，禁用后的输入框将不可编辑。

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

在这个例子中，输入框被设置为禁用状态，通过:disabled="true"绑定了一个布尔值。

4. 自动完成

ElInput支持自动完成功能，可以用于提示用户输入。

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

在这个例子中，通过autocomplete="off"属性禁用了浏览器的自动完成功能。

5. 自动聚焦

输入组件可以自动聚焦，以便用户直接开始输入。

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

在这个例子中，通过autofocus属性使输入框在页面加载时自动聚焦。

6. 文本area

对于多行文本输入，可以使用textarea类型。

<el-input v-model="textareaValue" placeholder="请输入多行文本" type="textarea"></el-input>

在这个例子中，我们创建了一个多行文本输入框。

四、表格组件（ElTable）

表格组件（ElTable）是Element UI中用于显示和操作表格数据的组件，它提供了丰富的功能，如排序、筛选、分页等，非常适合展示复杂的数据列表。

1. 基础用法

<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <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>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }
      ]
    };
  }
};
</script>

在这个例子中，我们使用el-table和el-table-column组件创建了一个简单的表格，并使用:data="tableData"属性绑定了表格数据。

2. 表格操作

<template>
  <div>
    <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <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>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        // ... 省略数据部分
      ],
      multipleSelection: []
    };
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    }
  }
};
</script>

在这个例子中，我们添加了一个多选列，并定义了一个handleSelectionChange方法，用于处理表格行的选中状态变化。

3. 表格属性

ElTable支持多种属性，用于控制表格的行为和样式：

:data="tableData"：绑定表格的数据源。
style="width: 100%"：设置表格的宽度。
max-height="200px"：设置表格的最大高度。
border：是否显示表格边框。

4. 列属性

ElTableColumn支持多种属性，用于控制列的行为和样式：

prop：列对应的数据字段。
label：列的标题。
width：列的宽度。
sortable：是否启用列的排序功能。
filters：列的筛选条件。
show-overflow-tooltip：是否显示溢出内容的工具提示。

5. 排序

要启用表格的排序功能，只需要在<el-table-column>中设置sortable属性为true。

<el-table-column prop="date" label="日期" width="180" sortable></el-table-column>

在这个例子中，日期列被设置为可排序的。

6. 筛选

表格的筛选功能通过filters属性实现，它是一个对象数组，每个对象定义了一个筛选条件。

<el-table-column prop="date" label="日期" width="180">
  <template slot-scope="scope">
    {{ scope.row.date }}
  </template>
</el-table-column>

在这个例子中，我们创建了一个简单的筛选模板，用于显示日期列的值。

7. 分页

要实现表格的分页功能，可以使用<el-pagination>组件，并通过:current-page="currentPage"和:page-size="pageSize"属性绑定当前页和每页条数。

<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <!-- ... 省略其他列定义 -->
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="100">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      currentPage: 1,
      total: 100    
    };
  },
  methods: {
    handleSizeChange(newSize) {
      console.log(`每页 ${newSize} 条`);
    },
    handleCurrentChange(newPage) {
      this.currentPage = newPage;
      console.log(`当前页: ${newPage}`);
    }
  }
};
</script>

在这个例子中，我们结合了表格和分页组件，以实现数据的分页显示。

五、弹窗组件（ElDialog）

弹窗组件（ElDialog）是Element UI中用于创建模态对话框的组件，它允许我们在应用的顶层覆盖一个新页面，显示特定的信息或表单，直到用户与之交互。弹窗组件在处理用户输入、显示详细信息或确认操作时非常有用。

1. 基础用法

ElDialog的基础用法包括创建对话框和定义其内容。首先，你需要使用<el-dialog>标签包裹对话框，并使用title属性设置对话框的标题。

<template>
  <div>
    <el-button type="primary" @click="dialogVisible = true">打开对话框</el-button>
    <el-dialog :visible.sync="dialogVisible" title="欢迎对话框">
      <span>这是一段信息</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false
    };
  }
};
</script>

在这个例子中，我们使用el-dialog组件创建了一个简单的模态对话框，并通过:visible.sync="dialogVisible"属性控制对话框的显示和隐藏。

2. 属性

ElDialog支持多种属性，用于控制对话框的行为和样式：

:visible.sync="dialogVisible"：控制对话框的显示和隐藏，通常与Vue数据属性绑定。
title="欢迎对话框"：设置对话框的标题。
width="30%"：设置对话框的宽度。
before-close：设置对话框关闭前的钩子函数。
close-on-click-modal：点击模态背景是否关闭对话框。
show-close：是否显示关闭按钮。

3. 插槽

ElDialog支持插槽，允许你在对话框内部自定义内容。除了默认的插槽外，还可以使用以下插槽：

title：自定义对话框的标题区域。
footer：自定义对话框的底部操作区域。

<el-dialog :visible.sync="dialogVisible" title="自定义对话框">
  <span>自定义内容</span>
  <template v-slot:title>
    <h2>自定义标题</h2>
  </template>
  <template v-slot:footer>
    <el-button @click="dialogVisible = false">自定义按钮</el-button>
  </template>
</el-dialog>

在这个例子中，我们自定义了对话框的标题和底部操作按钮。