1、按需引入element ui

（1）、安装element ui

npm i element-ui -S

element.eleme.io/#/zh-CN/com…

（2）、首先，安装 babel-plugin-component：

npm install babel-plugin-component -D

（3）、在babel.config.js下赋值以下代码：（官网的"es2015"会报错）

module.exports = {
  "presets": [["@babel/preset-env", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
};

（4）、创一个element.js引入组件，导出

import {
  Pagination,
  Dialog,
  Autocomplete,
  Dropdown,
  DropdownMenu,
  DropdownItem,
  Menu,
  Submenu,
  MenuItem,
  MenuItemGroup,
  Input,
  InputNumber,
  Radio,
  RadioGroup,
  RadioButton,
  Checkbox,
  CheckboxButton,
  CheckboxGroup,
  Switch,
  Select,
  Option,
  OptionGroup,
  Button,
  ButtonGroup,
  Icon,
  Row,
  Col,
  Table,
  TableColumn,
  DatePicker,
  TimeSelect,
  TimePicker,
  Popover,
  Tooltip,
  Breadcrumb,
  BreadcrumbItem,
  Form,
  FormItem,
  Tabs,
  TabPane,
  Tag,
  Tree,
  Alert,
  Slider,
  Upload,
  Progress,
  Badge,
  Card,
  Rate,
  Steps,
  Step,
  Carousel,
  CarouselItem,
  Collapse,
  CollapseItem,
  Cascader,
  ColorPicker,
  Transfer,
  Container,
  Header,
  Aside,
  Main,
  Footer,
  Loading,
  MessageBox,
  Message,
  Notification,
  Link
} from 'element-ui';

export default {
  install(app) {
    app.use(Pagination);
    app.use(Dialog);
    app.use(Autocomplete);
    app.use(Dropdown);
    app.use(DropdownMenu);
    app.use(DropdownItem);
    app.use(Menu);
    app.use(Submenu);
    app.use(MenuItem);
    app.use(MenuItemGroup);
    app.use(Input);
    app.use(InputNumber);
    app.use(Radio);
    app.use(RadioGroup);
    app.use(RadioButton);
    app.use(Checkbox);
    app.use(CheckboxButton);
    app.use(CheckboxGroup);
    app.use(Switch);
    app.use(Select);
    app.use(Option);
    app.use(OptionGroup);
    app.use(Button);
    app.use(ButtonGroup);
    app.use(Table);
    app.use(TableColumn);
    app.use(DatePicker);
    app.use(TimeSelect);
    app.use(TimePicker);
    app.use(Popover);
    app.use(Tooltip);
    app.use(Breadcrumb);
    app.use(BreadcrumbItem);
    app.use(Form);
    app.use(FormItem);
    app.use(Tabs);
    app.use(TabPane);
    app.use(Tag);
    app.use(Tree);
    app.use(Alert);
    app.use(Slider);
    app.use(Icon);
    app.use(Row);
    app.use(Col);
    app.use(Upload);
    app.use(Progress);
    app.use(Badge);
    app.use(Card);
    app.use(Rate);
    app.use(Steps);
    app.use(Step);
    app.use(Carousel);
    app.use(CarouselItem);
    app.use(Collapse);
    app.use(CollapseItem);
    app.use(Cascader);
    app.use(ColorPicker);
    app.use(Transfer);
    app.use(Container);
    app.use(Header);
    app.use(Aside);
    app.use(Main);
    app.use(Footer);
    app.use(Link);

    app.use(Loading.directive);
    app.prototype.$loading = Loading.service;
    app.prototype.$msgbox = MessageBox;
    app.prototype.$alert = MessageBox.alert;
    app.prototype.$confirm = MessageBox.confirm;
    app.prototype.$prompt = MessageBox.prompt;
    app.prototype.$notify = Notification;
    app.prototype.$message = Message;
  },
};

（5）、main.js中注册

import element from '../src/element/element';

2、 Pagination 分页

• 要求

• 解决：layout里面用插槽，里面的属性可以更换顺序

3、 日期选择器:Datapiker属性：picker-options

• 要求

• 解决

<div class="block"> <span class="demonstration">带快捷选项</span> <el-date-picker v-model="value2" align="right" type="date" placeholder="选择日期" :picker-options="pickerOptions"> </el-date-picker> </div>

4、 el-input 后加入icon按钮

• 要求：

• 解决

5、 el-table中，鼠标一放上去有黑色的框框，把它去掉

• 要求：

• 解决：

Table-column Attributes