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)

操作按钮

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

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

      删除  

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

要求把 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 内部的状态管理）的数据

        {{ scope.row }}  

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

            prop="companyName"                               { 方法() }} 的作用是执行这个方法，将返回值显示在当前单元格中       -->                       { scope.row.gender === 0 ? '女' : '男' }} -->        

        {{ transGender(scope.row.gender) }}                             删除            

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