首页

# 消息提示组件

获取本节实验初始项目：

wget https://labfile.oss.aliyuncs.com/courses/5246/elementui.zip && unzip elementui.zip

# 知识点

  • Alert 警告
  • Loading 加载
  • Message 消息提示
  • MessageBox 弹框
  • Notification 通知

# Alert 警告

有时候，页面上有些重要的交互信息，想让浏览者重点关注，我们会以弹出窗的方式将其在恰当时机展示出来，而给这些信息添加一个鲜明的背景颜色，更能让人一目了然。

在 Element UI 中，提供了 Alert 组件用于页面这些重要提示信息的展示。 <el-alert> 有四种不同颜色的主题，由 type 属性来指定主题，由 title 属性来指定消息内容。

type 属性的属性值如下表所示：

属性值说明
success表示成功提示的文案。
info表示消息提示的文案，为默认值。
warning表示警告提示的文案。
error表示错误提示的文案。

我们来看看代码是如何实现的。

新建一个 src/views/Alert.vue 文件，并对 App.vue 文件做如下修改。

<template>
  <div id="app">
    <Alert />
  </div>
</template>
<script>
  import Alert from "./views/Alert.vue";
  export default {
    name: "App",
    components: {
      Alert,
    },
  };
</script>
<style></style>
在 Alert.vue 中写入以下代码：
<template>
  <div>
    <el-alert title="信息发送成功啦～～" type="success"> </el-alert>
    <el-alert title="这是一条来自宇宙岛的消息" type="info"> </el-alert>
    <el-alert title="警告：请不要随意发送消息" type="warning"> </el-alert>
    <el-alert title="非法操作，发送失败" type="error"> </el-alert>
  </div>
</template>
<script></script>
<style>
  .el-alert {
    width: 30%;
    margin-top: 10px;
  }
</style>
显示效果如下：
1678291380467
Alert 组件还有很多属性，比如可以实现改变提示框背景颜色的透明度、自定义关闭按钮、添加 icon 图标、文字居中等操作。这些属性的使用方法都是相同的，我就举个综合例子带大家看看这些属性的效果。
对 Alert.vue 文件做如下修改。
<template>
  <div>
    <!-- 该提示不可以被关闭 -->
    <el-alert
      title="信息发送成功啦～～"
      type="success"
      effect="light"
      :closable="false"
    >
    </el-alert>
    <!-- 关闭该提示时，发送提示消息 “你要关闭我吗”-->
    <el-alert
      title="信息发送成功啦～～"
      type="success"
      effect="dark"
      close-text="你要关闭我吗"
      show-icon
    >
    </el-alert>
    <!-- 关闭提示时，回调 alert-->
    <el-alert
      title="这是一条来自宇宙岛的消息"
      type="info"
      @close="hello"
      show-icon
    >
    </el-alert>
    <!-- 文本居中 -->
    <el-alert title="警告：请不要随意发送消息" type="warning" center show-icon>
    </el-alert>
    <!-- 带有 icon 和辅助性文字介绍 -->
    <el-alert
      title="非法操作，发送失败"
      type="error"
      description="输入信息不能包含 ¥、$、@ 等字符"
      show-icon
    >
    </el-alert>
  </div>
</template>
<script>
  export default {
    methods: {
      hello() {
        alert("地球居民好!");
      },
    },
  };
</script>
<style>
  .el-alert {
    width: 30%;
    margin-top: 10px;
  }
</style>
显示效果如下所示：
1678291427646
代码属性说明如下：
  • effect 属性用于改变主题，就是背景颜色的透明度，它有两个属性值 light 和 dark ，默认值为 light 。
  • closable 属性用于是否允许关闭提示条，属性值为 false ，表示不允许关闭。
  • close-text 属性是设置关闭按钮自定义文本。
  • show-icon 属性是用来设置对应 type 主题的 icon 图标。
  • @close 用来绑定关闭提示时触发的事件 hello 。
  • center 属性用于设置文字居中显示。
  • description 属性用来设置辅助性文字。
