具有计算值的 vuejs2 el-table-column 列道具

Posted 2023-04-01

【中文标题】具有计算值的 vuejs2 el-table-column 列道具

【英文标题】：vuejs2 el-table-column column prop with computed value

【发布时间】：2020-04-20 00:50:11

【问题描述】：

我是 vuejs 的新手。我看不到如何在 ui-element 库的表中使用“计算”​​值。这是我的尝试..

<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-
                               :prop="column.prop"
                               :label="column.label">
              </el-table-column>
              <el-table-column
                :min-
                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>

我的对象就像（连续）

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

在“客户”列中，我希望有“customer.firstname +”“+customer.lastname ...但我计算出的“方法”不起作用（我猜它完全错误）

感谢您的帮助

【参考方案1】：

答案在这里：你不能用参数声明一个计算，这里是如何解决的

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