经常操作一

vue create element-study

npm install -g cnpm 

npm i element-ui -S

main.js 中引入 Element 并注册

// 引入 Element
import ElementUI from 'element-ui'
// 引入 Element 样式
import 'element-ui/lib/theme-chalk/index.css'
// 将 Element 挂载为 Vue 的插件
Vue.use(ElementUI)

 <!-- data：数据源，需要渲染的数据 -->
  <el-table :data="tableData" style="width: 100%">

<el-table-column prop="date" label="日期" width="180"> </el-table-column>

 <!-- width：当前列的宽度，不设置会自适应 -->

<!-- el-table-column：代表列 -->
    <!-- prop：当前这一列需要渲染的数据字段 -->
    <!-- label：当前列的标题 -->

操作按钮

直接使用 prop 只能渲染文本，这时候通过 prop 不能直接渲染时，就需要我们自定义内容渲染

我们需要在对应的列中，使用template标签包裹我们自定义渲染的内容，其实用的就是插槽的机制

<el-table-column label="操作">
  <template>
    <el-button size="mini" type="danger">删除</el-button>
  </template>
</el-table-column>

不知道是什么含义的使用作用域插槽

作用域插槽

要求把 0 转换成女，1 转换成男

data-return- tableData: [
  {
    date: '2016-05-02',
    name: '王小虎',
    gender: 0,
    address: '上海市普陀区金沙江路 1518 弄'
  }, {
    companyName: '小米',
    companyLogo: 'http://s02.mifile.cn/assets/static/image/logo-mi2.png'
  },// 自定义列显示图片 

通过 Scoped slot 作用域插槽可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据

<el-table-column label="性别">
  <!--
    1. slot-scope是固定写法
    2. scope 是变量，并不一定需要固定这个名字
       设置后 el-table-column 组件会自动将本行数据传给 scope
       其中 scope.row 就表示当前行的数据，它对应数据源中的某个对象，
       注意：这里的row是固定写法
  -->
  <template slot-scope="scope">
    <div>{{ scope.row }}</div>
  </template>
</el-table-column>

用作用域插槽拿到数据，再使用函数或者其他特性将数据进行转换输出

<template>
  <!-- data：数据源，需要渲染的数据 -->
  <el-table :data="tableData" style="width: 100%">
    <!-- el-table-column：代表列 -->
    <!-- prop：当前这一列需要渲染的数据字段 -->prop="companyName"
    <!-- label：当前列的标题 -->
    <!-- width：当前列的宽度，不设置会自适应 -->
    <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-column label="性别">
      <!--
        1. slot-scope是固定写法
        2. scope 是变量，并不一定需要固定这个名字
          设置后 el-table-column 组件会自动将本行数据传给 scope
          其中 scope.row 就表示当前行的数据，它对应数据源中的某个对象，
          注意：这里的row是固定写法
        3. {{ 方法() }} 的作用是执行这个方法，将返回值显示在当前单元格中
      -->
      <template slot-scope="scope">
        <!-- 使用三元运算符 -->
        <!-- <div>{{ scope.row.gender === 0 ? '女' : '男' }}</div> -->
        <!-- 使用方法返回数据 -->

<img :src="scope.row.companyLogo"/>
        <div>{{ transGender(scope.row.gender) }}</div>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template>
        <el-button size="mini" type="danger">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

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