【vue】element 中 table 的 默认排序 、后台排序 、列值的格式化展示

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/dangbai01_/article/details/83780457

1.默认排序很简单

在el-table标签中加入默认属性

:default-sort ="{prop:'date',order:'descending'}"

然后在单独一列中

    <el-table-column

      prop="date"

      label="日期"

      sortable

      width="120”>

    </el-table-column>

默认排序基本上适配90%多的情况，它可以自动按照一定的顺序去升降序的去排列，不需要自己去设置规则

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].[地址]