前言：基于vue2+element-ui的理论转实践的使用

第一组：数据显示

利用v-bind:data在table绑定数据源，将数据利用prop的属性传入到table-column，渲染到表格中

正片开始

首先，常用的属性（作者常用）

第一组，数据显示：

table的属性

参数	说明	类型	可选值	默认值
data	显示的数据	array	—	—

table-column

代码例子

<template><el-table v-bind:data="testArray"><el-table-column label="序号" prop="id"></el-table-column><el-table-column label="名字" prop="name"></el-table-column></el-table>
</template><script>export default {name: "list",data() {return {testArray:[{id:1,name:'xiaoming'},{id:2,name:'xiaohong'},{id:3,name:'xiaozhuang'},{id:4,name:"xiaohei"},{id:5,name:"xiaoke"},{id:6,name:"xiaoheiheihei"}]}},</script>

效果显示如图

代码分析：

只有两部分，JS部分<script>和HTML<template>部分

JS部分：这部分在demo中提供用来测试的数据，一个模拟接口响应JSON的数据

HTML部分：本次测试的核心

1.element-ui表格的基本用法

2.蓝色为数据的处理，统称加工厂

3.绿色为数据的使用，统称被加工物

官方说明就是价格物被工厂加工后的显示

data，将加工物的数据传入table中

prop，将以传入table中的数据进行二次加工，渲染到table-column中

label，直接将数据进行加工，渲染到table-column中，以标题显示

好了，要不是用的多，这是真的绷不住了

吐槽

可是官方文档说明的内容极其少

例如：

经过实践后，我们知道，table-column中prop属性是将table里data进行二次加工

为什么我会说二次加工呢？我们将删除掉prop就知道了

如图（数据未经过prop处理的效果，空白）

完全的空白