<template>
<div>
<div style="margin-top: 20px">
<el-button @click="delArray()" type="danger">批量删除</el-button>
<el-button @click="toggleSelection()">取消选择</el-button>
</div>
<el-table ref="multipleTable" :data="techSort" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55">
</el-table-column>
<el-table-column label="日期" width="120">
<template slot-scope="scope">{{ scope.row.name }}</template>
</el-table-column>
<el-table-column prop="name" label="姓名" width="120">
</el-table-column>
<el-table-column prop="address" label="地址" show-overflow-tooltip>
</el-table-column>
<el-table-column label="操作" width="180">
<template slot-scope="scope">
<el-button size="small" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
multipleSelection: [],
delarr: [], //存放删除的数据
techSort: []
}
},
mounted: function() {
this.getTechSort();
},
methods: {
toggleSelection() {
this.$refs.multipleTable.clearSelection();
},
getTechSort: function() {
var _this = this;
_this.$http({
methods: 'GET',
url: 'http://47.101.51.245:8888/api/news/farmingTechnologySort',
header: {
'content-type': 'application/json'
}
}).then(function(res) {
if (res.data.code == 0) {
_this.techSort = res.data.data;
} else {
console.log(res.data.code);
alert('数据加载失败!');
}
})
},
handleSelectionChange(val) {
this.multipleSelection = val;
},
// 多选删除
delArray: function() {
var _this = this;
const length = this.multipleSelection.length;
for (let i = 0; i < length; i++) {
// console.log(this.multipleSelection[i])
this.delarr.push(this.multipleSelection[i].id);
console.log(this.delarr[i])
}
_this.$http({
method: 'GET',
url: 'http://localhost:8888/advertise2/deleteAll?ids=' + this.delarr,
header: {
'content-type': 'application/json'
}
}).then(function(res) {
if (res.data.code == 0) {
alert('成功!');
_this.getTechSort();
} else {
alert('数据加载失败!');
}
})
},
//单行删除
handleDelete(row) {
var _this = this;
_this.$http({
method: 'GET',
url: 'http://localhost:8888/advertise2/deleteAll?ids=' + row,
header: {
'content-type': 'application/json'
}
}).then(function(res) {
if (res.data.code == 0) {
alert('成功!');
_this.getTechSort();
} else {
alert('数据加载失败!');
}
})
}
}
}
</script>
前后端分离Element UI删除和批量删除
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
推荐阅读更多精彩内容
- 一.环境准备: 1.安装Nodejs https://nodejs.org 2. 安装webpack-------...
- 一、为什么学习(初衷): 1.1 初衷 1、经过调研很多培训机构大量投入课程的产出,说明在新一代的编程领域有一定的...