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>