Element-UI框架的使用（一）_elementui属于开发依赖还是生产依赖

一.基于vue-cli脚手架创建前端项目（PC端）

（一）创建项目

// 全局配置vue-cli
npm  i -g @vue/cli
// 创建项目
vue create element-demo
1
2
3
4

（二）运行项目

cd element-demo // 进入项目目录
npm run serve // 运行命令
1
2

(3) vs code 编辑器打开项目文件夹，进入代码编辑环境

二.将Element-UI添加到项目中

参考官方文档 安装Element-UI

npm i element-ui -S // 安装 elementUI
/* 
-S: 是--save的简写，表示这个包是生产依赖， 表示项目上线也要使用这个包,是可以省略不写的
包名会被注册在package.json的dependencies里面，在生产环境下这个包的依赖依然存在
-D: 是--dev的简写，开发依赖包
包名会被注册在package.json的devDependencies里面，仅在开发环境下存在的包用-D
*/
1
2
3
4
5
6
7

main.js 中引入并注册参考官方文档

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
1
2
3

三.table组件的使用

用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。
Table 表格
（一）基本使用
参考文档-基础表格
当el-table元素中注入data对象数组后，在el-table-column中用prop属性来对应对象中的键名即可填入数据，用label属性来定义表格的列名。可以使用width属性来定义列宽。

// 基础样式
<template>
    <!-- data：在table表格中要展示的数据 Array类型 数组中的每一个元素是一个对象，
    表示一行。-->
    <!-- 在el-table上使用data属性 -->
    <el-table :data="tableData" style="width: 100%">
      <!-- el-table-column 每一列 -->
      <!-- 属性 label：决定当前列显示出的标题  -->
      <!-- 属性 width: 用来设置列的宽度。如果不设置，它会自适应, 在table表格中最好有一列
      不添加此属性，以此来让表格铺满整个显示页面 -->
      <!-- 属性 prop: 决定当前列数据的来源。对于表格来说， 它的数据是一个数组，每一个元素
      是一个对象，这里的prop值就是这个对象中的属性名 -->
      <!-- prop="date" 这里的prop就是用来从每一个对象中取出属性名为date的属性值 -->
      <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="address" label="地址"> </el-table-column>
    </el-table>
</template>
<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }]
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

效果图

（二）table组件-自定义列-插槽
参考文档-自定义列
例如：在上面表格的基础上在最后一列渲染出一个删除按钮

// 在 <el-table> 中自定义列
<!-- 删除掉prop属性 -->
<el-table-column label="操作" width="100">
    <template>
      <el-button size="small" type="danger">删除</el-button>
    </template>
</el-table-column>
1
2
3
4
5
6
7

效果图

（三）

<template>
  <div>
    <el-table :data="tableData">
      <el-table-column label="公司名" prop="companyName" width="180"> </el-table-column>
      <el-table-column label="公司logo">
        <!-- 
          slot-scope: 是老语法，
          v-slot ：是新语法。效果一样
        -->
        <template slot-scope="scope">
        <!-- 通过 Scoped Slot 可以获取到 row, column, $index 
        和 store（table 内部的状态管理）的数据 -->
          <img :src="scope.row.companyLogo" style="width:150px" />
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          companyName: '小米',
          companyLogo: 'http://s02.mifile.cn/assets/static/image/logo-mi2.png'
        },
        {
          companyName: '京东',
          companyLogo: 'https://misc.360buyimg.com/lib/img/e/logo-201305-b.png'
        },
        {
          companyName: '百度',
          companyLogo: 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png'
        }
      ]
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

效果图