4-3-vue框架-第三方ui组件elementui-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].[地址]