ok，Alert 组件就为大家讲到这里，接下来为大家介绍 Loading 组件。
# Loading 加载
我们浏览网页时，当数据没有加载出来，一般会在页面显示正在加载数据的动效，如下图所示。
1678291457312
Element 提供了两种调用 Loading 的方法：指令和服务。
实验中只给大家介绍指令的用法，如想了解服务请看官方文档。
对于自定义指令 v-loading ，只需要绑定 Boolean 即可，其使用基本格式如下所示：
<template>
  <el-table v-loading="loading"> ... </el-table>
</template>
<script>
  export default {
    data() {
      return {
        loading: "true",
      };
    },
  };
</script>
我们来看例子～
新建一个 src/views/Loading.vue 文件，并对 App.vue 文件做如下修改。
<template>
  <div id="app">
    <Loading />
  </div>
</template>
<script>
  import Loading from "./views/Loading.vue";
  export default {
    name: "App",
    components: {
      Loading,
    },
  };
</script>
<style></style>
在 Loading.vue 文件中写入以下内容。
<template>
  <el-table v-loading="loading" :data="tableData" style="width:30%">
    <el-table-column prop="name" label="姓名" width="100"> </el-table-column>
    <el-table-column prop="tel" label="电话" width="150"> </el-table-column>
    <el-table-column prop="address" label="地址" width="180"> </el-table-column>
  </el-table>
</template>
<script>
  export default {
    data() {
      return {
        tableData: [
          {
            name: "小蓝",
            tel: "1234567899",
            address: "杭州哆啦A梦街道",
          },
          {
            name: "小白",
            tel: "3214497808",
            address: "杭州爱丽丝街道",
          },
        ],
        loading: "true",
      };
    },
  };
</script>
显示效果如下所示：
1678408560726
但就这样简简单单的转圈圈，其实看不出来这个页面发生了什么事情，我们可以使用如下表所示的属性来自定义加载文案、图标和背景色，突出此状态为数据加载状态。
属性说明类型
element-loading-text显示在加载图标下方的加载文案。string
element-loading-spinner自定义加载图标类名。string
element-loading-background遮罩背景色。string
我们来看看效果，对 Loading.vue 文件做如下修改。
<template>
  <div>
    <el-table
      v-loading="loading"
      element-loading-text="拼命加载中..."
      element-loading-spinner="el-icon-loading"
      element-loading-background="#B5DEFF"
      :data="tableData"
      style="width:30%"
    >
      <el-table-column prop="name" label="姓名" width="100"> </el-table-column>
      <el-table-column prop="tel" label="电话" width="150"> </el-table-column>
      <el-table-column prop="address" label="地址" width="180">
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        tableData: [
          {
            name: "小蓝",
            tel: "1234567899",
            address: "杭州哆啦A梦街道",
          },
          {
            name: "小白",
            tel: "3214497808",
            address: "杭州爱丽丝街道",
          },
        ],
        loading: true,
        timer: null,
      };
    },
    mounted() {
      this.timer = setTimeout(this.get, 1000);
    },
    methods: {
      get() {
        this.loading = false;
      },
    },
    beforeDestroy() {
      clearTimeout(this.timer);
    },
  };
</script>
显示效果如下所示：
1678408669507
# Message 消息提示
Message 消息提示 常用于主动操作后的反馈提示。
最基本的消息提示是当你进行某个操作后，出现一个消息提示，几秒之后自动消失。那我们看看如何用代码去实现吧～
新建一个 src/views/Message.vue 文件，并对 App.vue 文件做如下修改。
<template>
  <div id="app">
    <Message />
  </div>
</template>
<script>
  import Message from "./views/Message.vue";
  export default {
    name: "App",
    components: {
      Message,
    },
  };
</script>
<style></style>
在 Message.vue 文件中写入以下内容。
<template>
  <div>
    <el-button @click="open">点击我，看一看消息提示</el-button>
    <el-button @click="openVn">VNode</el-button>
  </div>
</template>
<script>
  export default {
    methods: {
      open() {
        this.$message("喵，嘻嘻，没什么事情！");
      },
      openVn() {
        const e = this.$createElement;
        this.$message({
          message: e("div", null, [
            e("span", null, "内容可以是 "),
            e("i", { style: "color: #7FC8A9" }, "VNode"),
          ]),
        });
      },
    },
  };
