vue如何获取el-table中的属性值的名称

flowerinsky
  • 13

问题描述

在多个el-table的情况下,要通过一个值保证一个el-table的唯一性.通过这个值可以在众多el-table中确定一个唯一的el-table.

问题出现的环境背景及自己尝试过哪些方法

用data属性的值名称来确定,但没有对应的方法获取,this或者row中都找不到对应数据,是有什么我不知道的方法可以直接获取吗,还是我的思路是错误的..

相关代码

<el-table
        :max-height="300"
        :header-cell-style="headClass"
        ref="multipleTable"
        :data="dataForm.sqr"
        border
        highlight-current-row="true"
        style="width: 100%;  overflow-y: auto"
        @row-click="handleRowClick"
        :row-class-name="tableRowClassName"
        @cell-mouse-enter="handlerIsTable"
></el-table>


回复
阅读 527
3 个回答
  • 第一种方式:如楼上所说,通过$refs进行获取。

    • HTML 给表格增加ref

      <el-table
      ref="tableForList"
      >
      </el-table>
    • JavaScript 获取指定表格属性

      const tableForList = this.$refs['tableForList']
      console.log(tableForList)
  • 第二种方式:通过ClassName或者ID进行取舍

    // className
    const tableInfo = document.getElementByClassName('xxx')
    // id
    const tableInfo = document.getElementById('xxx')
  • 第三种方式:通过给表格设置一个key值,然后通过key值获取表格属性
  • 如果是获取指定行数据的话,ElementUI有一个scope.row属性,指定行的指定列的话,scope.row[columnKey]也可以拿到

不知道我理解的对不对。

你可以为每个el-table设置一个独一无二的ref,比如你给的例子,就可以是ref="multipleTable-sqr",那么你就可以使用this.$refs["multipleTable-sqr"]来获取这个el-table

已参与了 SegmentFault 思否「问答」打卡,欢迎正在阅读的你也加入。

问题描述的不是很清晰,关于:

  1. el-table的唯一性:通过ref区分即可
  2. 用data属性的值名称来确定,但没有对应的方法获取:可能思维还停留在获取dom操作?(瞎猜的),vue是操作数据,思维想着怎样去操作数据出发就没问题。

已参与了 SegmentFault 思否「问答」打卡,欢迎正在阅读的你也加入。
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