table表格追加行（头部追加unshift()和尾部追加push()）删除行splice()

最新推荐文章于 2024-08-14 15:58:05 发布

原创最新推荐文章于 2024-08-14 15:58:05 发布 · 2.5k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#js #es6 #vue

js 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍JavaScript中数组的常见操作方法，包括如何在数组尾部追加数据、头部插入数据、删除指定位置的数据以及替换指定位置的数据。通过具体实例，帮助读者掌握push(), unshift(), splice()等方法的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

应用场景：如table表格需要新增一行数据，当前页table表格数据少时，可选择追加到尾部，当需要频繁新增时，追加头部较为合适。js常用方法实战：push() splice() unshift()

1.尾部追加：使用push()方法

// 添加行
addRow () {
  let item = {
    equipmentName: undefined,
    equipmentNo: '',
    startTime: '',
    endTime: ''
  }
  this.dataSource.push(item)
}

2.头部追加：使用unshift()方法

// 添加行
addRow () {
  let item = {
    equipmentName: undefined,
    equipmentNo: '',
    startTime: '',
    endTime: ''
  }
  this.dataSource.unshift(item)
}

3.删除行：使用splice()方法
// 删除行
delRow (index) {
  this.dataSource.splice(index, 1)
}

4.替换行(删除指定位置行数据，追加指定数据到当前位置)：使用splice()方法

// 替换行
replaceRow (index) {
  let item = {
    equipmentName: undefined,
    equipmentNo: '',
    startTime: '',
    endTime: ''
  }
  this.dataSource.splice(index, 1, item)
}

var arr = ['a', 'b', 'c', 'd', 'e']
arr.splice(2, 1, 0)
console.log(arr) // 'a', 'b', 0, 'd', 'e'