</script>
显示效果如下：
1678408705514
在上面代码中，给两个按钮绑定了点击事件，分别调用 open 和 openVn 两个方法，最终在这两个方法中使用 this.$message 方法弹出消息框，Message 可以接收一个字符串或一个 VNode 作为参数，它会被显示为正文内容。
# MessageBox 弹框
MessageBox 弹框是模拟系统的消息提示框而实现的一套模态对话组件，其主要用于消息提示、确认消息和提交内容。
  • 当调用 $alert 方法即可打开普通消息提示。
  • 当调用 $confirm 方法即可打开确认消息提示。
  • 当调用 $prompt 方法即可打开提交内容消息提示。
这里我们用 $alert 方法举个例子吧～
新建一个 src/views/MessageBox.vue 文件，并对 App.vue 文件做如下修改。
<template>
  <div id="app">
    <MessageBox />
  </div>
</template>
<script>
  import MessageBox from "./views/MessageBox.vue";
  export default {
    name: "App",
    components: {
      MessageBox,
    },
  };
</script>
<style></style>
在 MessageBox.vue 文件中写入以下内容。
<template>
  <el-button @click="open">点击我删除数据</el-button>
</template>
<script>
  export default {
    methods: {
      open() {
        this.$alert("您确定要删除该条数据吗？", "请注意", {
          confirmButtonText: "确定",
          callback: () => {
            this.$message({
              type: "info",
              message: `数据删除失败，请稍后再试！`,
            });
          },
        });
      },
    },
  };
</script>
显示效果如下：
1678408784591
在上面代码中，调用 $alert 方法打开消息提示，它接收了两个参数 message （消息内容）和 title （消息标题），在 $alert 方法中 confirmButtonText 用于设置消息确认按钮的文本内容， action 是一个回调函数。
其他两种用法与此相同，这里就不再举例了，接下来我们学习 Notification 通知。
# Notification 通知
Notification 通知 就是悬浮出现在页面角落，显示全局的通知提醒消息，比如你的微信有新消息，电脑屏幕的右侧会弹出一条消息提示。
1678408815555
Notification 组件提供通知功能，Element 在 Vue 实例上注册了 $notify 方法，可以直接以 this.$notify 的方式调用它。它接收一个 options 字面量参数，在最简单的情况下，只设置 title 字段和 message 字段，用于设置通知的标题和正文即可。
我们看看代码是如何实现的。
新建一个 src/views/Notification.vue 文件，并对 App.vue 文件做如下修改。
<template>
  <div id="app">
    <Notification />
  </div>
</template>
<script>
  import Notification from "./views/Notification.vue";
  export default {
    name: "App",
    components: {
      Notification,
    },
  };
</script>
<style></style>
在 Notification.vue 文件中写入以下内容。
<template>
  <div>
    <el-button plain @click="open1"> 不会自动关闭 </el-button>
    <el-button plain @click="open2"> 会自动关闭 </el-button>
  </div>
</template>
<script>
  export default {
    methods: {
      open1() {
        const h = this.$createElement;
        this.$notify({
          title: "来猜个字谜",
          message: h(
            "i",
            { style: "color: #b3e283" },
            "一边是红，一边是绿，一边怕风，一边怕雨"
          ),
          duration: 0,
        });
      },
      open2() {
        this.$notify({
          title: "提示",
          message: "您有一条新消息",
        });
      },
    },
  };
</script>
显示效果如下：
1678408884799
在上面代码中，我们定义了两个按钮绑定了 open1 和 open2 ，两个方法之间的不同在于， open1 方法中通过设置 duration:0 ，这使得消息提示框不会自动关闭。
除了上面这种朴素的消息通知栏，我们还可以创建带倾向性、自定义弹出位置的通知框。
  • 通过 type 字段可以设置通知类型，一共有四种， success （成功）、 warning （警告）、 info （信息）、 error （错误）。
  • 通过 position 字段可以设置弹出的位置，一共有四种， top-left （左上）、 top-right （右上）、 bottom-right （右下）、 bottom-left （左下）。
我们来看看如何用代码实现。
对 Notification.vue 文件做如下修改。
<template>
  <div>
    <el-button plain @click="open1"> 成功 </el-button>
    <el-button plain @click="open2"> 警告 </el-button>
    <el-button plain @click="open3"> 消息 </el-button>
    <el-button plain @click="open4"> 错误 </el-button>
  </div>
