Question

我有一个问题。如何使用vue js创建动态表。

我想使用Vue将此json文件渲染到表中，但并没有如我所愿。我想要两种语言的数据和app_adi，但只有最新数据。如何同时显示两者？

json文件

this.columnDefs = [{
  headerName: '',
  width: 50,
  cellRendererFramework: ActionCellRendererComponent,
  cellRendererParams: {
    icon: 'fa-trash',
    action: this.downloadAttachmentAction
  }
},



downloadAttachmentAction(params: any) {
   this.otherFunction() <-- I can not do the functions of my controller. with "this" as it refers to ag-grid
}

otherFunction(){
}

我要建立此表：

{
   "accounts":{
         "user":{
            "_id":"5a500vlflg0aslf011ld0a25a5",
            "username":"john",
            "id":"59d25992988fsaj19fe31d7",
            "name":"Test",
            "customer":" John Carew",
         },
         "application":[
            {
               "app_id":"5af56pi314-y1i96kdnqs871nih35",
               "language":"es"
            },
            {
               "app_id":"5af56pi314-blvinpgn4c95ywyt8j",
               "language":"en"
            }
         ]
      }
   }

Answer 1

在计算属性中预处理您的json。

在您的示例中，您只需将“用户”属性添加到第一个“应用程序”项。

new Vue({
  el: '#app',
  data() {
    return {
      columns: {
        username: 'Name',
        customer: 'Customer',
        language: 'Language',
        app_id: 'App_ID'
      },
      userData: {
        "user": {
          "_id": "5a500vlflg0aslf011ld0a25a5",
          "username": "john",
          "id": "59d25992988fsaj19fe31d7",
          "name": "Test",
          "customer": " John Carew",
        },
        "application": [{
            "app_id": "5af56pi314-y1i96kdnqs871nih35",
            "language": "es"
          },
          {
            "app_id": "5af56pi314-blvinpgn4c95ywyt8j",
            "language": "en"
          }
        ]
      }
    }
  },
  computed: {
    tableData() {
      return this.userData.application.map((x, index) => {
        return index === 0 ? Object.assign(x, this.userData.user) : x
      })
    }
  }
})

这是一个有效的示例：https://jsfiddle.net/ellisdod/jm3snwxc/2/

如何使用Vue JS创建动态表

1 个答案: