1. 程式人生 > 其它 >vue+element列表排序

vue+element列表排序

1.預設排序很簡單

在el-table標籤中加入預設屬性
:default-sort ="{prop:'date',order:'descending'}"
然後在單獨一列中

    <el-table-column
      prop="date"
      label="日期"
      sortable
      width="120”>
    </el-table-column>

2.後臺排序

需要根據需要給後臺傳送資訊,讓後臺做一些操作
首先在el-table標籤中加入事件監聽
@sort-change='sortChange'

然後單獨一列中設定:

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

然後方法的實現:

methods: {
      sortChange(column, prop, order) {
        //點選排序按鈕後拿到column.order,可以傳送column.order給後臺,後臺再根據什麼排序來返回排序過後的資料
        console.log(column + '---' + column.prop + '---' + column.order)
        //輸出的結果 [object Object]---name---ascending
      },
}

3.指定列值的格式化

    <el-table-column
      prop="address"
      label="地址"
      :formatter="formatter"
      show-overflow-tooltip>
    </el-table-column>
Methods{
      formatter(row, column) {
        return row.rowNum +'.'+ row.address;
      },
}

我們可以看到展現方式裡邊統一都有[rowNum].[地址]