vuejs2uielement

vuejs2 el-table-column column prop with computed value


I'm new to VueJS. I don't see how to use a "computed" value in a table of the ui-element library. Here is how I tried:

<template>
  <div class="row">
    <div class="col-md-12">
      <h4 class="title">Commandes en cours</h4>
    </div>
    <!--<div v-if="$can('manage-order')">You can manage order.</div>-->
    <div class="col-12">
      <card title="">
        <div>
          <div class="col-12 d-flex justify-content-center justify-content-sm-between flex-wrap">
            <el-select
              class="select-default mb-3"
              style="width: 200px"
              v-model="pagination.perPage"
              placeholder="Per page">
              <el-option
                class="select-default"
                v-for="item in pagination.perPageOptions"
                :key="item"
                :label="item"
                :value="item">
              </el-option>
            </el-select>
            <el-input type="search"
                      class="mb-3"
                      style="width: 200px"
                      placeholder="Search records"
                      v-model="searchQuery"
                      aria-controls="datatables"/>
          </div>
          <div class="col-sm-12">
            <el-table stripe
                      style="width: 100%;"
                      :data="queriedData"
                      border>
              <el-table-column v-for="column in tableColumns"
                               :key="column.label"
                               :min-width="column.minWidth"
                               :prop="column.prop"
                               :label="column.label">
              </el-table-column>
              <el-table-column
                :min-width="120"
                fixed="right"
                label="Actions">
                <template slot-scope="props">
                  <a v-tooltip.top-center="'Like'" class="btn-info btn-simple btn-link"
                     @click="handleLike(props.$index, props.row)">
                    <i class="fa fa-heart"></i></a>
                  <a v-tooltip.top-center="'Edit'" class="btn-warning btn-simple btn-link"
                     @click="handleEdit(props.$index, props.row)"><i
                    class="fa fa-edit"></i></a>
                  <a v-tooltip.top-center="'Delete'" class="btn-danger btn-simple btn-link"
                     @click="handleDelete(props.$index, props.row)"><i class="fa fa-times"></i></a>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div slot="footer" class="col-12 d-flex justify-content-center justify-content-sm-between flex-wrap">
          <div class="">
            <p class="card-category">Showing {{from + 1}} to {{to}} of {{total}} entries</p>
          </div>
          <l-pagination class="pagination-no-border"
                        v-model="pagination.currentPage"
                        :per-page="pagination.perPage"
                        :total="pagination.total">
          </l-pagination>
        </div>
      </card>
    </div>
  </div>
</template>
<script>
    import {Table, TableColumn, Select, Option} from 'element-ui'
  import LPagination from 'src/components/Pagination.vue'
  import Fuse from 'fuse.js'

  export default {
    components: {
      LPagination,
        [Table.name]: Table,
        [Select.name]: Select,
        [Option.name]: Option,
        [TableColumn.name]: TableColumn
    },
    computed: {
        clientName(customer){
            return customer.firstname + ' '+ customer.lastname
        },

      pagedData () {
        return this.tableData.slice(this.from, this.to)
      },

      /***
       * Searches through table data and returns a paginated array.
       * Note that this should not be used for table with a lot of data as it might be slow!
       * Do the search and the pagination on the server and display the data retrieved from server instead.
       * @returns {computed.pagedData}
       */
      queriedData () {
        let result = this.tableData
        if (this.searchQuery !== '') {
          result = this.fuseSearch.search(this.searchQuery)
          this.pagination.total = result.length
        }
        return result.slice(this.from, this.to)
      },
      to () {
        let highBound = this.from + this.pagination.perPage
        if (this.total < highBound) {
          highBound = this.total
        }
        return highBound
      },
      from () {
        return this.pagination.perPage * (this.pagination.currentPage - 1)
      },
      total () {
        this.pagination.total = this.tableData.length
        return this.tableData.length
      }
    },
    data () {
      return {
        pagination: {
          perPage: 5,
          currentPage: 1,
          perPageOptions: [5, 10, 25, 50],
          total: 0
        },
        searchQuery: '',
        propsToSearch: ['id_order'],
        tableColumns: [
          {
            prop: 'id_order',
            label: 'ID',
            minWidth: 200
          },
            {
                prop: "clientName(customer)",
                label: 'Client',
                minWidth: 200,
            }
        ],
          fuseSearch: null,
          tableData:[]
      }
    },
    methods: {

      handleLike (index, row) {
        alert(`Your want to like ${row.name}`)
      },
      handleEdit (index, row) {
        alert(`Your want to edit ${row.name}`)
      },
      handleDelete (index, row) {
        let indexToDelete = this.tableData.findIndex((tableRow) => tableRow.id === row.id)
        if (indexToDelete >= 0) {
          this.tableData.splice(indexToDelete, 1)
        }
      }
    },
    mounted () {

            this.fuseSearch = new Fuse(this.tableData, {keys: ['id_order']})

    },
      created (){
          this.$store.dispatch('ps_orders/get_ps_orders').then(

          this.tableData = this.$store.getters["ps_orders/orders"])
      }
  }
</script>
<style>

</style>

My object is like (for a row)

{
    "id_order": 4641,
    "customer": {
      "id_customer": 9008,
      "firstname": "Pierre",
      "lastname": "dupont"
    }
  }

In the column "Client" I would like to have customer.firstname + " " + customer.lastname ... but my computed "method" is not working (I guess it is completely wrong).


Solution

  • You can't declare a computed with a parameter. Here is how to solve:

    <el-table-column label="Client" >
        <template slot-scope="scope">
            {{ clientName(scope.row.customer) }}
        </template>
    </el-table-column>
    

    And:

    computed: {
    
        clientName(){
            return (customer) => customer.firstname + ' '+ customer.lastname
        }
    }