vue之-el-table :formatter获取行的index

摘要

本文讲解在element ui中的el-table中的:formatter获取每行的索引

el-table中本身支持通过

type=index

显示table的行号，并且支持自定义行号的显示，

<el-table-column
  type="index"
  :index="indexMethod">
</el-table-column>
    
methods: {
  indexMethod(index) {        
      return index;
      //或者自定义返回的内容
  }
}

显示效果如下：

但是这有个缺点，那就是在这个方法中并不能获取到每行的数据，如果想根据每行的数据自定义显示的内容，这个方法就有点鸡肋了。

思考了很久，终于曲折实现了以下业务：

1、正常情况下显示行号

2、如果每行数据中某个属性符合某个情况，则显示个性化的内容

此实现方式摒弃了上面的type=index的方式，而是采用逻辑处理table数据判断索引，如下，序号将显示在下面代码所在的列，序号显示逻辑在indexValFormat中实现

<el-table-column label="" prop="formId" min-width="20" align="center" :formatter="indexValFormat"/>

js代码如下

indexValFormat(row, column) {
  //首先获取当前行所在的索引
  let cuIndex = -1
  this.orderDataList.forEach((item, index) => {
    if (item.id === row.id) {
      cuIndex = index
    }
  })
  //如果urgeStatus 为某些值，则返回个性化的内容，
  if (row.urgeStatus === 1) {
    return '急'
  } else if (row.urgeStatus === 2) {
    return '催'
  }
  //否则返回下标
  return cuIndex + 1;
},

最终，通过上面的代码实现了既能显示行号，又能根据当前行的内容个性化展示内容的目的，展示效果如下

 收藏 ( 0 )  赞 ( 0 )