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

Question

问题描述

在多个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>

Answer 1

• 第一种方式：如楼上所说，通过$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]也可以拿到

Answer 2

不知道我理解的对不对。

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

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

Answer 3

问题描述的不是很清晰，关于：

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

---

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