vue elementUI 表格字段排序用法

//模板中用法

<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark"

        style="width: 100%; margin-bottom: 10px; overflow-y: auto;"

        stripe

        header-row-class-name="table-header-rows"

        header-cell-class-name="table-header-cells"

        cell-class-name="table-cells"

        row-class-name="table-rows"

        @sort-change="changeSort"

        @selection-change="handleSelectionChange">

        <el-table-column type="selection" width="55"></el-table-column>

        <el-table-column v-for="(val, key, index) in tableHeadData" :key="index" :prop="key" :width="setTableBoxWidth(val)" :label="val"  sortable="custom"></el-table-column>

        <!-- <el-table-column prop="name" label="姓名" width="120"></el-table-column>

        <el-table-column prop="address" label="地址" show-overflow-tooltip></el-table-column> -->

</el-table>

 

//方法中用法

methods: {

    //监听排序

    changeSort(val){

　  console.log(val)

      this.sortField = val.prop

      this.handleGetTableDatas()

    }

//该方法是前端将表字段传给后端，后端根据表字段进行排序，在返回前端。