vue中使用elementui的总结

最新推荐文章于 2024-03-29 21:31:23 发布

SeeUa

最新推荐文章于 2024-03-29 21:31:23 发布

阅读量970

点赞数

分类专栏： vue前端文章标签： vue vue.js

本文链接：https://blog.csdn.net/SeeUa/article/details/107791986

版权

1，任何一个el组件的宽高都是可以通过包裹他的父元素来设置的；

2, 使用notice组件

一、alert的使用
在这里插入图片描述

**通过设置effect属性来改变主题，默认为light。
  Alert 组件提供了两个不同的主题：light和dark。**
<template>
  <el-alert
    title="成功提示的文案"
    type="success"
    effect="dark">
  </el-alert>
  <el-alert
    title="消息提示的文案"
    type="info"
    effect="dark">
  </el-alert>
  <el-alert
    title="警告提示的文案"
    type="warning"
    effect="dark">
  </el-alert>
  <el-alert
    title="错误提示的文案"
    type="error"
    effect="dark">
  </el-alert>
</template>

二、loading的使用
在这里插入图片描述
Element 提供了两种调用 Loading 的方法：指令和服务。对于自定义指令v-loading，只需要绑定Boolean即可。默认状况下，Loading 遮罩会插入到绑定元素的子节点，通过添加body修饰符，可以使遮罩插入至 DOM 中的 body 上。

<template>
  <el-table
    v-loading="loading"
    :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=