How to do an ajax remote sort

[dem3trio]

Hello,

I have captured the 'sort-change' event and setted the sortable prop to 'custom'.

But I don't know how to call the "searchHandler" method outside of the component to force a reloading.

this is an example of my code.

<template>
  <el-search-table-pagination
                url="/my/search/url"
                list-field="data"
                total-field="total"
                stripe
                border
                :columns="columns"
                page-index-key="page"
                page-size-key="offset"
                @sort-change="onSortChanged"
        >

  ... here goes some slots

</el-search-table-pagination>
</template>
<script>
export default {
    data() {
        return {
            showDialog: false,
            columns: [
                { prop: 'name', label: 'Name', minWidth: 200, sortable: 'custom' },
                { prop: 'start_date', label: 'Start Date',width: 140, sortable: 'custom' },
                { prop: 'end_date', label: 'End Date', width: 140, sortable: 'custom' },
                { label: 'Actions', width: 90, slotName: 'buttons' }
            ]
        }
    },
 methods: {
 onSortChanged(data) {
          /// What I have to do here?
        },
 .... more code

Thanks in advance.

[zollero]

@dem3trio

Hello, please read the following doc about sort things. http://element.eleme.io/#/en-US/component/table#sorting

And, if you want to call searchHandler, just use this:

<template>
  <el-search-table-pagination
               ref="el-table-search"
                url="/my/search/url"
                list-field="data"
                total-field="total"
                stripe
                border
                :columns="columns"
                page-index-key="page"
                page-size-key="offset"
                @sort-change="onSortChanged"
        >

  ... here goes some slots

</el-search-table-pagination>
</template>
<script>
export default {
    data() {
        return {
            showDialog: false,
            columns: [
                { prop: 'name', label: 'Name', minWidth: 200, sortable: 'custom' },
                { prop: 'start_date', label: 'Start Date',width: 140, sortable: 'custom' },
                { prop: 'end_date', label: 'End Date', width: 140, sortable: 'custom' },
                { label: 'Actions', width: 90, slotName: 'buttons' }
            ]
        }
    },
 methods: {
       reload() {
            //// check this
             this.$refs['el-table-search']. searchHandler();
       },
       onSortChanged(data) {
          /// What I have to do here?
        },
 .... more code

[dem3trio]

Thank you very much for the fast answer. I have lots to learn about Vue.

Thanks for the plugin its very useful!