</template>
<script>
  export default {
    methods: {
      open1() {
        this.$notify({
          title: "成功",
          message: "这是一条成功的提示消息",
          type: "success",
        });
      },
      open2() {
        this.$notify({
          title: "警告",
          message: "这是一条警告的提示消息",
          type: "warning",
          position: "top-left", // 左上角弹出消息
        });
      },
      open3() {
        this.$notify.info({
          title: "消息",
          message: "这是一条消息的提示消息",
          position: "bottom-left", // 左下角弹出消息
        });
      },
      open4() {
        this.$notify.error({
          title: "错误",
          message: "这是一条错误的提示消息",
          position: "bottom-right", // 右下角弹出消息
        });
      },
    },
  };
</script>
显示效果如下所示：
1678408926219
上面代码有一点需要大家注意一下，我们可以在不传入 type 字段的情况下直接调用，就像 open3 和 open4 中那样。
# 实验总结
本节实验给大家讲解了五类消息提示基本使用方法。我们来回顾一下～
  • Alert 警告：用于页面中展示重要的提示信息。
  • Loading 加载：用于加载数据时显示动效。
  • Message 消息提示：常用于主动操作后的反馈提示。与 Notification 的区别是后者更多用于系统级通知的被动提醒。
  • MessageBox 弹框：用于消息提示、确认消息和提交内容。
  • Notification 通知：用于悬浮出现在页面角落，显示全局的通知提醒消息。
# Dialog 对话框组件
在前面我们已经学习了各种各样的消息提示框了，但那些都只能实现简单的消息提示。如果需要更多定制化的操作，我们还需要学一学 Dialog 对话框。
获取本节实验初始项目：
wget https://labfile.oss.aliyuncs.com/courses/5246/elementui.zip && unzip elementui.zip
知识点
  • 基本用法
  • 自定义内容
  • 嵌套的 Dialog
  • 居中布局
# 对话框的基本用法
学之前，先来给大家说一说什么是对话框。
对话框就是将某些消息告知给用户，它承载了一些需要用户进行确认的消息。对话框通常在应用程序开启时呈现，来提供一些关键信息，或者要求用户做出一种选择。例如，当你下载了一个新的 App，通常首次打开会有个对话框形式的使用教程，介绍该 App 的界面功能及使用方法，你可以选择跳过或者跟着步骤操作一遍。
Element UI 给我们提供了 <el-dialog> 组件来实现对话框，在其中，我们需要设置 visible 属性，它接收 Boolean ，当为 true 时显示 Dialog。
我们来看代码例子吧！
新建一个 src/views/Dialog.vue 文件，并对 App.vue 文件做如下修改。
<template>
  <div id="app">
    <dialog />
  </div>
</template>
<script>
  import Dialog from "./views/Dialog.vue";
  export default {
    name: "App",
    components: {
      Dialog,
    },
  };
</script>
<style></style>
在 Dialog.vue 文件中写入以下内容。
<template>
  <div>
    <el-button @click="visible = true">快来点击我呀</el-button>
    <el-dialog
      title="猜一猜"
      :visible.sync="visible"
      width="30%"
      :before-close="handleClose"
    >
      <span>欢迎进入字谜游戏。</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="visible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        visible: false,
      };
    },
    methods: {
      handleClose() {
        alert("不能关闭");
      },
    },
  };
</script>
显示效果如下所示：
1678290690324
代码说明如下：
  • 在上面代码中，我们设置了 visible 属性为 false，当点击按钮时被置为 true，显示 Dialog。
  • 在 <el-dialog> 中，使用 title 属性设置了对话框的标题为 “猜一猜”。
  • :visible.sync 中， :visible 是属性绑定，表示弹框的隐藏和显示，当 :visible 值为 true 时，表示显示弹框，反之为隐藏弹框； .sync 是表示同步的修改 visible 的值。
  • before-close 是关闭前的回调函数，会暂停 Dialog 的关闭行为，这里我们的回调函数 handleClose 只是弹出一个警告框。
