动态获取element组件的el-table的每一列的列名

在项目中我们可能会遇见需要获取表格列名的情况，比如说将现有的表格数据导出为excel，若我们将列名写死则不利于后面的维护和修改。

优化前:

const tHeader = [
          '耳号',
          '阶段',
          '体重',
          '体长',
          '体高',
          '胸深',
          '胸宽',
          '胸围',
          '十字部高',
          '管围',
          '备注'
        ]

const filterVal = [
          'sid',
          'sage',
          'weight',
          'length',
          'height',
          'depth',
          'width',
          'bust',
          'crossHeight',
          'girth',
          'remarks'
        ]

上面的tHeader是列名, filterVal是对应列的值(某一行)

优化后:

我们只需要在el-table组件上加一个名为table的ref

 

const tHeader = this.$refs.table.$children.reduce((acc, cur) => {
          if (cur.label && cur.label != '操作') {
            acc.push(cur.label)
            return acc
          }
          return acc
        }, [])

const filterVal = this.$refs.table.$children.reduce((acc, cur) => {
    if (cur.prop) {
      acc.push(cur.prop)
      return acc
    }
    return acc
  }, [])

得到的结果和之前是一样的，这样就可以随意修改el-table的列而不用担心结果不对了。