前言：基于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处理的效果，空白）

完全的空白