# 自定义内容
除了上面这种包含标题、内容、取消和确定按钮的 Dialog 对话框外，我们还可以自定义对话框的内容，比如在对话框中嵌套一个表单。
我们来看看代码是如何实现的。
对 Dialog.vue 文件做如下修改。
<template>
  <div>
    <el-button @click="dialogFormVisible = true">点击我</el-button>
    <el-dialog
      title="个人信息登记"
      :visible.sync="dialogFormVisible"
      width="500px"
    >
      <el-form :model="form">
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="电话" :label-width="formLabelWidth">
          <el-input v-model="form.tel" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        dialogFormVisible: false,
        form: {
          name: "",
          tel: "",
        },
        formLabelWidth: "50px",
      };
    },
  };
</script>
显示效果如下所示：
1678290756349
从上面的代码可以看出，把表单组件放入 Dialog 组件中，对话框的内容就变成了一个表单。
# 嵌套的 Dialog
在 Dialog 组件中有个 append-body 属性，可以实现一个 Dialog 对话框的内部嵌套一个 Dialog 对话框。
其使用格式为：
<el-dialog>
  <el-dialog append-to-body></el-dialog>
</el-dialog>
我们来看看具体是如何实现的。
对 Dialog.vue 文件做如下修改。
<template>
  <div>
    <el-button @click="outerVisible = true">点击我</el-button>
    <el-dialog title="外层 Dialog" :visible.sync="outerVisible">
      <el-dialog
        width="30%"
        title="内层 Dialog"
        :visible.sync="innerVisible"
        append-to-body
      >
      </el-dialog>
      <div slot="footer" class="dialog-footer">
        <el-button @click="outerVisible = false">取 消</el-button>
        <el-button type="primary" @click="innerVisible = true"
          >打开内层 Dialog</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        outerVisible: false,
        innerVisible: false,
      };
    },
  };
</script>
显示效果如下所示：
1678290794916
需要同学们注意一下，这里只是告诉大家 append-to-body 属性的用法，但实际应用中，不推荐大家使用嵌套的 Dialog。
# 居中布局
在上面我们讲的例子中，Dialog 对话框中的内容都没有居中显示，我们可以使用 center 属性让标题和底部按钮居中显示。
注意：若想让内容居中显示，请使用 CSS 样式。
我们来看看代码～
对 Dialog.vue 文件做如下修改。
<template>
  <div>
    <el-button type="text" @click="centerDialogVisible = true"
      >点击打开 Dialog</el-button
    >
    <el-dialog
      title="提示"
      :visible.sync="centerDialogVisible"
      width="30%"
      center
    >
      <span class="content">Hello！我是蓝桥云课的小喵喵</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false" size="small"
          >取 消</el-button
        >
        <el-button
          type="primary"
          @click="centerDialogVisible = false"
          size="small"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        centerDialogVisible: false,
      };
    },
  };
</script>
<style>
  .content {
    color: #a2d2ff;
    margin-left: 20%;
  }
</style>
显示效果如下：
1678290854082
在上面代码中我们给 <el-dialog> 添加了 center 属性，使得 Dialog 对话框的标题和底部按钮居中，另外给对话框内容的 <span> 标签添加了 margin 属性，使其居中显示。
需要大家注意的是： Dialog 的内容是懒渲染，也就是说在第一次被打开之前，传入的默认 slot 不会被渲染到 DOM 上。因此，若需要执行 DOM 操作，或通过 ref 获取相应组件，请在 open 事件回调中进行。
要使用 open 回调函数，我们需要在 Dialog 组件中绑定 open 事件，例如：
<template>
  <el-dialog @open="open()">
</template>
<script>
  export default {
    methods: {
      open() {
      }
    }
  };
</script>
OK，Dialog 组件就为大家介绍到这里。
# 实验总结
本节实验带大家学习了 Dialog 组件的使用，并给大家介绍了 append-to-body 和 center 属性的作用。实验中只为大家讲了 Dialog 对话框的基础用法，在官方文档中，为大家提供了很多属性，使用方法都是相同的，请学有余力的同学自行扩展吧！
# 表格组件
本节实验给大家介绍表格组件。
获取本节实验初始项目：
wget https://labfile.oss.aliyuncs.com/courses/5246/elementui.zip && unzip elementui.zip
# 知识点
  • 表格的创建
  • 带多选的表格
  • 带操作列的表格
  • 自定义表头
