【无标题】

最新推荐文章于 2024-07-23 18:48:47 发布

momo_root

最新推荐文章于 2024-07-23 18:48:47 发布

阅读量76

点赞数

分类专栏： vue2表格文章标签： elementui vue

本文链接：https://blog.csdn.net/weixin_54526156/article/details/134186523

版权

vue2表格专栏收录该内容

6 篇文章 0 订阅

订阅专栏

vue2+ elementui 表格后台返回的数据格式和前端表格数据格式不一样，怎么处理
后台返回的数据：

{
    "code": 200,
    "data": {
        "ASR": [
            "Terror暴恐",
            "Porn色情",
            "Politics涉政",
            "Sensitive敏感",
            "ADs广告",
            "Abuse谩骂"
        ],
        "低俗语音": [
            "1低俗"
        ]
    },
    "message": "SUCCESS"
}

业务需求是数据表格中的操作弹出层里面的表格

<span class="detailBtn pointer" @click="showModule(scope.row)">模块</span>
<!-- 模块弹窗  -->
      <el-dialog custom-class="moduleDialog" title="模块标签信息" :visible.sync="isModuleTableDialog">
        <div class="moduleContent">
          <el-table :data="moduleLabelData" height="320">
            <el-table-column prop="moduleData" label="模块" width="150" />
            <el-table-column prop="label" label="标签" width="150">
              <template slot-scope="scope">
                <div v-html="scope.row.label"></div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-dialog>
data: 
      moduleLabelData: [], // 模块内容
method:
showModule(row) {
      this.isModuleTableDialog = true
      const recordId = row.recordId
      let moduleDatas = {}
      this.axios.get('后台接口', {
      }).then(res => {
        if (res.code === 200) {
          moduleDatas = res.data
          for (const key in moduleDatas) {
            const row = {}
            row['moduleData'] = key
            row['label'] = moduleDatas[key].join('<br>') // 换行展示
            this.moduleLabelData.push(row)
          }
        }
      })
    }