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

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