# 表格的创建
通常我们写后台管理系统会用表格的形式来展现数据，我们可以对数据进行排序、筛选、对比或其他自定操作。比如下图 GitHub 很火的一个后台管理系统。
1678409113598
大家都知道表格最基本的单元是列，而 Element- UI 中亦是如此。
在 Element UI 中，提供了 <el-table> 和 <el-table-colum> 来创建表格，其中， <el-table> 代表表格， <el-table-colum> 代表表格的一列。
其使用格式如下所示：
<el-table>
  <el-table-colum lable="列名"></el-table-colum>
  <el-table-colum lable="列名"></el-table-colum>
  <!-- 表格中有列，就包含几对 el-table-colum-->
</el-table>
我们来看个例子～
新建一个 src/views/Table.vue 文件，并对 App.vue 文件做如下修改。
<template>
  <div id="app">
    <table />
  </div>
</template>
<script>
  import Table from "./views/Table.vue";
  export default {
    name: "App",
    components: {
      Table,
    },
  };
</script>
<style></style>
在 Table.vue 文件中写入以下内容。
<template>
  <el-table>
    <el-table-colum lable="姓名"></el-table-colum>
    <el-table-colum lable="电话"></el-table-colum>
    <el-table-colum lable="地址"></el-table-colum>
  </el-table>
</template>
<script></script>
<style></style>
运行之后，打开 Web 服务 ，可以看到页面上不是显示的一个表格，而是四个字 “暂无数据”。
1678409137669
看到这四个字，不用我多说，原因就在于我们没有在表格里写入任何数据。那我们怎么给表格里放入数据呢？这要用到 <el-table> 中的 data 属性和 <el-table-colum> 中的 prop 属性。
data 属性用于显示数据，它的属性值为 array 数组类型。
prop 属性的官方说明是 “对应列内容的字段名，也可以使用 property 属性”，通俗来讲， prop 属性相当于给列去传递一个参数，也就是把对应的数据渲染在列上。
好了，我们来看看在代码中具体是如何使用的。
对 Table 文件做如下修改：
<template>
  <el-table :data="tableData" style="width:30%">
    <el-table-column prop="name" label="姓名" width="100"> </el-table-column>
    <el-table-column prop="tel" label="电话" width="150"> </el-table-column>
    <el-table-column prop="address" label="地址" width="180"> </el-table-column>
  </el-table>
</template>
<script>
  export default {
    data() {
      return {
        tableData: [
          {
            name: "小蓝",
            tel: "1234567899",
            address: "杭州哆啦A梦街道",
          },
          {
            name: "小白",
            tel: "3214497808",
            address: "杭州爱丽丝街道",
          },
        ],
      };
    },
  };
</script>
一个带有数据的表格就创建成功了。
1678409182425
在上面代码中，我们使用 prop 属性填入对应数据对象的键名，用来获取 tableDate 数组中的数据；使用 width 属性定义了表格和列的宽度。
# 美化表格
表格会创建了，但样式很单一，我们通常看到的表格有很多样式，比如带边框、带斑马纹，带颜色条。例如下面 Microsoft PowerPoint 为我们提供的表格样式。
1678409215177
<el-table> 组件中有如下表所示的一些属性可以用来美化我们的表格。
属性说明类型可选值默认值
stripe是否为斑马纹 tableboolean无false
border是否带有纵向边框boolean无false
row-class-name行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。Function({row, rowIndex})/String无无
我们来看看，这些属性在代码中具体是如何使用的。
对 Table.vue 文件做如下修改：
<template>
  <el-table
    :data="tableData"
    style="width:30%"
    stripe
    border
    :row-class-name="tableRowClassName"
  >
    <el-table-column prop="name" label="姓名" width="100"> </el-table-column>
    <el-table-column prop="tel" label="电话" width="150"> </el-table-column>
    <el-table-column prop="address" label="地址" width="180"> </el-table-column>
  </el-table>
</template>
<script>
  export default {
    methods: {
      tableRowClassName({ row, rowIndex }) {
        console.log(row);
        console.log(rowIndex);
        // 偶数行着色
        if (rowIndex % 2 == 0) {
          return "row1";
        }
      },
    },
    data() {
      return {
        tableData: [
          {
            name: "小蓝",
            tel: "1234567899",
            address: "杭州哆啦A梦街道",
          },
          {
            name: "小白",
            tel: "3214497808",
            address: "杭州爱丽丝街道",
          },
          {
            name: "小绿",
            tel: "3345697807",
            address: "杭州银河街道",
          },
          {
            name: "小红",
            tel: "123974565",
            address: "杭州梦想街道",
          },
        ],
      };
    },
  };
