Skip to content

Commit

Permalink
perf: crud-table组件优化
Browse files Browse the repository at this point in the history
  • Loading branch information
@BoBoooooo
BoBoooooo committed Jan 13, 2021
1 parent fe92c6b commit cab469f
Show file tree
Hide file tree
Showing 2 changed files with 89 additions and 63 deletions.
122 changes: 64 additions & 58 deletions src/component/crud-table/src/CrudTable.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,8 @@
@after-save="tableOnSave"/>
</div> -->
<!-- table右上角按钮 -->
<div class="btn-bar" v-if="searchMode === 'popover'">
<div class="btn-bar"
v-if="searchMode === 'popover'">
<slot name="btnBarPrevBtn" />
<!-- 批量删除按钮 -->
<el-button v-if="view.btnDel"
Expand All @@ -50,27 +51,27 @@
:remoteFuncs="remoteFuncs"
:isLoading="loading"
@clear="dataChangeHandler(true)">
<template #seniorSearchForm>
<slot name="seniorSearchForm"></slot>
</template>
<template v-if="searchMode === 'cover'">
<!-- table右上角按钮 -->
<div class="btn-bar">
<slot name="btnBarPrevBtn" />
<!-- 批量删除按钮 -->
<el-button v-if="view.btnDel"
@click="btnDeletesOnClick"
type="primary"
size="mini"
icon="el-icon-delete">删除</el-button>
<!-- 添加按钮 -->
<el-button v-if="view.btnAdd"
type="primary"
icon="el-icon-plus"
size="mini"
@click.stop="btnAdd()">{{text.add}}</el-button>
</div>
</template>
<template #seniorSearchForm>
<slot name="seniorSearchForm"></slot>
</template>
<template v-if="searchMode === 'cover'">
<!-- table右上角按钮 -->
<div class="btn-bar">
<slot name="btnBarPrevBtn" />
<!-- 批量删除按钮 -->
<el-button v-if="view.btnDel"
@click="btnDeletesOnClick"
type="primary"
size="mini"
icon="el-icon-delete">删除</el-button>
<!-- 添加按钮 -->
<el-button v-if="view.btnAdd"
type="primary"
icon="el-icon-plus"
size="mini"
@click.stop="btnAdd()">{{text.add}}</el-button>
</div>
</template>
</SearchForm>
<!-- 表格主体 -->
<el-table v-loading.lock="loading"
Expand All @@ -92,7 +93,7 @@
<template slot='empty'>
<SvgIcon icon-class='table_empty'
class="empty_icon"></SvgIcon>
<span>{{this.emptyText}}</span>
<span>{{this.emptyText}}</span>
</template>
<el-table-column v-if="isMultiple || view.btnDel"
type="selection"
Expand Down Expand Up @@ -221,9 +222,9 @@
:fullscreen="dialogFullscreen"
:width='dialogWidth'
@btnOnClick="formBtnOnClick">
<template #dialogFooter>
<slot name="dialogFooter"></slot>
</template>
<template #dialogFooter>
<slot name="dialogFooter"></slot>
</template>
</GenerateFormDialog>
</div>
</template>
Expand Down Expand Up @@ -505,7 +506,6 @@ export default class CrudTable extends Vue {
})
columns!: any;


