Effect:

   <Table :columns="columns" :data="tableData" size="small" ref="table" :border="false"
        @on-sort-change="tableSort">
    </Table>
    
Copy the code

Return is defined as follows:

columns: [ { type: 'expand', width: 50, render: (h, params) => { return h(expandRow, { props: { row: Params. Row}})}}, {" title ":" ship company Id ", "key" : "carrier", "min - width:" 150, "align" : 'center',}, {" title ": "Ship company name", "key" : "carrierNameCn", "min - width:" 150, "align" : 'center'}, {" title ":" name ", "key" : "VesselNameCn", "min - width:" 150, "align" : 'center'}, {" title ":" voyage ", "key" : "voyageCode", "min - width" : 150, "align" : 'center',}, {" title ":" name of loading port ", "key" : "polCn", "min - width:" 150, "align" : 'center',}, {" title ": "Port of discharge name", "key" : "podCn", "min - width:" 150, "align" : 'center'}, {" title ":" patterns ", "key" : "zdorzz", "min - width" : 150, "align": 'center', filters: [{label: 'direct ', value: "ZD"}, {label:' transition ', value: "ZZ"}], filterMultiple: False, filterRemote(value, row) {this.zdorzz = value[0] this.searchServicelist (), render: (h, params) = > {return h (' div ', [h (' span, {style: {color: '# 000000'}}, params. Row. Zdorzz = 'lh-zd'? 'direct' : 'transit'),])}}, {" title ":" ship status ", "key" : "show", "min - width:" 150, "align" : 'center', filters: [{label: 'departure, value: "D"}, {label: 'A ', value:' A '}], filterMultiple: False, filterRemote(value, row) {this.dora = value[0] this.searchServicelist ()}, render: (h, params) = > {return h (' div ', [h (' span, {style: {color: '# 000000'}}, params. Row. The show = 'D'? 'departure: 'to'),])}}, {" title ":" journey ", "key" : "sailingDays", "min - width:" 150, "align" : 'center', "sortable" : True,}, {" title ":" etd estimated time of departure ", "key" : "etd", "min - width:" 150, "align" : "center", "sortable" : true,}, / / {/ / "title" : 'operation', / / "key" : 'action', / / "min - width" : 120, / / "align" : 'center', / / render: (h, params) => { // return h('div', [ // h('Button', { // props: { // type: 'text', // size: 'small' // } // }, 'View'), // h('Button', { // props: { // type: 'text', // size: 'small' // } // }, 'Edit') // ]); // } // } ],Copy the code

methods

tableSort(val) { console.log(val); if (val.column.key == "sailingDays") { if (val.column.key == "asc") { this.orderBy = "SAILING_DAYS" } else { this.orderBy = "SAILING_DAYS DESC" } } else if (val.column.key == "etd") { if (val.column.key == "asc") { this.orderBy = "ETD"} else {this.orderby = "ETD DESC"}} this.searchservicelist ()}, // filterOperateType(filters, row, column) { let type = Object.keys(filters) if (type[0] == 'serviceType') { this.serviceType = filters.serviceType[0]; } else if (type[0] == 'userType') { this.userType = filters.userType[0]; } this.searchServiceList() },Copy the code