</script>
<style>
  .el-table .row1 {
    background: #a2d2ff;
  }
</style>
显示效果如下所示：
1678409240188
在上面代码中的 tableRowClassName 函数里，我们通过使用 if(rowIndex%2 == 0) 给表格中的偶数行着色了。
上面代码中，我们只是给偶数行加上了颜色，那如果我们想给奇偶行加上不同的颜色，是不是应该再写个 else 来实现？我们修改一下上面的 if 语句（为了方便阅读，这里我只给出修改部分的代码）：
<script>
  ...
  if(rowIndex%2 == 0) {
    return 'row1'
  }else {
    return 'row2'
  }
  ...
</script>
<style>
  .el-table .row1 {
    background: #a2d2ff;
  }
  .el-table .row2 {
    background: #cdf2ca;
  }
</style>
如果只做上面的修改，我们会发现奇数行并没有加上我们设置的背景色，这是因为我们在 <el-table> 中添加了 stripe 属性，它的优先级要高一些，所以我们去掉 stripe 属性就可以看到效果了。
对 Table.vue 文件做如下修改。
<template>
  <el-table
    :data="tableData"
    style="width:30%"
    border
    :row-class-name="tableRowClassName"
  >
    <el-table-column prop="name" label="姓名" width="100"> </el-table-column>
    <el-table-column prop="tel" label="电话" width="150"> </el-table-column>
    <el-table-column prop="address" label="地址" width="180"> </el-table-column>
  </el-table>
</template>
<script>
  export default {
    methods: {
      tableRowClassName({ row, rowIndex }) {
        console.log(row);
        console.log(rowIndex);
        // 偶数行着色
        if (rowIndex % 2 == 0) {
          return "row1";
        } else {
          return "row2";
        }
      },
    },
    data() {
      return {
        tableData: [
          {
            name: "小蓝",
            tel: "1234567899",
            address: "杭州哆啦A梦街道",
          },
          {
            name: "小白",
            tel: "3214497808",
            address: "杭州爱丽丝街道",
          },
          {
            name: "小绿",
            tel: "3345697807",
            address: "杭州银河街道",
          },
          {
            name: "小红",
            tel: "123974565",
            address: "杭州梦想街道",
          },
        ],
      };
    },
  };
</script>
<style>
  .el-table .row1 {
    background: #a2d2ff;
  }
  .el-table .row2 {
    background: #cdf2ca;
  }
</style>
现在显示效果就正常了。
1678409309727
# 多选
多选表格就是表格每一行的首部有个 Checkbox 多选框，可以勾选每一行的数据。
在表格中实现多选的方法很简单，手动添加一个 <el-table-column> ，并且设置 type 属性的属性值为 selection 即可。
我们来试一试吧～
对 Table.vue 文件做如下修改。
<template>
  <div>
    <el-table
      :data="tableData"
      style="width:35%"
      border
      :row-class-name="tableRowClassName"
      ref="multipleTable"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="100"> </el-table-column>
      <el-table-column prop="tel" label="电话" width="150"> </el-table-column>
      <el-table-column prop="address" label="地址" width="180">
      </el-table-column>
    </el-table>
    <el-button @click="toggleSelection([tableData[1], tableData[2]])"
      >切换第二、第三行</el-button
    >
    <el-button @click="toggleSelection()">取消选择</el-button>
  </div>
