番外篇：VUE（十四）vue整合Elementui

官方：https://element.eleme.cn/#/zh-CN/component/installation

1、安装elementui依赖

npm i element-ui -S

2、在main.js中导入ElementUI

//导入ElementUI依赖
import ElementUI from 'element-ui'
//导入ElementUI样式
import 'element-ui/lib/theme-chalk/index.css'
//使用ElementUI
Vue.use(ElementUI)

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
//导入ElementUI依赖
import ElementUI from 'element-ui'
//导入ElementUI样式
import 'element-ui/lib/theme-chalk/index.css'

Vue.config.productionTip = false
//使用ElementUI
Vue.use(ElementUI)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

3、在ElementUI复制一个表格控件代码

4、接下来就可以在vue组件中使用ElementUI

创建一个新项目，基于新项目进行修改 以下为修改部分的说明
在components目录下创建ptable.vue页面组件，把控件代码粘贴到ptable页面中

<template>
  <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      fixed
      prop="date"
      label="日期"
      width="150">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="120">
    </el-table-column>
    <el-table-column
      prop="province"
      label="省份"
      width="120">
    </el-table-column>
    <el-table-column
      prop="city"
      label="市区"
      width="120">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址"
      width="300">
    </el-table-column>
    <el-table-column
      prop="zip"
      label="邮编"
      width="120">
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="100">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
        <el-button type="text" size="small">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    methods: {
      handleClick(row) {
        console.log(row);
      }
    },

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

5、编辑路由文件

src\router\index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

//*导入ptable组件
import ptable from '../components/ptable'

Vue.use(Router)

export default new Router({
  routes: [
    {
      // 访问根目录时显示ptable组件内容
      path: '/',
      component: ptable
    }
  ]
})

6、访问