Merge two columns in one using Vue Good Table-CodePudding

I have the data array as:

data() {
    return {
      columns: [
        {
          label: 'Action Description',
          field: 'actionDescription',
          tdClass: 'text-center',
          thClass: 'text-center',
          sortable: false,
        },
        {
          label: 'Group Description',
          field: 'groupDescription',
          tdClass: 'text-center',
          thClass: 'text-center',
          sortable: false,
        } 
            ],
       },
       }

So I want to display only one column called "Description" and display the concat result of actionDescription and groupDescription.

How can I achieve that?

CodePudding user response：

If I uderstood you correctly try with computed property:

Vue.use(window.vueGoodTable.default);

var app = new Vue({
  el: '#app',
  data(){
    return {
    columns: [
      {
          label: 'Description',
          field: 'result',
          tdClass: 'text-center',
          thClass: 'text-center',
          sortable: false,
        },
      ],
      rows: [
        { actionDescription: "John", groupDescription:"John"},
        { actionDescription:"Jane", groupDescription:"Jane" },
        { actionDescription:"Susan", groupDescription:"Susan"},
        { actionDescription:"Chris", groupDescription:"Chris"},
      ]
    }
  },
  computed: {
    mergedRows() {
      return this.rows.map(r => {
        return { result: `${r.actionDescription} ${r.groupDescription}` }
      })
    },
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-good-table.js"></script>
<div id="app">
  <vue-good-table
      :columns="columns"
      :rows="mergedRows"
  />
</div>