Vue中动态渲染排序按钮，并传到后端进行排序

数据库中每个列名称有字段名为sortable为ture或者false来控制这个列是否需要排序，给有需要排序的列加上element-ui中的上下箭头按钮，并根据点击的列去传参数到后端，后端进行排序后返回。

1.给table 组件添加自拟函数属性

      <el-table
        :data="data"
        border
        style="width:100%"
        v-loading="loading"
        @select="handleSelect"
        :header-cell-style="headerStyle"
        :cell-style="cellStyle"
        @sort-change='tableSortChange'
      ></table>

其中@sort-change='tableSortChange’为表格绑定自定义排序函数
tabelSortChange

2.动态渲染表格。

 <template v-for="(elem, index) in tableConfig.config.elements">
            <el-table-column
              v-if="elem.display"
              :sortable="elem.sortable"
              show-overflow-tooltip
              :fixed="elem.fixed"
              :key="index"
              :prop="elem.key"
              :label="elem.label || elem.key"
            >
            <template v-if="elem.sortable">
                sortable="column"
            </template>
			</el-table-column>
</template>

结构为for-if-if结构，循环数据库中的表格的数据，这个渲染是从数据库中拿列标签以及对应的数据。第一个v-for 为循环所有的项，第一个v-if为判断当前字段是否需要展示，展示则渲染，第二个v-i为判断在展示的基础上需不需要进行排序，是则渲染排序箭头。

3.自定义的排序处理函数

tableSortChange(column) {
    
    
                let orderby = column.prop;
                let order = column.order;
                var params = [{
    
    

                    orderby: orderby
                }, {
    
    

                    order: order
                }];
                api
                    .queryPage({
    
    
                        pageId: this.pageId,
                        params,
                        pageNum: this.pageInfo.pageIndex,
                        pageSize: this.pageInfo.pageSize
                    })
                    .then(resp => {
    
    
                        this.loading = false
                        _this.dataList = resp.data.data.list
                        _this.pageInfo.totalSize = resp.data.data.total
                    })
            },

调用AJAX的api将参数传至后端，并从后端返回排序好的数据。