github
/
vue-manage-system
mirror of https://github.com/lin-xin/vue-manage-system
1
0
Fork 0
Code Issues Releases Wiki Activity

基础表格，批量删除功能完善。

pull/244/head
james 2020-05-17 17:06:43 +08:00
parent 31f40a5e15
commit ae3da0b456
1 changed files with 191 additions and 170 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

137
src/components/page/BaseTable.vue
View File

@ -9,83 +9,95 @@
</div> </div>
<div class="container"> <div class="container">
<div class="handle-box"> <div class="handle-box">
<el-button <el-button type="primary"
type="primary"
icon="el-icon-delete" icon="el-icon-delete"
class="handle-del mr10" class="handle-del mr10"
@click="delAllSelection" @click="delAllSelection">批量删除</el-button>
>批量删除</el-button> <el-select v-model="query.address"
<el-select v-model="query.address" placeholder="地址" class="handle-select mr10"> placeholder="地址"
<el-option key="1" label="广东省" value="广东省"></el-option> class="handle-select mr10">
<el-option key="2" label="湖南省" value="湖南省"></el-option> <el-option key="1"
label="广东省"
value="广东省"></el-option>
<el-option key="2"
label="湖南省"
value="湖南省"></el-option>
</el-select> </el-select>
<el-input v-model="query.name" placeholder="用户名" class="handle-input mr10"></el-input> <el-input v-model="query.name"
<el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button> placeholder="用户名"
class="handle-input mr10"></el-input>
<el-button type="primary"
icon="el-icon-search"
@click="handleSearch">搜索</el-button>
</div> </div>
<el-table <el-table :data="tableData"
:data="tableData"
border border
class="table" class="table"
ref="multipleTable" ref="multipleTable"
header-cell-class-name="table-header" header-cell-class-name="table-header"
@selection-change="handleSelectionChange" @selection-change="handleSelectionChange">
> <el-table-column type="selection"
<el-table-column type="selection" width="55" align="center"></el-table-column> width="55"
<el-table-column prop="id" label="ID" width="55" align="center"></el-table-column> align="center"></el-table-column>
<el-table-column prop="name" label="用户名"></el-table-column> <el-table-column prop="id"
label="ID"
width="55"
align="center"></el-table-column>
<el-table-column prop="name"
label="用户名"></el-table-column>
<el-table-column label="账户余额"> <el-table-column label="账户余额">
<template slot-scope="scope">￥{{scope.row.money}}</template> <template slot-scope="scope">￥{{scope.row.money}}</template>
</el-table-column> </el-table-column>
<el-table-column label="头像(查看大图)" align="center"> <el-table-column label="头像(查看大图)"
align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<el-image <el-image class="table-td-thumb"
class="table-td-thumb"
:src="scope.row.thumb" :src="scope.row.thumb"
:preview-src-list="[scope.row.thumb]" :preview-src-list="[scope.row.thumb]"></el-image>
></el-image>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="address" label="地址"></el-table-column> <el-table-column prop="address"
<el-table-column label="状态" align="center"> label="地址"></el-table-column>
<el-table-column label="状态"
align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<el-tag <el-tag :type="scope.row.state==='成功'?'success':(scope.row.state==='失败'?'danger':'')">{{scope.row.state}}</el-tag>
:type="scope.row.state==='成功'?'success':(scope.row.state==='失败'?'danger':'')"
>{{scope.row.state}}</el-tag>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="date" label="注册时间"></el-table-column> <el-table-column prop="date"
<el-table-column label="操作" width="180" align="center"> label="注册时间"></el-table-column>
<el-table-column label="操作"
width="180"
align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button <el-button type="text"
type="text"
icon="el-icon-edit" icon="el-icon-edit"
@click="handleEdit(scope.$index, scope.row)" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
>编辑</el-button> <el-button type="text"
<el-button
type="text"
icon="el-icon-delete" icon="el-icon-delete"
class="red" class="red"
@click="handleDelete(scope.$index, scope.row)" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
>删除</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<div class="pagination"> <div class="pagination">
<el-pagination <el-pagination background
background
layout="total, prev, pager, next" layout="total, prev, pager, next"
:current-page="query.pageIndex" :current-page="query.pageIndex"
:page-size="query.pageSize" :page-size="query.pageSize"
:total="pageTotal" :total="pageTotal"
@current-change="handlePageChange" @current-change="handlePageChange"></el-pagination>
></el-pagination>
</div> </div>
</div> </div>
<!-- 编辑弹出框 --> <!-- 编辑弹出框 -->
<el-dialog title="编辑" :visible.sync="editVisible" width="30%"> <el-dialog title="编辑"
<el-form ref="form" :model="form" label-width="70px"> :visible.sync="editVisible"
width="30%">
<el-form ref="form"
:model="form"
label-width="70px">
<el-form-item label="用户名"> <el-form-item label="用户名">
<el-input v-model="form.name"></el-input> <el-input v-model="form.name"></el-input>
</el-form-item> </el-form-item>
@ -93,9 +105,11 @@
<el-input v-model="form.address"></el-input> <el-input v-model="form.address"></el-input>
</el-form-item> </el-form-item>
</el-form> </el-form>
<span slot="footer" class="dialog-footer"> <span slot="footer"
class="dialog-footer">
<el-button @click="editVisible = false">取 消</el-button> <el-button @click="editVisible = false">取 消</el-button>
<el-button type="primary" @click="saveEdit">确 定</el-button> <el-button type="primary"
@click="saveEdit">确 定</el-button>
</span> </span>
</el-dialog> </el-dialog>
</div> </div>
@ -105,7 +119,7 @@
import { fetchData } from '../../api/index'; import { fetchData } from '../../api/index';
export default { export default {
name: 'basetable', name: 'basetable',
data() { data () {
return { return {
query: { query: {
address: '', address: '',
@ -123,12 +137,12 @@ export default {
id: -1 id: -1
}; };
}, },
created() { created () {
this.getData(); this.getData();
}, },
methods: { methods: {
// 获取 easy-mock 的模拟数据 // 获取 easy-mock 的模拟数据
getData() { getData () {
fetchData(this.query).then(res => { fetchData(this.query).then(res => {
console.log(res); console.log(res);
this.tableData = res.list; this.tableData = res.list;
@ -136,12 +150,12 @@ export default {
}); });
}, },
// 触发搜索按钮 // 触发搜索按钮
handleSearch() { handleSearch () {
this.$set(this.query, 'pageIndex', 1); this.$set(this.query, 'pageIndex', 1);
this.getData(); this.getData();
}, },
// 删除操作 // 删除操作
handleDelete(index, row) { handleDelete (index, row) {
// 二次确认删除 // 二次确认删除
this.$confirm('确定要删除吗？', '提示', { this.$confirm('确定要删除吗？', '提示', {
type: 'warning' type: 'warning'
@ -150,36 +164,43 @@ export default {
this.$message.success('删除成功'); this.$message.success('删除成功');
this.tableData.splice(index, 1); this.tableData.splice(index, 1);
}) })
.catch(() => {}); .catch(() => { });
}, },
// 多选操作 // 多选操作
handleSelectionChange(val) { handleSelectionChange (val) {
this.multipleSelection = val; this.multipleSelection = val;
}, },
delAllSelection() { delAllSelection () {
const length = this.multipleSelection.length; const length = this.multipleSelection.length;
let str = ''; let str = '';
this.delList = this.delList.concat(this.multipleSelection); this.delList = this.delList.concat(this.multipleSelection);
for (let i = 0; i < length; i++) { //批量删除tableData
str += this.multipleSelection[i].name + ' '; for (let i = 0; i < this.tableData.length; i++) {
for (let j = 0; j < length; j++) {
if (this.tableData[i] == this.multipleSelection[j]) {
this.tableData.splice(i, 1);
str += this.multipleSelection[j].name + ' ';
} }
this.$message.error(`删除了${str}`); }
}
let errMessage = str.length == 0 ? '请勾选删除ID' : `删除了${str}`
this.$message.success(errMessage)
this.multipleSelection = []; this.multipleSelection = [];
}, },
// 编辑操作 // 编辑操作
handleEdit(index, row) { handleEdit (index, row) {
this.idx = index; this.idx = index;
this.form = row; this.form = row;
this.editVisible = true; this.editVisible = true;
}, },
// 保存编辑 // 保存编辑
saveEdit() { saveEdit () {
this.editVisible = false; this.editVisible = false;
this.$message.success(`修改第 ${this.idx + 1} 行成功`); this.$message.success(`修改第 ${this.idx + 1} 行成功`);
this.$set(this.tableData, this.idx, this.form); this.$set(this.tableData, this.idx, this.form);
}, },
// 分页导航 // 分页导航
handlePageChange(val) { handlePageChange (val) {
this.$set(this.query, 'pageIndex', val); this.$set(this.query, 'pageIndex', val);
this.getData(); this.getData();
} }