// 分页
get pagination() {
return {
Expand All @@ -520,7 +520,6 @@ export default class CrudTable extends Vue {
};
}


// 文本映射
get text() {
return {
Expand Down Expand Up @@ -575,7 +574,6 @@ export default class CrudTable extends Vue {
return viewObj;
}


get tableListeners() {
return {
...this.$listeners,
Expand Down Expand Up @@ -652,9 +650,16 @@ export default class CrudTable extends Vue {
if (this.btnEditOnClick) {
this.btnEditOnClick(row);
} else {
const promise = this.promiseForDetail ? this.promiseForDetail(row.id) : this.$PROCRUD.crud(DML.DETAIL, this.tableName, {}, {
id: row.id,
});
const promise = this.promiseForDetail
? this.promiseForDetail(row.id)
: this.$PROCRUD.crud(
DML.DETAIL,
this.tableName,
{},
{
id: row.id,
},
);
// 请求后台detail接口获取表单数据
promise.then((res) => {
this.$refs.dialog.showDialog({ id: row.id }, STATUS.UPDATE, res.data);
Expand All @@ -668,9 +673,16 @@ export default class CrudTable extends Vue {
if (this.btnDetailOnClick) {
this.btnDetailOnClick(row);
} else {
const promise = this.promiseForDetail ? this.promiseForDetail(row.id) : this.$PROCRUD.crud(DML.DETAIL, this.tableName, {}, {
id: row.id,
});
const promise = this.promiseForDetail
? this.promiseForDetail(row.id)
: this.$PROCRUD.crud(
DML.DETAIL,
this.tableName,
{},
{
id: row.id,
},
);
// 请求后台detail接口获取表单数据
promise.then((res) => {
this.$refs.dialog.showDialog({ id: row.id }, STATUS.DETAIL, res.data);
Expand All @@ -688,11 +700,13 @@ export default class CrudTable extends Vue {
type: 'warning',
})
.then(() => {
const promise = this.promiseForDels ? this.promiseForDels(this.selectedRows.map(item => item.id)) : this.$PROCRUD.crud(
DML.DELETES,
this.tableName,
this.selectedRows.map(item => item.id),
);
const promise = this.promiseForDels
? this.promiseForDels(this.selectedRows.map(item => item.id))
: this.$PROCRUD.crud(
DML.DELETES,
this.tableName,
this.selectedRows.map(item => item.id),
);
promise.then(() => {
this.tableReload();
this.$message.success('批量删除成功');
Expand Down Expand Up @@ -1053,28 +1067,20 @@ export default class CrudTable extends Vue {
background: white;
padding: 10px;
position: relative;
h4 {
margin: 2px 30px 0px 0px;
padding-left: 15px;
font-weight: 500;
font-size: 18px;
}
.table-title {
float: left;
margin-left: 5px;
h4 {
margin: 2px 30px 0px 0px;
padding-left: 15px;
border-left: 7px solid #007bff;
font-weight: 500;
font-size: 18px;
}
}
.table-title-absolute{
.table-title-absolute {
position: absolute;
top: 110px;
left: 10px;
h4 {
margin: 2px 30px 0px 0px;
padding-left: 15px;
border-left: 7px solid #007bff;
font-weight: 500;
font-size: 18px;
}
}
.btn-bar {
float: right;
Expand All @@ -1085,12 +1091,12 @@ export default class CrudTable extends Vue {
float: right;
}
}
.dev-module{
.dev-module {
display: inline-block;
margin-left: 20px;
line-height: 28px;
button{
padding:0;
button {
padding: 0;
}
}
}
Expand Down
30 changes: 25 additions & 5 deletions src/demo/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@
<el-header>CrudTable组件 此处为人员信息管理示例</el-header>
<el-main class="demo-actions">
<el-row :gutter="10">
<el-col :span="3">
<el-col :span="4">
<div>
<h4>表格相关配置</h4>
<el-form :inline="true"
Expand All @@ -78,16 +78,29 @@
inactive-text="边框"></el-switch>
<el-switch v-model="visibleList.stripe"
inactive-text="斑马纹"></el-switch>
<el-switch v-model="showPagination"
inactive-text="分页"></el-switch>
<el-switch v-model="showHeader"
inactive-text="表头"></el-switch>
<el-switch v-model="isMultiple"
inactive-text="多选"></el-switch>
<el-switch v-model="showColumnIndex"
inactive-text="序号列"></el-switch>
<el-switch v-model="visibleList.actionColumn"
inactive-text="操作列"></el-switch>
<el-divider>功能按钮</el-divider>
<el-switch v-model="visibleList.actionColumnBtnEdit"
inactive-text="编辑按钮"></el-switch>
<el-switch v-model="visibleList.actionColumnBtnDel"
inactive-text="删除按钮"></el-switch>
<el-switch v-model="visibleList.actionColumnBtnDetail"
inactive-text="查看按钮"></el-switch>
<el-divider>尺寸</el-divider>
<el-radio-group v-model="size">
<el-radio label="medium">medium</el-radio>
<el-radio label="small">small</el-radio>
<el-radio label="mini">mini</el-radio>
</el-radio-group>
</el-form>
</div>
<el-divider></el-divider>
Expand All @@ -99,6 +112,8 @@
inactive-text="表格标题"></el-switch>
<el-switch v-model="visibleList.btnAdd"
inactive-text="新增按钮"></el-switch>
<el-switch v-model="visibleList.searchForm"
inactive-text="查询区域"></el-switch>
<el-switch v-model="visibleList.seniorSearchBtn"
inactive-text="高级查询按钮"></el-switch>
</el-form>
Expand All @@ -108,22 +123,24 @@
<h4>查询表单</h4>
<el-form :inline="true"
:model="visibleList">
<el-switch v-model="visibleList.searchForm"
inactive-text="查询区域"></el-switch>
<el-switch v-model="searchMode"
inactive-text="平铺高级查询"></el-switch>
</el-form>
</div>

</el-col>
<el-col :span="21">
<el-col :span="20">
<CrudTable :searchMode="searchMode? 'cover':'popover'"
tableTitle="人员管理"
style="border-left:1px solid #eee;height: 100%"
tableName="person"
:size="size"
:readOnly="readOnly"
:show-header="showHeader"
:showPagination="showPagination"
:border="visibleList.border"
:stripe="visibleList.stripe"
:showColumnIndex="showColumnIndex"
:isMultiple="isMultiple"
:visibleList="visibleList">
<template #column_jobno="{row}">
Expand Down Expand Up @@ -221,10 +238,13 @@ export default {
seniorSearchBtn: true,
border: false,
stripe: false,
showHeader: true,
},
showPagination: true,
isMultiple: true,
searchMode: false,
showHeader: true,
showColumnIndex: false,
size: '',
};
},
};
Expand Down

0 comments on commit cab469f

Please sign in to comment.