带有计算值的vuejs2 el表格列道具

带有计算值的vuejs2 el表格列道具,vuejs2,uielement,Vuejs2,Uielement,我是vuejs的新手。我不知道如何在ui元素库的表中使用“计算”值。这是我如何尝试的 <template> <div class="row"> <div class="col-md-12"> <h4 class="title">Commandes en cours</h4> </div> <!--<div v-if="$can('manage-order')">You

我是vuejs的新手。我不知道如何在ui元素库的表中使用“计算”值。这是我如何尝试的

<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>

在“Client”列中,我希望使用“customer.firstname+”+customer.lastname…但我的计算“方法”不起作用(我想它完全错了)


感谢您的帮助这里的答案是:您不能声明一个带有参数的计算结果,下面是解决方法

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


答案是:你不能用一个参数声明一个computed,下面是如何解决这个问题

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


        computed: {

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