创建项目并引入element组件库

Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

npm i -g @vue/cli   //全局安装脚手架
vue create "项目名"
npm i element-ui -S  //安装elementUI

// main.js中引入并注册
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

Table组件

复制官方demo中的第一个基础demo

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

数据源由table组件的data属性来指定（不需要我们自己用v-for指令来循环）

行(data)，决定表格的数据。它是数组，数组中的每一个元素是一个对象，表示一行。
列，决定表格结构。列由el-table-column决定，下面有三个属性需要掌握

label：决定当前列显示出的标题
prop：决定当前列数据的来源。对于表格来说，它的数据是一个数组，每一个元素是一个对象，这里的prop值就是这个对象中的属性名.
- prop="date", 这里的prop就是用来从每一个对象中取出属性名为date的属性值。
width: 用来设置列的宽度。如果不设置，它会自适应。

table组件-自定义列-作用域插槽

用作用域插槽拿到数据（官网），再使用函数做转换输出即可

<el-table-column label="性别">
  <!-- 
  1. slot-scope是固定写法
  2. scope理解为变量，并不一定需要固定这个名字，el-table-column组件会自动将渲染本行需要的数据
  传给scope，其中scope.row就表示当前行的数据，它对应数据源中的某个对象。这里的row是固定写法
  3. {{ 方法() }} 的作用是执行这个方法，将返回值显示在当前单元格中
  -->
    <template slot-scope="scope">
      {{ transGender(scope.row.gender) }}
    </template>
</el-table-column>

<script>
  export default {
      methods: {
        transGender(genderCode) {
          console.log(genderCode)
          const genderList = {
            1: '男',
            0: '女'
          }
          return genderList[genderCode]
        }
      }
  }
</script>

通过 Scoped slot 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据
scope.row:拿当前行的完整对象数据

elementUI基本使用

常见的vue技术栈组件库

创建项目并引入element组件库

Table组件

table组件-自定义列-作用域插槽