</template>
<script>
  export default {
    methods: {
      tableRowClassName({ row, rowIndex }) {
        console.log(row);
        console.log(rowIndex);
        // 偶数行着色
        if (rowIndex % 2 == 0) {
          return "row1";
        } else {
          return "row2";
        }
      },
      toggleSelection(rows) {
        if (rows) {
          rows.forEach((row) => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
    },
    data() {
      return {
        tableData: [
          {
            name: "小蓝",
            tel: "1234567899",
            address: "杭州哆啦A梦街道",
          },
          {
            name: "小白",
            tel: "3214497808",
            address: "杭州爱丽丝街道",
          },
          {
            name: "小绿",
            tel: "3345697807",
            address: "杭州银河街道",
          },
          {
            name: "小红",
            tel: "123974565",
            address: "杭州梦想街道",
          },
        ],
      };
    },
  };
</script>
<style>
  .el-table .row1 {
    background: #a2d2ff;
  }
  .el-table .row2 {
    background: #cdf2ca;
  }
</style>
显示效果如下：
1678409371877
在上面代码中，我们给 <el-table> 设置了 ref 属性，通过 $refs 来获取值，其中 toggleRowSelection 方法用于多选表格，切换某一行的选中状态， clearSelection 方法用于多选表格，清空用户的状态。
# 加操作列
在管理系统中的数据表，一般会有一个操作列，可以对表中当前的数据进行编辑、删除等操作。
我们通过 <el-table-column> 去构建一个操作列，然后在操作里面通过插槽的方式放两个按钮即可。
我们对 Table.vue 文件做如下修改。
<template>
  <el-table :data="tableData" style="width:50%" border stripe>
    <el-table-column prop="name" label="姓名" width="100"> </el-table-column>
    <el-table-column prop="tel" label="电话" width="150"> </el-table-column>
    <el-table-column prop="address" label="地址" width="180"> </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button size="mini" @click="handleEdit(scope.$index,scope.row)"
          >编辑</el-button
        >
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index,scope.row)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
  export default {
    methods: {
      // 处理编辑操作的方法
      handleEdit(index, row) {
        console.log(index, row);
        console.log("编辑已触发");
      },
      // 处理删除操作的方法
      handleDelete(index, row) {
        console.log(index, row);
        console.log("删除已触发");
      },
    },
    data() {
      return {
        tableData: [
          {
            name: "小蓝",
            tel: "1234567899",
            address: "杭州哆啦A梦街道",
          },
          {
            name: "小白",
            tel: "3214497808",
            address: "杭州爱丽丝街道",
          },
          {
            name: "小绿",
            tel: "3345697807",
            address: "杭州银河街道",
          },
          {
            name: "小红",
            tel: "123974565",
            address: "杭州梦想街道",
          },
        ],
      };
    },
  };
</script>
<style></style>
在上面代码中，我们通过插槽的方式新增了两个按钮（编辑按钮和删除按钮），给编辑按钮绑定了名为 handleEdit 的方法，该方法用于处理编辑操作；给删除按钮绑定了名为 handleDelete 的方法，该方法用于处理删除操作。
# 自定义表头
想象一下，当我们表中的数据过多时，如果我们想对某条数据进行操作，一条一条往下翻是非常麻烦的，这时我们需要在表头加一个搜索功能，通过关键字或者 id 来搜索特定数据。
在 Element UI 中，我们通过设置 slot 可以自定义表头。
我们来看看具体如何用代码实现。
对 Table.vue 文件做如下修改。
<template>
  <el-table
    :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
    style="width:50%"
    border
    stripe
  >
    <el-table-column prop="name" label="姓名" width="100"> </el-table-column>
    <el-table-column prop="tel" label="电话" width="150"> </el-table-column>
    <el-table-column prop="address" label="地址" width="180"> </el-table-column>
    <el-table-column align="right">
      <template #header>
        <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
      </template>
      <template #default="scope">
        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
          >编辑</el-button
        >
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
  export default {
    methods: {
      // 处理编辑操作的方法
      handleEdit(index) {
        console.log(index);
        console.log("编辑已触发");
      },
      // 处理删除操作的方法
      handleDelete(index) {
        console.log(index);
        console.log("删除已触发");
      },
    },
    data() {
      return {
        tableData: [
          {
            name: "小蓝",
            tel: "1234567899",
            address: "杭州哆啦A梦街道",
          },
          {
            name: "小白",
            tel: "3214497808",
            address: "杭州爱丽丝街道",
          },
          {
            name: "小绿",
            tel: "3345697807",
            address: "杭州银河街道",
          },
          {
            name: "小红",
            tel: "123974565",
            address: "杭州梦想街道",
          },
        ],
        search: "",
      };
    },
  };
</script>
<style></style>
显示效果如下所示：
1678409427640
在上面代码中，我们把 data 属性的属性值改为 tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase())) ，其中 filter 用来返回符合指定条件的数据，在该方法中用 includes 来判断当前输入框输入的字符是否包含数据表中的数据。