🚩 scTable增加动态样式控制块

This commit is contained in:
sakuya 2021-11-30 23:57:08 +08:00 committed by sc
parent 78587bfc2d
commit 29a9afffbf
3 changed files with 51 additions and 9 deletions

View File

@ -1,16 +1,16 @@
<!-- <!--
* @Descripttion: 数据表格组件 * @Descripttion: 数据表格组件
* @version: 1.4 * @version: 1.5
* @Author: sakuya * @Author: sakuya
* @Date: 2021年11月29日21:51:15 * @Date: 2021年11月29日21:51:15
* @LastEditors: * @LastEditors: sakuya
* @LastEditTime: * @LastEditTime: 2021年12月1日11:05:48
--> -->
<template> <template>
<div class="scTable" :style="{'height':_height}" ref="scTableMain" v-loading="loading"> <div class="scTable" :style="{'height':_height}" ref="scTableMain" v-loading="loading">
<div class="scTable-table"> <div class="scTable-table">
<el-table v-bind="$attrs" :data="tableData" :row-key="rowKey" :key="toggleIndex" ref="scTable" height="100%" :summary-method="remoteSummary?remoteSummaryMethod:summaryMethod" @sort-change="sortChange" @filter-change="filterChange"> <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">
<slot></slot> <slot></slot>
<template v-for="(item, index) in userColumn" :key="index"> <template v-for="(item, index) in userColumn" :key="index">
<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"> <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">
@ -32,12 +32,31 @@
<el-pagination v-if="!hidePagination" background :small="true" :layout="paginationLayout" :total="total" :page-size="pageSize" v-model:currentPage="currentPage" @current-change="paginationChange"></el-pagination> <el-pagination v-if="!hidePagination" background :small="true" :layout="paginationLayout" :total="total" :page-size="pageSize" v-model:currentPage="currentPage" @current-change="paginationChange"></el-pagination>
</div> </div>
<div class="scTable-do" v-if="!hideDo"> <div class="scTable-do" v-if="!hideDo">
<el-button @click="refresh" icon="el-icon-refresh" circle style="margin-left:15px"></el-button> <el-button v-if="!hideRefresh" @click="refresh" icon="el-icon-refresh" circle style="margin-left:15px"></el-button>
<el-popover v-if="column" placement="top" title="列设置" :width="500" trigger="click" @show="customColumnShow=true" @after-leave="customColumnShow=false"> <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> <template #reference>
<el-button icon="el-icon-setting" circle style="margin-left:15px"></el-button> <el-button icon="el-icon-setting" circle style="margin-left:15px"></el-button>
</template> </template>
<columnSetting v-if="customColumnShow" ref="columnSetting" @userChange="columnSettingChange" @save="columnSettingSave" @back="columnSettingBack" :column="userColumn"></columnSetting> <el-form label-width="80px" label-position="left">
<el-form-item label="表格尺寸">
<el-radio-group v-model="config.size" size="mini" @change="configSizeChange">
<el-radio-button label="large"></el-radio-button>
<el-radio-button label="medium"></el-radio-button>
<el-radio-button label="small">正常</el-radio-button>
<el-radio-button label="mini"></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> </el-popover>
</div> </div>
</div> </div>
@ -59,6 +78,9 @@
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: "small" },
border: { type: Boolean, default: false },
stripe: { type: Boolean, default: false },
pageSize: { type: Number, default: config.pageSize }, pageSize: { type: Number, default: config.pageSize },
rowKey: { type: String, default: "" }, rowKey: { type: String, default: "" },
summaryMethod: { type: Function, default: null }, summaryMethod: { type: Function, default: null },
@ -68,6 +90,8 @@
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 },
hideSetting: { type: Boolean, default: false },
paginationLayout: { type: String, default: "total, prev, pager, next, jumper" }, paginationLayout: { type: String, default: "total, prev, pager, next, jumper" },
}, },
watch: { watch: {
@ -88,6 +112,7 @@
}, },
data() { data() {
return { return {
isActivat: true,
emptyText: "暂无数据", emptyText: "暂无数据",
toggleIndex: 0, toggleIndex: 0,
tableData: [], tableData: [],
@ -100,7 +125,12 @@
tableParams: this.params, tableParams: this.params,
userColumn: [], userColumn: [],
customColumnShow: false, customColumnShow: false,
summary: {} summary: {},
config: {
size: this.size,
border: this.border,
stripe: this.stripe
}
} }
}, },
mounted() { mounted() {
@ -118,6 +148,14 @@
this.total = this.tableData.length this.total = this.tableData.length
} }
}, },
activated(){
if(!this.isActivat){
this.$refs.scTable.doLayout()
}
},
deactivated(){
this.isActivat = false;
},
methods: { methods: {
// //
async getCustomColumn(){ async getCustomColumn(){
@ -271,6 +309,9 @@
}) })
return sums return sums
}, },
configSizeChange(){
this.$refs.scTable.doLayout()
},
// //
clearSelection(){ clearSelection(){
this.$refs.scTable.clearSelection() this.$refs.scTable.clearSelection()

View File

@ -34,6 +34,7 @@
.el-col .el-card {margin-bottom: 15px;} .el-col .el-card {margin-bottom: 15px;}
.el-icon {font-size: inherit;} .el-icon {font-size: inherit;}
.el-main {flex-basis: 100%;} .el-main {flex-basis: 100%;}
.el-main > .scTable .el-table--border {border: 0;}
/* 动态值 */ /* 动态值 */
.el-button--default:active, .el-button--default.is-plain:active {border-color: var(--el-color-primary-darken-1, #0d84ff);color: var(--el-color-primary-darken-1, #0d84ff);} .el-button--default:active, .el-button--default.is-plain:active {border-color: var(--el-color-primary-darken-1, #0d84ff);color: var(--el-color-primary-darken-1, #0d84ff);}

View File

@ -141,7 +141,7 @@
<el-tab-pane label="报警管理" lazy> <el-tab-pane label="报警管理" lazy>
<el-main> <el-main>
<el-card shadow="never" header="Event"> <el-card shadow="never" header="Event">
<scTable ref="table" :data="event" stripe> <scTable ref="table" :data="event" stripe height="auto">
<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="title" width="150"></el-table-column> <el-table-column label="事件" prop="title" width="150"></el-table-column>
<el-table-column label="等级" prop="type" width="150"></el-table-column> <el-table-column label="等级" prop="type" width="150"></el-table-column>