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

作者:青山常在人不老   阅读 (368)  |  收藏 (0)  |  点赞 (0)

摘要

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


原文链接:vue之-el-table :formatter获取行的index

el-table中本身支持通过

type=index

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

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

显示效果如下:

image.png

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

思考了很久,终于曲折实现了以下业务:

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;
},

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

image.png

分类   前端配置
字数   898

博客标签    element-ui table   el-table type=index 获取row  

评论