20181214——另一個Vue專案第二個
阿新 • • 發佈：2018-12-16
想把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>