🚩 scTable增加动态样式控制块
This commit is contained in:
parent
78587bfc2d
commit
29a9afffbf
|
@ -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()
|
||||||
|
|
|
@ -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);}
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in New Issue