[JavaScript知识库]经常操作一

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>