element table表格通过属性绑定的原理是什么?

Question

<template>

<el-table
  :data="tableData"
  style="width: 100%">
  <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>

</template>
像这个prop和label，他的背后原理能简单讲下吗？为什么这里加冒号！直接这样就绑定### 问题描述

问题出现的平台版本及自己尝试过哪些方法

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

你期待的结果是什么？实际看到的错误信息又是什么？

Answer 1

不加冒号是因为不需要，这是一个反射的过程。

在 :data="tableData"部分已经拿到了你的数据，后面就只需要拿到键名就可以拿到值了。

---

补充:

//假如这是你提供的keys
requiredKeys = ["date"];  //这里是你通过prop制定的key值

//例如框架中可以用类似的方式拿到数据
OriginData.forEach(row=>{
    for(let key of requiredKeys){
        //此处 就可以通过 row[key] 拿到值做双绑了
    }
})

这就是一个很简单的Object反射的问题。

实际框架在处理的时候可以通过自己添加双绑元素的方式来对这些值做双向绑定

https://github.com/ElemeFE/el...
这里做了一个取值

然后数据更新是通过后面的几行 ，renderCell来实现的。

其他的懒得看了，据我的经验的话，监听是由table组件监听的，毕竟数据绑在table上，然后table调用子组件的renderCell，子组件根据最新数据渲染新的Dom