element-ui一些常用组件的二次封装

组件封装

创建components文件夹，并且创建封装组件

1.Table——表格封装

2.Select——选择器

3.Breadcrumb——面包屑

4.Pagination——分页器

5.Input——输入框

6.Button——按钮

7.Dialog——对话框

8.From——表单

全局导入组件 在main.js中导入

// 按钮、表格、面包屑、分页器、输入框、选择器、对话框、表单组件导入
import Breadcrumb from './components/BreadCrumb.vue'
import Button from './components/Button.vue';
import Table from './components/Table.vue';
import Select from './components/Select.vue'
import Pagination from './components/Pagination.vue'
import Input from './components/Input.vue'
import Dialog from './components/Dialog.vue'
import Form from './components/Form.vue'
const Loading = {
  install:(Vue =>{
    // 按钮、表格、面包屑、分页器、输入框、选择器、对话框、表单组件
    Vue.component('Button',Button)
    Vue.component('Table',Table)
    Vue.component('Breadcrumb',Breadcrumb)
    Vue.component('Select',Select)
    Vue.component('Pagination',Pagination)
    Vue.component('Input',Input)
    Vue.component('Dialog',Dialog)
    Vue.component('Form',Form)
  })
}
Vue.use(Loading);

在页面中使用

效果图如下：