<template>
<div class="siteFilter">
<div class="sitefilter-main">
<div class="search-content">
<el-row style="margin-bottom:20px">
<el-button type="danger" size="small" @click="handleDeleteAll">批量删除</el-button>
</el-row>
<el-table
:data="tableData"
border
style="width: 100%"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="50" align="center"></el-table-column>
<el-table-column label="序号" type="index" width="55" align="center"></el-table-column>
<el-table-column prop="host" label="过滤的站点名" width="900"> </el-table-column>
<el-table-column prop="" label="操作">
<template slot-scope="scope">
<el-link type="danger" @click="deletsFDialog(scope.row)">删除</el-link>
</template>
</el-table-column>
</el-table>
<!-- 分页区域 -->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="queryInfo.pageIndex"
:page-sizes="[5, 10, 15]"
:page-size="queryInfo.pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
>
</el-pagination>
</div>
</div>
</div>
</template>
<script>
// 这里是我本地导入接口的方法
import { getsiteFilterTableData,deletsFDialog} from "../../../assets/js/api";
export default {
data(){
return{
// 列表数据
tableData:[],
queryInfo:{
host:"",
pageIndex:1,
pageSize:10,
deleted:false
},
total:0,
multipleSelection: [],
}
},
created(){
this.getsiteFilterTableData()
// 导入页面样式
let styleLoad = sessionStorage.getItem("style");
this.getLess(styleLoad, "siteFilter");
},
methods:{
// 获取表格数据
getsiteFilterTableData(){
let params =this.queryInfo
getsiteFilterTableData(params).then(res=>{
this.tableData=res.data.data.list
this.total=parseInt(res.data.data.total)
})
},
// 监听pagesize改变的事件
handleSizeChange(newSize) {
this.queryInfo.pagesize = newSize
this.getsiteFilterTableData()
},
// 监听页码值改变的事件
handleCurrentChange(newPagIndex) {
this.queryInfo.pageIndex = newPagIndex
this.getsiteFilterTableData()
},
// 表格数据删除
deletsFDialog(row){
this.multipleSelection.push(row);
this.handleDeleteAll();
},
handleSelectionChange(val) {
this.multipleSelection = val;
} ,
// 批量删除
handleDeleteAll(){
let _this = this;
if (this.multipleSelection.length == 0) {
this.$message.error("您还未选中过滤站点！");
} else {
this.$confirm("此操作将永久删除过滤站点, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(() => {
let arr = [];
_this.multipleSelection.forEach(item => {
arr.push(item.id);
});
let params = {
ids: arr.join()
};
deletsFDialog(params);
this.$message({
type: "success",
message: "删除成功!"
});
_this.currentpage = 1;
_this.multipleSelection = [];
_this.getsiteFilterTableData();
});
}
}
}
}
</script>
<style scoped>
</style>