[vue]element table 结合django drf后端排序实现

后端model

class ProjectModel(BaseMysqlModel):
    code = models.CharField(max_length=64, unique=True, verbose_name="项目编号")
    name = models.CharField(max_length=64, verbose_name="项目名称")
    desc = models.TextField(null=True, blank=True, verbose_name="项目描述")
    progress = models.ForeignKey('ProgressModel', on_delete=models.PROTECT, null=True, blank=True, verbose_name="进度")

后端viewset

ordering_fields 进行字段排序，
如果需要根据外键表的某个字段排序，则写法为 外键字段__外键表某个字段
如：progress__name ，progress是关联外键的字段，name是外键表其中一个字段

class ProjectViewSet(BaseMysqlModelViewSet):
    queryset = ProjectModel.objects.all().order_by('-start_date')
    serializer_class = ProjectSerializer

    permission_classes = (permissions.IsAuthenticated,)
    filter_class = ProjectFilter
    filter_backends = [SearchFilter, DjangoFilterBackend, OrderingFilter, ProjectTabPaneFilter]

    pagination_class = ApiPageNumberPagination
    ordering_fields = ('start_date', 'code', 'name', 'project_type__name', 'progress__progress',
                       'progress__name', 'is_void', 'amount',)

前端-table

sort-change 是重点
sortable=“custom” 则代表用户希望远程排序，
prop=“progress__progress” 与后端ordering_fields字段名称保持一致

<el-table
          v-loading="loading"
          :data="projectList"
          border
          :header-cell-style="{color:'#0d0015',fontSize:'15px',fontWeight:800}"
          @sort-change="sortChange"
        >
	  <el-table-column align="center" label="进度" sortable="custom" prop="progress__progress" width="300">
	            <template slot-scope="{row}">
	              <el-row>
	                {{ row.progress_name }}
	
	              </el-row>
	              <el-row>
	                <el-progress
	                  :text-inside="true"
	                  :stroke-width="15"
	                  :percentage="row.progress_value"
	                  :color="row.progress_color"
	                />
	              </el-row>
	            </template>
	          </el-table-column>      
</el-table>

前端-data

ordering是与后端传参的固定参数
可以看一下后台的请求地址：http://127.0.0.1:8007/api/project?page=1&limit=20&ordering=-progress__progress

data() {
    return {
	    listQuery: {
	        page: 1,
	        limit: 20,
	        name: null, // 项目名称
	        project_type: null, // 项目类型
	        project_principal_name: null, // 经办人
	        ordering: null
	      }
    }
  }

前端 methods

sort-change方法自带三个参数，分别代表意义是：
column：当前列
prop：当前列需要排序的数据
order：排序的规则（升序、降序和默认[默认就是没排序]）

sortChange(column, prop, order) {
      if (column.prop == null || column.order == null) {
        this.listQuery.ordering = ''
      } else {
        if (column.order === 'ascending') {
          this.listQuery.ordering = column.prop
        } else {
          this.listQuery.ordering = '-' + column.prop
        }
      }
      this.getList()
    }