20181214——另一个Vue项目第二个

想把div中的元素居中，使用line-height就行

删除一项数据，找到这个数据索引的ID值，然后利用数组的splice方法去删除

数组中some方法
some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。

some() 方法会依次执行数组的每个元素：

如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
如果没有满足条件的元素，则返回false。

数组中的splice（）方法
1、删除功能，第一个参数为第一项位置，第二个参数为要删除几个。

array.splice(index,num)，返回值为删除内容，array为结果值。

<!DOCTYPE html>
<html>
<body>
<script>
var array = ['a','b','c','d'];
var removeArray = array.splice(0,2);
alert(array);//弹出c,d
alert(removeArray);//返回值为删除项，即弹出a,b
</script>
</body>
</html>

插入功能，第一个参数（插入位置），第二个参数（0），第三个参数（插入的项）

array.splice(index,0,insertValue)，返回值为空数组，array值为最终结果值

<!DOCTYPE html>
<html>
<body>
<script>
var array = ['a','b','c','d'];
var removeArray = array.splice(1,0,'insert');
alert(array);//弹出a,insert,b,c,d
alert(removeArray);//弹出空
</script>
</body>
</html>

替换功能，第一个参数（起始位置），第二个参数（删除的项数），第三个参数（插入任意数量的项）

array.splice(index,num,insertValue)，返回值为删除内容，array为结果值。

<!DOCTYPE html>
<html>
<body>
<script>
var array = ['a','b','c','d'];
var removeArray = array.splice(1,1,'insert');
alert(array);//弹出a,insert,c,d
alert(removeArray);//弹出b
</script>
</body>
</html>

在做实例中
在这里插入图片描述
采用的是elementUI组件

 <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="text" size="small">删除</el-button>
            </template>

这是scope.row 就是整列的这个对象
想要实现删除这个对象
先在list数组中找到该对象的索引
然后利用数组中splice方法，进行索引删除
代码如下：

<template>
    <div>
      <div class="header">添加品牌</div>
      <div class="box">
        <p class="input1"  form-inline>
          <el-row>
          <el-col :span="8">
            Id: <el-input v-model="idValue" placeholder="请输入id" >ID</el-input>
          </el-col>
          <el-col :span="8">
            Name: <el-input v-model="nameValue" placeholder="请输入name"></el-input>
          </el-col>
          <el-button type="primary" @click="btnAdd">添加</el-button>
          </el-row>
        </p>
      </div>
      <div class="list">
        <el-table
          :data="list"
          style="width: 100%">
          <el-table-column
            prop="id"
            label="id"
            width="180">
          </el-table-column>
          <el-table-column
            prop="name"
            label="名字"
            width="180">
          </el-table-column>
          <el-table-column
            prop="time"
            label="日期"
            width="300">
          </el-table-column>
          <el-table-column
            prop="opt"
            label="操作">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
</template>

<script>
export default {
  name: 'Pinpai',
  data () {
    return {
      idValue: '',
      nameValue: '',
      list: [{
        id: '1',
        name: '宝马',
        time: '2018-12-14'
      }, {
        id: '2',
        name: '奔驰',
        time: '2018-12-24'
      }, {
        id: '3',
        name: '二手奥拓',
        time: '2018-10-24'
      }]
    }
  },
  methods: {
    btnAdd () {
      var date = new Date()
      var year = date.getFullYear()
      var month = date.getMonth()
      var day = date.getDay()
      var hour = date.getHours()
      var minute = date.getMinutes()
      var second = date.getSeconds()
      second = second < 10 ? '0' + second : second
      this.list.push({
        id: this.idValue,
        name: this.nameValue,
        time: year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second,
        opt: '删除'
      })
      this.idValue = ''
      this.nameValue = ''
    },
    handleClick (row) {
      for (var i = 0; i < this.list.length; i++) {
        if (this.list[i] === row) {
          var index = i
        }
      }
      this.list.splice(index, 1)
    }
  }
}
</script>

<style scoped lang="stylus">
  .header
    height 50px
    background-color blue
    color aliceblue
</style>

20181214——另一个Vue项目第二个

猜你喜欢