master
e 10 months ago
parent d752393a58
commit 9bddca975b

@ -1,6 +1,20 @@
<template>
<div class="gMainTable">
<el-table ref="gMainTable" size="small" :data="tableData">
<el-table
ref="gMainTable"
size="small"
:data="tableData"
:rowKey="rowKey ? rowKey : ''"
@selection-change="selectionChange"
>
<!-- 多选批量操作 -->
<el-table-column
v-if="pagination"
type="selection"
width="55"
:reserve-selection="rowKey ? true : false"
>
</el-table-column>
<template v-for="(item, index) in columns">
<el-table-column
v-if="item.slot"
@ -50,6 +64,14 @@ export default {
type: Object,
required: false,
},
rowSelection: {
type: Object,
required: false,
},
rowKey: {
type: String,
required: false,
},
},
data() {
return {};
@ -63,6 +85,10 @@ export default {
currentPageChange(item) {
this.$emit("currentPageChange", item);
},
//
selectionChange(item) {
this.$emit("selectionChange", item, this.rowKey);
},
},
};
</script>

@ -72,5 +72,26 @@ export const tableListMixins = {
this.ipagination.currentPage = item;
this.loadData();
},
//表格数据选中
handleSelectionChange(rows, rowKey) {
this.selectedRowKeys = [];
this.selectionRows = rows || [];
for (let i = 0; i < rows.length; i++) {
this.selectedRowKeys.push(rows[i][rowKey]);
}
console.log(this.selectedRowKeys);
},
//清空表格选择
onClearSelected() {
this.selectedRowKeys = [];
this.selectionRows = [];
},
searchQuery() {
this.ipagination.currentPage = 1;
this.loadData();
this.selectedRowKeys = [];
this.selectionRows = [];
},
},
};

@ -4,16 +4,37 @@
<el-button @click="add"></el-button>
<el-button type="danger" v-if="selectedRowKeys.length"></el-button>
<el-button
type="primary"
plain
v-if="selectedRowKeys.length"
@click="onClearSelected"
>
清空选择
</el-button>
<el-button type="primary" @click="searchQuery"></el-button>
<div style="width: 800px">
<gMainTable
ref="gMainTable"
:tableData="dataSource"
:columns="columns"
rowKey="id"
:rowSelection="{
selectedRowKeys: selectedRowKeys,
selectionRows: selectionRows,
}"
@selectionChange="handleSelectionChange"
:pagination="ipagination"
@pageSizeChange="handlePageSizeChange"
@currentPageChange="handleCurrentPageChange"
>
<template v-slot:vaeSlot="{ scope }">
<el-button size="small" type="primary">{{ scope.row.name }}</el-button>
<el-button size="small" type="primary">{{
scope.row.name
}}</el-button>
</template>
</gMainTable>
</div>

Loading…
Cancel
Save