实现el-table中邮箱分行展示和逗号

 

<el-table-column prop="noticeEmailStr" label="通知邮箱">
          <template slot-scope="scope">
            {{scope.row.noticeEmailStr.split(",").map((noticeEmailStr,index,{length}) =>
            (index+1 != length)?noticeEmailStr + ',' + '\n':noticeEmailStr+'\n').join("")}}
          </template>
        </el-table-column>

这里将数据进行splite显示将后端传回的数据逗号进行分割，因为后端传回来的数据是好几个邮箱用逗号间隔的一整个字符串例如‘aaa.com,aaa,com........’,这里先将字符串进行分割然后map方法便利出每个元素，重点这里使用了{length}，在进行判断如果次元素后面还有元素就加上一个逗号，然后分行，如果没有元素了就不加上逗号，三元判断，最后变成字符串.join('')

检查它是否是 map() 函数中数组中的最后一个元素

问：

我有一个字符串数组，我想在不同的行上打印它们。

我正在为此使用 <hr /> 但正如现在在我的代码中一样，它会在最后一个字符串之后放置另一个中断，这是我想避免的事实。有任何想法吗？

这是我的代码：

 return myArray.map((text, index) => (
    <span key={index}>
        {myArray[index]}
        {<hr />}
    </span>
));

原文由 Samurai Jack 发布，翻译遵循 CC BY-SA 4.0 许可协议

回答：

您可以通过检查是否有下一个元素来检查它的最后一个元素 arr[i + 1]

 var arr = ['a', 'b', 'c']
var html = arr.map(function(e, i) {
  return `<span key="${i}">${e}</span>${arr[i+1] ? '<hr>' : ''}`
})

document.body.innerHTML += html.join('')

myArray.map((text, index, {length}) => (
  /* ... your code ... */
  if(index + 1 === length){ //last element

  }
));
//{length} === myArray.length; third argument is an array