el-table怎么获取映射后的数据？

Question

比如原始数据是[{a:1,b:2},{a:2,b:3},{a:3,b:4}],但是实际情况是a和b列在页面上呈现的是数据字典渲染的结果，该怎么拿到渲染后的数组呢？

Answer 1

我理解的是你表格内配置了字典转换，你想要的数组是其中的部分数值转换为字典值的数组，你这直接用map处理下原数组，把其中存在字典项的手动写个js转换下然后赋值就行了吧

Answer 2

一般来说如果表格的字典属性需要介入业务操作的，我会在获取到数据之后直接去匹配字典中的内容，并不会使用 filters 或者 formatter 来处理。

所以如果按照OP这样的话，可以这样改写一下：

methods: {
  loadData(){
    remoteDataAPI({..}).then(res => {
      this.sourceData = res.data.rows.map(item => {
         const dictDataA = getDictData(item.a)
         ...
         return {
            ...item,
            dictDataA,
            dictDataB
         } 
      })
    })
  },
}

这样在使用时就可以直接传入 row 来处理了。

Answer 3

let dictionary = {
  1: '数据1',
  2: '数据2',
  3: '数据3',
  // ...
};

<el-table :data="tableData" style="width: 100%">
  <el-table-column
    prop="a"
    label="列A"
    :formatter="row => dictionary[row.a]"
  >
  </el-table-column>
  <el-table-column
    prop="b"
    label="列B"
    :formatter="row => dictionary[row.b]"
  >
  </el-table-column>
</el-table>

let renderedData = originalData.map(item => ({
  a: dictionary[item.a],
  b: dictionary[item.b],
}));