zcdsj
/
factory_web
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

scTable 增加remoteFilter 远程过滤

This commit is contained in:
sc 2021-07-16 12:50:00 +08:00
parent 50522a41df
commit 9f3f6ff0e5
2 changed files with 17 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/scTable/index.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="scTable" ref="scTableMain" v-loading="loading">
<div class="scTable-table">
<el-table :data="tableData" :row-key="rowKey" :key="toggleIndex" ref="scTable" :height="tableHeight" :stripe="stripe" :highlight-current-row="highlightCurrentRow" @selection-change="selectionChange" @current-change="currentChange" @sort-change="sortChange">
<el-table :data="tableData" :row-key="rowKey" :key="toggleIndex" ref="scTable" :height="tableHeight" :stripe="stripe" :highlight-current-row="highlightCurrentRow" @selection-change="selectionChange" @current-change="currentChange" @sort-change="sortChange" @filter-change="filterChange">
<slot></slot>
<el-table-column v-for="(item, index) in userColumn" :key="index" :label="item.label" :prop="item.prop" :width="item.width">
<template #default="scope">
@ -46,11 +46,12 @@
},
props: {
apiObj: { type: Object, default: () => {} },
params: { type: Object, default: () => {} },
params: { type: Object, default: () => ({}) },
data: { type: Object, default: () => {} },
rowKey: { type: String, default: "" },
column: { type: Object, default: () => {} },
remoteSort: { type: Boolean, default: false },
remoteFilter: { type: Boolean, default: false },
hidePagination: { type: Boolean, default: false },
hideDo: { type: Boolean, default: false },
stripe: { type: Boolean, default: false },
@ -152,7 +153,7 @@
//更新数据
upData(params){
this.currentPage = 1;
this.tableParams = params;
Object.assign(this.tableParams, params || {})
this.getData()
},
//自定义变化事件
@ -178,6 +179,16 @@
}
this.getData()
},
//过滤事件
filterChange(filters){
if(!this.remoteFilter){
return false
}
Object.keys(filters).forEach(key => {
filters[key] = filters[key].join(',')
})
this.upData(filters)
},
//转发原装方法&事件
selectionChange(selection){
this.$emit('selection-change', selection)

6
src/views/setting/user/index.vue
View File

@ -26,15 +26,15 @@
</div>
</el-header>
<el-main class="nopadding">
<scTable ref="table" :apiObj="apiObj" @selection-change="selectionChange" stripe remoteSort>
<scTable ref="table" :apiObj="apiObj" @selection-change="selectionChange" stripe remoteSort remoteFilter>
<el-table-column type="selection" width="50"></el-table-column>
<el-table-column label="ID" prop="id" width="80" sortable='custom'></el-table-column>
<el-table-column label="头像" width="80">
<el-table-column label="头像" width="80" column-key="filterAvatar" :filters="[{text: '已上传', value: '1'}, {text: '未上传', value: '0'}]">
<template #default="scope">
<el-avatar :src="scope.row.avatar" size="small"></el-avatar>
</template>
</el-table-column>
<el-table-column label="登录账号" prop="userName" width="150" sortable='custom'></el-table-column>
<el-table-column label="登录账号" prop="userName" width="150" sortable='custom' column-key="filterUserName" :filters="[{text: '系统账号', value: '1'}, {text: '普通账号', value: '0'}]"></el-table-column>
<el-table-column label="姓名" prop="name" width="150" sortable='custom'></el-table-column>
<el-table-column label="所属角色" prop="groupName" width="200" sortable='custom'></el-table-column>
<el-table-column label="加入时间" prop="date" width="150" sortable='custom'></el-table-column>