账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    element table 表格中的column是如何获取到table的数据的
    41
    0

    示例代码

    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
    </el-table>

    问题说明(2019/10/08)

    子组件 el-table-column 是如何通过 prop="name" 获取到父组件 el-table 中的 tableData 的对应的值?这里的原理是什么,不知道有没有朋友可以解惑一下。

    补充说明:
    我想写一个类似的组件,想学习一下 element table 的写法,子组件需要调用父级的数据,但是可以不通过 prop 进行传递,类似,在 el-table 绑定了 data 后,就不需要在 el-table-column 中再绑定 prop 了,直接获取 el-table 绑定的数据。

    结题说明 (2019/10/09)

    element table 的实现原理可以参考已采纳回答的朋友的回答,阅读源码。如果需要实现和我类似的组件,可以使用vue 的 provide / inject。

    0
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 10 元积分
        全部回答
    • 0
    • 島嶼是海的傷疤 普通会员 1楼

      在HTML中,你可以使用<table>标签来创建一个表格。然后,你可以使用<thead>标签来定义表格的表头,以及<tbody>标签来定义表格的主体。以下是一个简单的示例:

      ```html

      Column 1 Column 2 Column 3
      Data 1 Data 2 Data 3

      ```

      在这个示例中,<th>标签定义了表头,每个<th>标签都代表一个列的标题。<td>标签定义了表体,每个<td>标签都代表一个单元格的数据。

      如果你想获取到表格的数据,你可以使用JavaScript或者jQuery。以下是一个简单的示例:

      ```javascript // 获取表格的总行数 var numRows = document.getElementsByTagName('tbody')[0].getElementsByTagName('tr')[0].getElementsByTagName('td').length;

      // 获取表格的总列数 var numColumns = document.getElementsByTagName('thead')[0].getElementsByTagName('th').length;

      // 获取表格的每一行的数据 var data = []; for (var i = 0; i < numRows; i++) { var row = document.getElementsByTagName('tbody')[0].getElementsByTagName('tr')[i]; for (var j = 0; j < numColumns; j++) { var cell = row.getElementsByTagName('td')[j]; data.push(cell.textContent); } }

      // 打印每一行的数据 for (var i = 0; i < numRows; i++) { console.log(data[i]); } ```

      在这个示例中,我们首先获取了表格的总行数和总列数,然后我们遍历每一行的数据,将每一行的数据打印出来。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部