摘要
本文讲解在element ui中的el-table中的:formatter获取每行的索引
本文讲解在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; },
最终,通过上面的代码实现了既能显示行号,又能根据当前行的内容个性化展示内容的目的,展示效果如下