博客

数据项

data(){
	return:{
	tableData: [
        {
          id: '0',
          name: 'banner',
          link: 'https://element.eleme.cn/#/zh-CN/component/table',
          img: ''
        },
        {
          id: '1',
          name: 'banner',
          link: 'https://element.eleme.cn/#/zh-CN/component/table',
          img: ''
        },
        {
          id: '3',
          name: 'banner',
          link: 'https://element.eleme.cn/#/zh-CN/component/table',
          img: ''
        },
        {
          id: '7',
          name: 'banner',
          link: 'https://element.eleme.cn/#/zh-CN/component/table',
          img: ''
        }
	}
}

根据点击项id获取上一项id

upBanner(id){
      // 上移列表项
      console.log(id)
      const id1 = this.tableData.findIndex(item=>{ // 根据当前项id获取当前项在数组中的索引
       return item.id == id 
      })
      if(id1 == 0){
        this.$message.warning('当前已是第一项')
        return
      }
      const id2 = this.tableData[id1-1].id // 获取当前项上一项的id
      console.log(id2)
    }

知识点：es6的find和findIndex方法

数组实例的find方法，用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined。

[{id:1,name:'张三'},{id:2,name:'张三'},{id:3,name:'张三'}].find((item) => item.id> 1)  
// {id: 2, name: "张三"} 
[{id:1,name:'张三'},{id:2,name:'张三'},{id:3,name:'张三'}].find((item) => item.id> 3 ) // undefined 

数组实例的findIndex方法的用法，返回第一个符合条件的数组成员的索引位置，如果所有成员都不符合条件，则返回-1。

[{id:1,name:'张三'},{id:2,name:'张三'},{id:3,name:'张三'}].findIndex((item) => item.id> 1) // 1