table.js 修改
This commit is contained in:
曹前明
parent
f8dee855bd
commit
c034317790
|
|
@ -6,8 +6,8 @@ export default {
|
||||||
list: {
|
list: {
|
||||||
url: `${config.API_URL}/hrm/employee/`,
|
url: `${config.API_URL}/hrm/employee/`,
|
||||||
name: "获取企业员工",
|
name: "获取企业员工",
|
||||||
get: async function(){
|
get: async function(data){
|
||||||
return await http.get(this.url);
|
return await http.get(this.url, data);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -8,393 +8,536 @@
|
||||||
-->
|
-->
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="scTable" :style="{'height':_height}" ref="scTableMain" v-loading="loading">
|
<div
|
||||||
<div class="scTable-table" :style="{'height':_table_height}">
|
class="scTable"
|
||||||
<el-table v-bind="$attrs" :data="tableData" :row-key="rowKey" :key="toggleIndex" ref="scTable" :height="height=='auto'?null:'100%'" :size="config.size" :border="config.border" :stripe="config.stripe" :summary-method="remoteSummary?remoteSummaryMethod:summaryMethod" @sort-change="sortChange" @filter-change="filterChange">
|
:style="{ height: _height }"
|
||||||
<slot></slot>
|
ref="scTableMain"
|
||||||
<template v-for="(item, index) in userColumn" :key="index">
|
v-loading="loading"
|
||||||
<el-table-column v-if="!item.hide" :column-key="item.prop" :label="item.label" :prop="item.prop" :width="item.width" :sortable="item.sortable" :fixed="item.fixed" :filters="item.filters" :filter-method="remoteFilter||!item.filters?null:filterHandler" :show-overflow-tooltip="item.showOverflowTooltip">
|
>
|
||||||
<template #default="scope">
|
<div class="scTable-table" :style="{ height: _table_height }">
|
||||||
<slot :name="item.prop" v-bind="scope">
|
<el-table
|
||||||
{{scope.row[item.prop]}}
|
v-bind="$attrs"
|
||||||
</slot>
|
:data="tableData"
|
||||||
</template>
|
:row-key="rowKey"
|
||||||
</el-table-column>
|
:key="toggleIndex"
|
||||||
</template>
|
ref="scTable"
|
||||||
<el-table-column min-width="1"></el-table-column>
|
:height="height == 'auto' ? null : '100%'"
|
||||||
<template #empty>
|
:size="config.size"
|
||||||
<el-empty :description="emptyText" :image-size="100"></el-empty>
|
:border="config.border"
|
||||||
</template>
|
:stripe="config.stripe"
|
||||||
</el-table>
|
:summary-method="remoteSummary ? remoteSummaryMethod : summaryMethod"
|
||||||
</div>
|
@sort-change="sortChange"
|
||||||
<div class="scTable-page" v-if="!hidePagination || !hideDo">
|
@filter-change="filterChange"
|
||||||
<div class="scTable-pagination">
|
>
|
||||||
<el-pagination v-if="!hidePagination" background :small="true" :layout="paginationLayout" :total="total" :page-size="scPageSize" :page-sizes="pageSizes" v-model:currentPage="currentPage" @current-change="paginationChange" @update:page-size="pageSizeChange"></el-pagination>
|
<slot></slot>
|
||||||
</div>
|
<template v-for="(item, index) in userColumn" :key="index">
|
||||||
<div class="scTable-do" v-if="!hideDo">
|
<el-table-column
|
||||||
<el-button v-if="!hideRefresh" @click="refresh" icon="el-icon-refresh" circle style="margin-left:15px"></el-button>
|
v-if="!item.hide"
|
||||||
<el-popover v-if="column" placement="top" title="列设置" :width="500" trigger="click" :hide-after="0" @show="customColumnShow=true" @after-leave="customColumnShow=false">
|
:column-key="item.prop"
|
||||||
<template #reference>
|
:label="item.label"
|
||||||
<el-button icon="el-icon-set-up" circle style="margin-left:15px"></el-button>
|
:prop="item.prop"
|
||||||
</template>
|
:width="item.width"
|
||||||
<columnSetting v-if="customColumnShow" ref="columnSetting" @userChange="columnSettingChange" @save="columnSettingSave" @back="columnSettingBack" :column="userColumn"></columnSetting>
|
:sortable="item.sortable"
|
||||||
</el-popover>
|
:fixed="item.fixed"
|
||||||
<el-popover v-if="!hideSetting" placement="top" title="表格设置" :width="400" trigger="click" :hide-after="0">
|
:filters="item.filters"
|
||||||
<template #reference>
|
:filter-method="
|
||||||
<el-button icon="el-icon-setting" circle style="margin-left:15px"></el-button>
|
remoteFilter || !item.filters ? null : filterHandler
|
||||||
</template>
|
"
|
||||||
<el-form label-width="80px" label-position="left">
|
:show-overflow-tooltip="item.showOverflowTooltip"
|
||||||
<el-form-item label="表格尺寸">
|
>
|
||||||
<el-radio-group v-model="config.size" size="small" @change="configSizeChange">
|
<template #default="scope">
|
||||||
<el-radio-button label="large">大</el-radio-button>
|
<slot :name="item.prop" v-bind="scope">
|
||||||
<el-radio-button label="default">正常</el-radio-button>
|
{{ scope.row[item.prop] }}
|
||||||
<el-radio-button label="small">小</el-radio-button>
|
</slot>
|
||||||
</el-radio-group>
|
</template>
|
||||||
</el-form-item>
|
</el-table-column>
|
||||||
<el-form-item label="样式">
|
</template>
|
||||||
<el-checkbox v-model="config.border" label="纵向边框"></el-checkbox>
|
<el-table-column min-width="1"></el-table-column>
|
||||||
<el-checkbox v-model="config.stripe" label="斑马纹"></el-checkbox>
|
<template #empty>
|
||||||
</el-form-item>
|
<el-empty :description="emptyText" :image-size="100"></el-empty>
|
||||||
</el-form>
|
</template>
|
||||||
</el-popover>
|
</el-table>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="scTable-page" v-if="!hidePagination || !hideDo">
|
||||||
</div>
|
<div class="scTable-pagination">
|
||||||
|
<el-pagination
|
||||||
|
v-if="!hidePagination"
|
||||||
|
background
|
||||||
|
:small="true"
|
||||||
|
:layout="paginationLayout"
|
||||||
|
:total="total"
|
||||||
|
:page-size="scPageSize"
|
||||||
|
:page-sizes="pageSizes"
|
||||||
|
v-model:currentPage="currentPage"
|
||||||
|
@current-change="paginationChange"
|
||||||
|
@update:page-size="pageSizeChange"
|
||||||
|
></el-pagination>
|
||||||
|
</div>
|
||||||
|
<div class="scTable-do" v-if="!hideDo">
|
||||||
|
<el-button
|
||||||
|
v-if="!hideRefresh"
|
||||||
|
@click="refresh"
|
||||||
|
icon="el-icon-refresh"
|
||||||
|
circle
|
||||||
|
style="margin-left: 15px"
|
||||||
|
></el-button>
|
||||||
|
<el-button
|
||||||
|
v-if="!hideRefresh"
|
||||||
|
@click="reload"
|
||||||
|
icon="el-icon-refresh-right"
|
||||||
|
circle
|
||||||
|
style="margin-left: 15px"
|
||||||
|
></el-button>
|
||||||
|
<el-popover
|
||||||
|
v-if="column"
|
||||||
|
placement="top"
|
||||||
|
title="列设置"
|
||||||
|
:width="500"
|
||||||
|
trigger="click"
|
||||||
|
:hide-after="0"
|
||||||
|
@show="customColumnShow = true"
|
||||||
|
@after-leave="customColumnShow = false"
|
||||||
|
>
|
||||||
|
<template #reference>
|
||||||
|
<el-button
|
||||||
|
icon="el-icon-set-up"
|
||||||
|
circle
|
||||||
|
style="margin-left: 15px"
|
||||||
|
></el-button>
|
||||||
|
</template>
|
||||||
|
<columnSetting
|
||||||
|
v-if="customColumnShow"
|
||||||
|
ref="columnSetting"
|
||||||
|
@userChange="columnSettingChange"
|
||||||
|
@save="columnSettingSave"
|
||||||
|
@back="columnSettingBack"
|
||||||
|
:column="userColumn"
|
||||||
|
></columnSetting>
|
||||||
|
</el-popover>
|
||||||
|
<el-popover
|
||||||
|
v-if="!hideSetting"
|
||||||
|
placement="top"
|
||||||
|
title="表格设置"
|
||||||
|
:width="400"
|
||||||
|
trigger="click"
|
||||||
|
:hide-after="0"
|
||||||
|
>
|
||||||
|
<template #reference>
|
||||||
|
<el-button
|
||||||
|
icon="el-icon-setting"
|
||||||
|
circle
|
||||||
|
style="margin-left: 15px"
|
||||||
|
></el-button>
|
||||||
|
</template>
|
||||||
|
<el-form label-width="80px" label-position="left">
|
||||||
|
<el-form-item label="表格尺寸">
|
||||||
|
<el-radio-group
|
||||||
|
v-model="config.size"
|
||||||
|
size="small"
|
||||||
|
@change="configSizeChange"
|
||||||
|
>
|
||||||
|
<el-radio-button label="large">大</el-radio-button>
|
||||||
|
<el-radio-button label="default">正常</el-radio-button>
|
||||||
|
<el-radio-button label="small">小</el-radio-button>
|
||||||
|
</el-radio-group>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="样式">
|
||||||
|
<el-checkbox
|
||||||
|
v-model="config.border"
|
||||||
|
label="纵向边框"
|
||||||
|
></el-checkbox>
|
||||||
|
<el-checkbox v-model="config.stripe" label="斑马纹"></el-checkbox>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</el-popover>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import config from "@/config/table";
|
import config from "@/config/table";
|
||||||
import columnSetting from './columnSetting'
|
import columnSetting from "./columnSetting";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'scTable',
|
name: "scTable",
|
||||||
components: {
|
components: {
|
||||||
columnSetting
|
columnSetting,
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
tableName: { type: String, default: "" },
|
tableName: { type: String, default: "" },
|
||||||
apiObj: { type: Object, default: () => {} },
|
apiObj: { type: Object, default: () => {} },
|
||||||
params: { type: Object, default: () => ({}) },
|
params: { type: Object, default: () => ({}) },
|
||||||
data: { type: Object, default: () => {} },
|
data: { type: Object, default: () => {} },
|
||||||
height: { type: [String,Number], default: "100%" },
|
height: { type: [String, Number], default: "100%" },
|
||||||
size: { type: String, default: "default" },
|
size: { type: String, default: "default" },
|
||||||
border: { type: Boolean, default: false },
|
border: { type: Boolean, default: false },
|
||||||
stripe: { type: Boolean, default: false },
|
stripe: { type: Boolean, default: false },
|
||||||
pageSize: { type: Number, default: config.pageSize },
|
pageSize: { type: Number, default: config.pageSize },
|
||||||
pageSizes: { type: Array, default: config.pageSizes },
|
pageSizes: { type: Array, default: config.pageSizes },
|
||||||
rowKey: { type: String, default: "" },
|
rowKey: { type: String, default: "" },
|
||||||
summaryMethod: { type: Function, default: null },
|
summaryMethod: { type: Function, default: null },
|
||||||
column: { type: Object, default: () => {} },
|
column: { type: Object, default: () => {} },
|
||||||
remoteSort: { type: Boolean, default: false },
|
remoteSort: { type: Boolean, default: false },
|
||||||
remoteFilter: { type: Boolean, default: false },
|
remoteFilter: { type: Boolean, default: false },
|
||||||
remoteSummary: { type: Boolean, default: false },
|
remoteSummary: { type: Boolean, default: false },
|
||||||
hidePagination: { type: Boolean, default: false },
|
hidePagination: { type: Boolean, default: false },
|
||||||
hideDo: { type: Boolean, default: false },
|
hideDo: { type: Boolean, default: false },
|
||||||
hideRefresh: { type: Boolean, default: false },
|
hideRefresh: { type: Boolean, default: false },
|
||||||
hideSetting: { type: Boolean, default: false },
|
hideSetting: { type: Boolean, default: false },
|
||||||
paginationLayout: { type: String, default: config.paginationLayout },
|
paginationLayout: { type: String, default: config.paginationLayout },
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
//监听从props里拿到值了
|
//监听从props里拿到值了
|
||||||
data(){
|
data() {
|
||||||
this.tableData = this.data;
|
this.tableData = this.data;
|
||||||
this.total = this.tableData.length;
|
this.total = this.tableData.length;
|
||||||
},
|
},
|
||||||
apiObj(){
|
apiObj() {
|
||||||
this.tableParams = this.params;
|
this.tableParams = this.params;
|
||||||
this.refresh();
|
this.refresh();
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
_height() {
|
_height() {
|
||||||
return Number(this.height)?Number(this.height)+'px':this.height
|
return Number(this.height) ? Number(this.height) + "px" : this.height;
|
||||||
},
|
},
|
||||||
_table_height() {
|
_table_height() {
|
||||||
return this.hidePagination && this.hideDo ? "100%" : "calc(100% - 50px)"
|
return this.hidePagination && this.hideDo ? "100%" : "calc(100% - 50px)";
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
scPageSize: this.pageSize,
|
scPageSize: this.pageSize,
|
||||||
isActivat: true,
|
isActivat: true,
|
||||||
emptyText: "暂无数据",
|
emptyText: "暂无数据",
|
||||||
toggleIndex: 0,
|
toggleIndex: 0,
|
||||||
tableData: [],
|
tableData: [],
|
||||||
total: 0,
|
total: 0,
|
||||||
currentPage: 1,
|
currentPage: 1,
|
||||||
prop: null,
|
prop: null,
|
||||||
order: null,
|
order: null,
|
||||||
loading: false,
|
loading: false,
|
||||||
tableHeight:'100%',
|
tableHeight: "100%",
|
||||||
tableParams: this.params,
|
tableParams: this.params,
|
||||||
userColumn: [],
|
userColumn: [],
|
||||||
customColumnShow: false,
|
customColumnShow: false,
|
||||||
summary: {},
|
summary: {},
|
||||||
config: {
|
config: {
|
||||||
size: this.size,
|
size: this.size,
|
||||||
border: this.border,
|
border: this.border,
|
||||||
stripe: this.stripe
|
stripe: this.stripe,
|
||||||
}
|
},
|
||||||
}
|
};
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
//判断是否开启自定义列
|
//判断是否开启自定义列
|
||||||
if(this.column){
|
if (this.column) {
|
||||||
this.getCustomColumn()
|
this.getCustomColumn();
|
||||||
}else{
|
} else {
|
||||||
this.userColumn = this.column
|
this.userColumn = this.column;
|
||||||
}
|
}
|
||||||
//判断是否静态数据
|
//判断是否静态数据
|
||||||
if(this.apiObj){
|
if (this.apiObj) {
|
||||||
this.getData();
|
this.getData();
|
||||||
}else if(this.data){
|
} else if (this.data) {
|
||||||
this.tableData = this.data;
|
this.tableData = this.data;
|
||||||
this.total = this.tableData.length
|
this.total = this.tableData.length;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
activated(){
|
activated() {
|
||||||
if(!this.isActivat){
|
if (!this.isActivat) {
|
||||||
this.$refs.scTable.doLayout()
|
this.$refs.scTable.doLayout();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
deactivated(){
|
deactivated() {
|
||||||
this.isActivat = false;
|
this.isActivat = false;
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
//获取列
|
//获取列
|
||||||
async getCustomColumn(){
|
async getCustomColumn() {
|
||||||
const userColumn = await config.columnSettingGet(this.tableName, this.column)
|
const userColumn = await config.columnSettingGet(
|
||||||
this.userColumn = userColumn
|
this.tableName,
|
||||||
},
|
this.column
|
||||||
//获取数据
|
);
|
||||||
async getData(){
|
this.userColumn = userColumn;
|
||||||
this.loading = true;
|
},
|
||||||
var reqData = {
|
//获取数据
|
||||||
[config.request.page]: this.currentPage,
|
async getData() {
|
||||||
[config.request.pageSize]: this.scPageSize,
|
this.loading = true;
|
||||||
[config.request.prop]: this.prop,
|
var reqData = {
|
||||||
[config.request.order]: this.order
|
[config.request.page]: this.currentPage,
|
||||||
}
|
[config.request.pageSize]: this.scPageSize,
|
||||||
if(this.hidePagination){
|
// [config.request.prop]: this.prop,
|
||||||
delete reqData[config.request.page]
|
[config.request.order]: this.order,
|
||||||
delete reqData[config.request.pageSize]
|
};
|
||||||
}
|
if (this.hidePagination) {
|
||||||
Object.assign(reqData, this.tableParams)
|
reqData[config.request.page] = 0;
|
||||||
|
// delete reqData[config.request.page]
|
||||||
|
// delete reqData[config.request.pageSize]
|
||||||
|
}
|
||||||
|
Object.assign(reqData, this.tableParams);
|
||||||
|
|
||||||
try {
|
try {
|
||||||
var res = await this.apiObj.get(reqData);
|
var res = await this.apiObj.get(reqData);
|
||||||
}catch(error){
|
if (this.hidePagination) {
|
||||||
this.loading = false;
|
this.tableData = res;
|
||||||
this.emptyText = error.response.data.err_msg || error.statusText;
|
if (res.length == 0) {
|
||||||
return false;
|
this.emptyText = "暂无数据";
|
||||||
}
|
}
|
||||||
try {
|
this.loading = false;
|
||||||
var response = config.parseData(res);
|
this.$refs.scTable.setScrollTop(0);
|
||||||
if (response.total == 0){
|
this.$emit("dataChange", res, this.tableData);
|
||||||
this.emptyText = "暂无数据";
|
}
|
||||||
}
|
} catch (error) {
|
||||||
if(this.hidePagination){
|
this.loading = false;
|
||||||
this.tableData = response.data || [];
|
this.emptyText = error.response.data.err_msg || error.statusText;
|
||||||
}else{
|
return false;
|
||||||
this.tableData = response.rows || [];
|
}
|
||||||
}
|
try {
|
||||||
this.total = response.total || 0;
|
var response = config.parseData(res);
|
||||||
this.summary = response.summary || {};
|
if (response.total == 0) {
|
||||||
this.loading = false;
|
this.emptyText = "暂无数据";
|
||||||
}catch(error){
|
}
|
||||||
this.loading = false;
|
if (this.hidePagination) {
|
||||||
this.emptyText = "数据格式错误";
|
this.tableData = response.data || [];
|
||||||
return false;
|
} else {
|
||||||
}
|
this.tableData = response.rows || [];
|
||||||
this.$refs.scTable.setScrollTop(0)
|
}
|
||||||
this.$emit('dataChange', res, this.tableData)
|
this.total = response.total || 0;
|
||||||
},
|
this.summary = response.summary || {};
|
||||||
//分页点击
|
this.loading = false;
|
||||||
paginationChange(){
|
this.$refs.scTable.setScrollTop(0);
|
||||||
this.getData();
|
this.$emit("dataChange", res, this.tableData);
|
||||||
},
|
} catch (error) {
|
||||||
//条数变化
|
this.loading = false;
|
||||||
pageSizeChange(size){
|
this.emptyText = "数据格式错误";
|
||||||
this.scPageSize = size
|
return false;
|
||||||
this.getData();
|
}
|
||||||
},
|
},
|
||||||
//刷新数据
|
//分页点击
|
||||||
refresh(){
|
paginationChange() {
|
||||||
this.$refs.scTable.clearSelection();
|
this.getData();
|
||||||
this.getData();
|
},
|
||||||
},
|
//条数变化
|
||||||
//更新数据 合并上一次params
|
pageSizeChange(size) {
|
||||||
upData(params, page=1){
|
this.scPageSize = size;
|
||||||
this.currentPage = page;
|
this.getData();
|
||||||
this.$refs.scTable.clearSelection();
|
},
|
||||||
Object.assign(this.tableParams, params || {})
|
//刷新数据
|
||||||
this.getData()
|
refresh() {
|
||||||
},
|
this.$refs.scTable.clearSelection();
|
||||||
//重载数据 替换params
|
this.getData();
|
||||||
reload(params, page=1){
|
},
|
||||||
this.currentPage = page;
|
//更新数据 合并上一次params
|
||||||
this.tableParams = params || {}
|
upData(params, page = 1) {
|
||||||
this.$refs.scTable.clearSelection();
|
this.currentPage = page;
|
||||||
this.$refs.scTable.clearSort()
|
this.$refs.scTable.clearSelection();
|
||||||
this.$refs.scTable.clearFilter()
|
Object.assign(this.tableParams, params || {});
|
||||||
this.getData()
|
this.getData();
|
||||||
},
|
},
|
||||||
//自定义变化事件
|
//重载数据 替换params
|
||||||
columnSettingChange(userColumn){
|
reload(params, page = 1) {
|
||||||
this.userColumn = userColumn;
|
this.currentPage = page;
|
||||||
this.toggleIndex += 1;
|
this.tableParams = params || {};
|
||||||
},
|
this.$refs.scTable.clearSelection();
|
||||||
//自定义列保存
|
this.$refs.scTable.clearSort();
|
||||||
async columnSettingSave(userColumn){
|
this.$refs.scTable.clearFilter();
|
||||||
this.$refs.columnSetting.isSave = true
|
this.getData();
|
||||||
try {
|
},
|
||||||
await config.columnSettingSave(this.tableName, userColumn)
|
//自定义变化事件
|
||||||
}catch(error){
|
columnSettingChange(userColumn) {
|
||||||
this.$message.error('保存失败')
|
this.userColumn = userColumn;
|
||||||
this.$refs.columnSetting.isSave = false
|
this.toggleIndex += 1;
|
||||||
}
|
},
|
||||||
this.$message.success('保存成功')
|
//自定义列保存
|
||||||
this.$refs.columnSetting.isSave = false
|
async columnSettingSave(userColumn) {
|
||||||
},
|
this.$refs.columnSetting.isSave = true;
|
||||||
//自定义列重置
|
try {
|
||||||
async columnSettingBack(){
|
await config.columnSettingSave(this.tableName, userColumn);
|
||||||
this.$refs.columnSetting.isSave = true
|
} catch (error) {
|
||||||
try {
|
this.$message.error("保存失败");
|
||||||
const column = await config.columnSettingReset(this.tableName, this.column)
|
this.$refs.columnSetting.isSave = false;
|
||||||
this.userColumn = column
|
}
|
||||||
this.$refs.columnSetting.usercolumn = JSON.parse(JSON.stringify(this.userColumn||[]))
|
this.$message.success("保存成功");
|
||||||
}catch(error){
|
this.$refs.columnSetting.isSave = false;
|
||||||
this.$message.error('重置失败')
|
},
|
||||||
this.$refs.columnSetting.isSave = false
|
//自定义列重置
|
||||||
}
|
async columnSettingBack() {
|
||||||
this.$refs.columnSetting.isSave = false
|
this.$refs.columnSetting.isSave = true;
|
||||||
},
|
try {
|
||||||
//排序事件
|
const column = await config.columnSettingReset(
|
||||||
sortChange(obj){
|
this.tableName,
|
||||||
if(!this.remoteSort){
|
this.column
|
||||||
return false
|
);
|
||||||
}
|
this.userColumn = column;
|
||||||
if(obj.column && obj.prop){
|
this.$refs.columnSetting.usercolumn = JSON.parse(
|
||||||
this.prop = obj.prop
|
JSON.stringify(this.userColumn || [])
|
||||||
this.order = obj.order
|
);
|
||||||
}else{
|
} catch (error) {
|
||||||
this.prop = null
|
this.$message.error("重置失败");
|
||||||
this.order = null
|
this.$refs.columnSetting.isSave = false;
|
||||||
}
|
}
|
||||||
this.getData()
|
this.$refs.columnSetting.isSave = false;
|
||||||
},
|
},
|
||||||
//本地过滤
|
//排序事件
|
||||||
filterHandler(value, row, column){
|
sortChange(obj) {
|
||||||
const property = column.property;
|
if (!this.remoteSort) {
|
||||||
return row[property] === value;
|
return false;
|
||||||
},
|
}
|
||||||
//过滤事件
|
if (obj.column && obj.prop) {
|
||||||
filterChange(filters){
|
// this.prop = obj.prop
|
||||||
if(!this.remoteFilter){
|
if (obj.order == "descending") {
|
||||||
return false
|
this.order = "-" + obj.prop;
|
||||||
}
|
} else {
|
||||||
Object.keys(filters).forEach(key => {
|
this.order = obj.prop;
|
||||||
filters[key] = filters[key].join(',')
|
}
|
||||||
})
|
// this.order = obj.order
|
||||||
this.upData(filters)
|
} else {
|
||||||
},
|
// this.prop = null
|
||||||
//远程合计行处理
|
this.order = null;
|
||||||
remoteSummaryMethod(param){
|
}
|
||||||
const {columns} = param
|
this.getData();
|
||||||
const sums = []
|
},
|
||||||
columns.forEach((column, index) => {
|
//本地过滤
|
||||||
if(index === 0) {
|
filterHandler(value, row, column) {
|
||||||
sums[index] = '合计'
|
const property = column.property;
|
||||||
return
|
return row[property] === value;
|
||||||
}
|
},
|
||||||
const values = this.summary[column.property]
|
//过滤事件
|
||||||
if(values){
|
filterChange(filters) {
|
||||||
sums[index] = values
|
if (!this.remoteFilter) {
|
||||||
}else{
|
return false;
|
||||||
sums[index] = ''
|
}
|
||||||
}
|
Object.keys(filters).forEach((key) => {
|
||||||
})
|
filters[key] = filters[key].join(",");
|
||||||
return sums
|
});
|
||||||
},
|
this.upData(filters);
|
||||||
configSizeChange(){
|
},
|
||||||
this.$refs.scTable.doLayout()
|
//远程合计行处理
|
||||||
},
|
remoteSummaryMethod(param) {
|
||||||
//插入行 unshiftRow
|
const { columns } = param;
|
||||||
unshiftRow(row){
|
const sums = [];
|
||||||
this.tableData.unshift(row)
|
columns.forEach((column, index) => {
|
||||||
},
|
if (index === 0) {
|
||||||
//插入行 pushRow
|
sums[index] = "合计";
|
||||||
pushRow(row){
|
return;
|
||||||
this.tableData.push(row)
|
}
|
||||||
},
|
const values = this.summary[column.property];
|
||||||
//根据key覆盖数据
|
if (values) {
|
||||||
updateKey(row, rowKey=this.rowKey){
|
sums[index] = values;
|
||||||
this.tableData.filter(item => item[rowKey]===row[rowKey] ).forEach(item => {
|
} else {
|
||||||
Object.assign(item, row)
|
sums[index] = "";
|
||||||
})
|
}
|
||||||
},
|
});
|
||||||
//根据index覆盖数据
|
return sums;
|
||||||
updateIndex(row, index){
|
},
|
||||||
Object.assign(this.tableData[index], row)
|
configSizeChange() {
|
||||||
},
|
this.$refs.scTable.doLayout();
|
||||||
//根据index删除
|
},
|
||||||
removeIndex(index){
|
//插入行 unshiftRow
|
||||||
this.tableData.splice(index, 1)
|
unshiftRow(row) {
|
||||||
},
|
this.tableData.unshift(row);
|
||||||
//根据index批量删除
|
},
|
||||||
removeIndexes(indexes=[]){
|
//插入行 pushRow
|
||||||
indexes.forEach(index => {
|
pushRow(row) {
|
||||||
this.tableData.splice(index, 1)
|
this.tableData.push(row);
|
||||||
})
|
},
|
||||||
},
|
//根据key覆盖数据
|
||||||
//根据key删除
|
updateKey(row, rowKey = this.rowKey) {
|
||||||
removeKey(key, rowKey=this.rowKey){
|
this.tableData
|
||||||
this.tableData.splice(this.tableData.findIndex(item => item[rowKey]===key), 1)
|
.filter((item) => item[rowKey] === row[rowKey])
|
||||||
},
|
.forEach((item) => {
|
||||||
//根据keys批量删除
|
Object.assign(item, row);
|
||||||
removeKeys(keys=[], rowKey=this.rowKey){
|
});
|
||||||
keys.forEach(key => {
|
},
|
||||||
this.tableData.splice(this.tableData.findIndex(item => item[rowKey]===key), 1)
|
//根据index覆盖数据
|
||||||
})
|
updateIndex(row, index) {
|
||||||
},
|
Object.assign(this.tableData[index], row);
|
||||||
//原生方法转发
|
},
|
||||||
clearSelection(){
|
//根据index删除
|
||||||
this.$refs.scTable.clearSelection()
|
removeIndex(index) {
|
||||||
},
|
this.tableData.splice(index, 1);
|
||||||
toggleRowSelection(row, selected){
|
},
|
||||||
this.$refs.scTable.toggleRowSelection(row, selected)
|
//根据index批量删除
|
||||||
},
|
removeIndexes(indexes = []) {
|
||||||
toggleAllSelection(){
|
indexes.forEach((index) => {
|
||||||
this.$refs.scTable.toggleAllSelection()
|
this.tableData.splice(index, 1);
|
||||||
},
|
});
|
||||||
toggleRowExpansion(row, expanded){
|
},
|
||||||
this.$refs.scTable.toggleRowExpansion(row, expanded)
|
//根据key删除
|
||||||
},
|
removeKey(key, rowKey = this.rowKey) {
|
||||||
setCurrentRow(row){
|
this.tableData.splice(
|
||||||
this.$refs.scTable.setCurrentRow(row)
|
this.tableData.findIndex((item) => item[rowKey] === key),
|
||||||
},
|
1
|
||||||
clearSort(){
|
);
|
||||||
this.$refs.scTable.clearSort()
|
},
|
||||||
},
|
//根据keys批量删除
|
||||||
clearFilter(columnKey){
|
removeKeys(keys = [], rowKey = this.rowKey) {
|
||||||
this.$refs.scTable.clearFilter(columnKey)
|
keys.forEach((key) => {
|
||||||
},
|
this.tableData.splice(
|
||||||
doLayout(){
|
this.tableData.findIndex((item) => item[rowKey] === key),
|
||||||
this.$refs.scTable.doLayout()
|
1
|
||||||
},
|
);
|
||||||
sort(prop, order){
|
});
|
||||||
this.$refs.scTable.sort(prop, order)
|
},
|
||||||
}
|
//原生方法转发
|
||||||
}
|
clearSelection() {
|
||||||
}
|
this.$refs.scTable.clearSelection();
|
||||||
|
},
|
||||||
|
toggleRowSelection(row, selected) {
|
||||||
|
this.$refs.scTable.toggleRowSelection(row, selected);
|
||||||
|
},
|
||||||
|
toggleAllSelection() {
|
||||||
|
this.$refs.scTable.toggleAllSelection();
|
||||||
|
},
|
||||||
|
toggleRowExpansion(row, expanded) {
|
||||||
|
this.$refs.scTable.toggleRowExpansion(row, expanded);
|
||||||
|
},
|
||||||
|
setCurrentRow(row) {
|
||||||
|
this.$refs.scTable.setCurrentRow(row);
|
||||||
|
},
|
||||||
|
clearSort() {
|
||||||
|
this.$refs.scTable.clearSort();
|
||||||
|
},
|
||||||
|
clearFilter(columnKey) {
|
||||||
|
this.$refs.scTable.clearFilter(columnKey);
|
||||||
|
},
|
||||||
|
doLayout() {
|
||||||
|
this.$refs.scTable.doLayout();
|
||||||
|
},
|
||||||
|
sort(prop, order) {
|
||||||
|
this.$refs.scTable.sort(prop, order);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.scTable {}
|
.scTable {
|
||||||
.scTable-table {height: calc(100% - 50px);}
|
}
|
||||||
.scTable-page {height:50px;display: flex;align-items: center;justify-content: space-between;padding:0 15px;}
|
.scTable-table {
|
||||||
.scTable-do {white-space: nowrap;}
|
height: calc(100% - 50px);
|
||||||
.scTable:deep(.el-table__footer) .cell {font-weight: bold;}
|
}
|
||||||
.scTable:deep(.el-table__body-wrapper) .el-scrollbar__bar.is-horizontal {height: 12px;border-radius: 12px;}
|
.scTable-page {
|
||||||
.scTable:deep(.el-table__body-wrapper) .el-scrollbar__bar.is-vertical {width: 12px;border-radius: 12px;}
|
height: 50px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0 15px;
|
||||||
|
}
|
||||||
|
.scTable-do {
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.scTable:deep(.el-table__footer) .cell {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.scTable:deep(.el-table__body-wrapper) .el-scrollbar__bar.is-horizontal {
|
||||||
|
height: 12px;
|
||||||
|
border-radius: 12px;
|
||||||
|
}
|
||||||
|
.scTable:deep(.el-table__body-wrapper) .el-scrollbar__bar.is-vertical {
|
||||||
|
width: 12px;
|
||||||
|
border-radius: 12px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -21,7 +21,7 @@ export default {
|
||||||
page: 'page', //规定当前分页字段
|
page: 'page', //规定当前分页字段
|
||||||
pageSize: 'page_size', //规定一页条数字段
|
pageSize: 'page_size', //规定一页条数字段
|
||||||
prop: 'prop', //规定排序字段名字段
|
prop: 'prop', //规定排序字段名字段
|
||||||
order: 'order' //规定排序规格字段
|
order: 'ordering' //规定排序规格字段
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* 自定义列保存处理
|
* 自定义列保存处理
|
||||||
|
|
|
||||||
|
|
@ -14,7 +14,7 @@
|
||||||
</div>
|
</div>
|
||||||
</el-header>
|
</el-header>
|
||||||
<el-main class="nopadding">
|
<el-main class="nopadding">
|
||||||
<scTable ref="table" :apiObj="apiObj" row-key="id" @selection-change="selectionChange" stripe>
|
<scTable ref="table" :apiObj="apiObj" row-key="id" @selection-change="selectionChange" stripe remoteSort remoteFilter>
|
||||||
<el-table-column type="selection" width="50"></el-table-column>
|
<el-table-column type="selection" width="50"></el-table-column>
|
||||||
<el-table-column label="#" type="index" width="50"></el-table-column>
|
<el-table-column label="#" type="index" width="50"></el-table-column>
|
||||||
<el-table-column label="姓名" prop="name" width="150"></el-table-column>
|
<el-table-column label="姓名" prop="name" width="150"></el-table-column>
|
||||||
|
|
@ -25,7 +25,7 @@
|
||||||
<span v-if="scope.row.belong_dept_">{{scope.row.belong_dept_.name}}</span>
|
<span v-if="scope.row.belong_dept_">{{scope.row.belong_dept_.name}}</span>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column label="创建时间" prop="create_time" width="180"></el-table-column>
|
<el-table-column label="创建时间" prop="create_time" width="180" sortable='custom'></el-table-column>
|
||||||
<el-table-column label="操作" fixed="right" align="right" width="170">
|
<el-table-column label="操作" fixed="right" align="right" width="170">
|
||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
<el-button-group>
|
<el-button-group>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue