|
|
|
|
<script>
|
|
|
|
|
export default {
|
|
|
|
|
props:{
|
|
|
|
|
height:{
|
|
|
|
|
type:Number
|
|
|
|
|
},
|
|
|
|
|
list:{
|
|
|
|
|
type:Array,
|
|
|
|
|
default:()=> []
|
|
|
|
|
},
|
|
|
|
|
tableItem:{
|
|
|
|
|
type:Array,
|
|
|
|
|
default:()=> []
|
|
|
|
|
},
|
|
|
|
|
indent:{
|
|
|
|
|
type:Number,
|
|
|
|
|
default:18
|
|
|
|
|
},
|
|
|
|
|
cellStyle:{
|
|
|
|
|
type:Function,
|
|
|
|
|
default:()=>{}
|
|
|
|
|
},
|
|
|
|
|
rowStyle:{
|
|
|
|
|
type:Function,
|
|
|
|
|
default:()=>{}
|
|
|
|
|
},
|
|
|
|
|
headerRowStyle:{
|
|
|
|
|
type:Function,
|
|
|
|
|
default:()=>{}
|
|
|
|
|
},
|
|
|
|
|
headerCellStyle:{
|
|
|
|
|
type:Function,
|
|
|
|
|
default:()=>{}
|
|
|
|
|
},
|
|
|
|
|
defaultExpandAll:{
|
|
|
|
|
type:Boolean,
|
|
|
|
|
default:true
|
|
|
|
|
},
|
|
|
|
|
showIndex:{
|
|
|
|
|
type:Boolean,
|
|
|
|
|
default:true
|
|
|
|
|
},
|
|
|
|
|
showHeader:{
|
|
|
|
|
type:Boolean,
|
|
|
|
|
default:true
|
|
|
|
|
},
|
|
|
|
|
showSummary:{
|
|
|
|
|
type:Boolean,
|
|
|
|
|
default:false
|
|
|
|
|
},
|
|
|
|
|
summaryMethod:{
|
|
|
|
|
type:Function
|
|
|
|
|
},
|
|
|
|
|
treeProps:{
|
|
|
|
|
type:Object,
|
|
|
|
|
default:()=> {
|
|
|
|
|
return { children: 'children', hasChildren: 'hasChildren' }
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
tableStyle:{
|
|
|
|
|
type:Object,
|
|
|
|
|
default:()=>{
|
|
|
|
|
return { width: '100%', marginBottom: "20px"}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
btnWidth:{
|
|
|
|
|
type:Number,
|
|
|
|
|
default:190
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 分页相关
|
|
|
|
|
isPage:{
|
|
|
|
|
type:Boolean,
|
|
|
|
|
default:true
|
|
|
|
|
},
|
|
|
|
|
total:{
|
|
|
|
|
type:Number,
|
|
|
|
|
default:0
|
|
|
|
|
},
|
|
|
|
|
pageSize:{
|
|
|
|
|
type:Number
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
tableHeight: 0,
|
|
|
|
|
isShowPage:true
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
initLoad() {
|
|
|
|
|
var that = this;
|
|
|
|
|
var clientHeight = document.documentElement.clientHeight
|
|
|
|
|
var lxHeader_height = 96.5; //查询 头部
|
|
|
|
|
var paginationHeight = 37; //分页的高度
|
|
|
|
|
var topHeight = 50; //页面 头部
|
|
|
|
|
let tableHeight = clientHeight - lxHeader_height - topHeight - paginationHeight - 20;
|
|
|
|
|
that.tableHeight = tableHeight;
|
|
|
|
|
},
|
|
|
|
|
deleteClick(row){
|
|
|
|
|
this.$emit('delete',row)
|
|
|
|
|
},
|
|
|
|
|
editorClick(row){
|
|
|
|
|
this.$emit('editor',row)
|
|
|
|
|
},
|
|
|
|
|
selectClick(selection, row){
|
|
|
|
|
this.$emit('select',selection, row)
|
|
|
|
|
},
|
|
|
|
|
cellClick(row, column, cell){
|
|
|
|
|
this.$emit('cellClick',row, column, cell)
|
|
|
|
|
},
|
|
|
|
|
createIndexRow(){
|
|
|
|
|
return <el-table-column type="index" align="center" fixed="left"></el-table-column>
|
|
|
|
|
},
|
|
|
|
|
createPage(){
|
|
|
|
|
if(this.isPage)
|
|
|
|
|
return(
|
|
|
|
|
<div>
|
|
|
|
|
<Icon
|
|
|
|
|
color='#fff'
|
|
|
|
|
class={this.isShowPage ? 'xy-table-page__close icon-recover' : 'xy-table-page__close icon-scale-left'}
|
|
|
|
|
type='ios-arrow-down'
|
|
|
|
|
size={22}
|
|
|
|
|
on={{['click']:()=>this.isShowPage=!this.isShowPage}}></Icon>
|
|
|
|
|
<transition
|
|
|
|
|
enter-active-class="slide-in-bottom"
|
|
|
|
|
leave-to-class="slide-out-down">
|
|
|
|
|
<Page
|
|
|
|
|
show-total={true}
|
|
|
|
|
page-size={this.pageSize}
|
|
|
|
|
v-show={this.isShowPage}
|
|
|
|
|
total={this.total}
|
|
|
|
|
size="small"
|
|
|
|
|
show-elevator={true}
|
|
|
|
|
show-sizer={true}
|
|
|
|
|
class="xy-table-page"
|
|
|
|
|
on={{
|
|
|
|
|
['on-page-size-change']:(e)=>this.$emit('pageSizeChange',e),
|
|
|
|
|
['on-change']:(e)=>this.$emit('pageIndexChange',e)
|
|
|
|
|
}}></Page>
|
|
|
|
|
</transition>
|
|
|
|
|
</div>
|
|
|
|
|
)
|
|
|
|
|
},
|
|
|
|
|
toggleRowSelection(row){
|
|
|
|
|
this.$nextTick(()=>{
|
|
|
|
|
this.$refs.table.toggleRowSelection(row);
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
clearSelection(){
|
|
|
|
|
this.$refs.table.clearSelection();
|
|
|
|
|
},
|
|
|
|
|
toggleAllSelection(){
|
|
|
|
|
this.$refs.table.toggleAllSelection()
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
created() {
|
|
|
|
|
this.initLoad()
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
},
|
|
|
|
|
render(h) {
|
|
|
|
|
let {createPage,summaryMethod,cellClick,btnWidth,selectClick,height,createIndexRow,tableStyle,treeProps,showSummary,showHeader,$scopedSlots,showIndex,defaultExpandAll,headerCellStyle,headerRowStyle,rowStyle,cellStyle,indent,tableHeight,tableItem,list,deleteClick,editorClick} = this
|
|
|
|
|
return (
|
|
|
|
|
<div class="table-tree" style={{ 'position': 'relative' }}>
|
|
|
|
|
{ tableItem && tableItem.length>0 ?
|
|
|
|
|
(<el-table
|
|
|
|
|
ref="table"
|
|
|
|
|
show-summary={showSummary}
|
|
|
|
|
show-header={showHeader}
|
|
|
|
|
summary-method={summaryMethod}
|
|
|
|
|
header-row-style={headerRowStyle}
|
|
|
|
|
header-cell-style={headerCellStyle}
|
|
|
|
|
row-style={rowStyle}
|
|
|
|
|
cell-style={cellStyle}
|
|
|
|
|
indent={indent}
|
|
|
|
|
data={list}
|
|
|
|
|
height={height ?? tableHeight}
|
|
|
|
|
class="v-table"
|
|
|
|
|
style={tableStyle}
|
|
|
|
|
row-key="id"
|
|
|
|
|
border
|
|
|
|
|
default-expand-all={defaultExpandAll}
|
|
|
|
|
tree-props={treeProps}
|
|
|
|
|
fit={true}
|
|
|
|
|
on={{['select']:selectClick,['cell-click']:cellClick}}>
|
|
|
|
|
{
|
|
|
|
|
//序号
|
|
|
|
|
showIndex ? createIndexRow() : ''
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
{
|
|
|
|
|
tableItem.map((item,index)=>{
|
|
|
|
|
//自定义表格内容
|
|
|
|
|
if(item.customFn){
|
|
|
|
|
return (
|
|
|
|
|
<el-table-column
|
|
|
|
|
align={item.align ?? 'center'}
|
|
|
|
|
sortable={item.sortable ?? true}
|
|
|
|
|
width={item.width ?? 'auto'}
|
|
|
|
|
min-width={item.minWidth ?? item.width}
|
|
|
|
|
header-align={item.headerAlign ?? 'center'}
|
|
|
|
|
label={item.label}
|
|
|
|
|
prop={item.prop}
|
|
|
|
|
scopedSlots={{
|
|
|
|
|
default( scope ){
|
|
|
|
|
return item.customFn(scope.row)
|
|
|
|
|
}
|
|
|
|
|
}}>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
else if(item.multiHd){
|
|
|
|
|
//二级表头结构表格内容
|
|
|
|
|
return (
|
|
|
|
|
<el-table-column
|
|
|
|
|
header-align={item.headerAlign ?? 'center'}
|
|
|
|
|
label={item.label}>
|
|
|
|
|
{item.multiHd.map((item1,index1)=>{
|
|
|
|
|
if(item1.customFn){
|
|
|
|
|
return (
|
|
|
|
|
<el-table-column
|
|
|
|
|
align={item1.align ?? 'center'}
|
|
|
|
|
header-align={item1.headerAlign ?? 'center'}
|
|
|
|
|
label={item1.label}
|
|
|
|
|
width={item1.width ?? 'auto'}
|
|
|
|
|
min-width={item1.minWidth ?? item1.width}
|
|
|
|
|
sortable={item1.sortable ?? true}
|
|
|
|
|
scopedSlots={{
|
|
|
|
|
default( scope ){
|
|
|
|
|
return item1.customFn(scope.row)
|
|
|
|
|
}
|
|
|
|
|
}}>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
)
|
|
|
|
|
}else{
|
|
|
|
|
return (
|
|
|
|
|
<el-table-column
|
|
|
|
|
fixed={item1.fixed ?? false}
|
|
|
|
|
align={item1.align ?? 'center'}
|
|
|
|
|
header-align={item1.headerAlign ?? 'center'}
|
|
|
|
|
prop={`${item.Fprop?item.Fprop+'.' : ''}${item1.prop}`}
|
|
|
|
|
label={item1.label}
|
|
|
|
|
width={item1.width ?? 'auto'}
|
|
|
|
|
min-width={item1.minWidth ?? item1.width}
|
|
|
|
|
sortable={item1.sortable ?? true}
|
|
|
|
|
type={item1.type ?? ''}
|
|
|
|
|
formatter={item1.formatter}>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
})}
|
|
|
|
|
</el-table-column>
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
else{
|
|
|
|
|
//默认内容
|
|
|
|
|
return (
|
|
|
|
|
<el-table-column
|
|
|
|
|
fixed={item.fixed ?? false}
|
|
|
|
|
formatter={item.formatter}
|
|
|
|
|
width={item.width ?? 'auto'}
|
|
|
|
|
min-width={item.minWidth ?? item.width}
|
|
|
|
|
header-align={item.headerAlign ?? 'center'}
|
|
|
|
|
align={item.align ?? 'center'}
|
|
|
|
|
label={item.label}
|
|
|
|
|
prop={item.prop}
|
|
|
|
|
sortable={item.sortable ?? true}
|
|
|
|
|
type={item.type}
|
|
|
|
|
selectable={item.selectable}>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
})}
|
|
|
|
|
|
|
|
|
|
{
|
|
|
|
|
$scopedSlots.btns ? $scopedSlots.btns() :
|
|
|
|
|
(<el-table-column
|
|
|
|
|
fixed="right"
|
|
|
|
|
label="操作"
|
|
|
|
|
width={btnWidth}
|
|
|
|
|
header-align="center"
|
|
|
|
|
scopedSlots={{
|
|
|
|
|
default( scope ){
|
|
|
|
|
return (
|
|
|
|
|
<div>
|
|
|
|
|
<Poptip
|
|
|
|
|
transfer={true}
|
|
|
|
|
confirm
|
|
|
|
|
title="确认要删除吗"
|
|
|
|
|
on={{['on-ok']:()=>deleteClick(scope.row)}}>
|
|
|
|
|
<i-button
|
|
|
|
|
type="error"
|
|
|
|
|
size="small"
|
|
|
|
|
style="margin-left: 10px;"
|
|
|
|
|
ghost>删除</i-button>
|
|
|
|
|
</Poptip>
|
|
|
|
|
|
|
|
|
|
<i-button
|
|
|
|
|
type="primary"
|
|
|
|
|
size="small"
|
|
|
|
|
style="margin-left: 10px;"
|
|
|
|
|
ghost
|
|
|
|
|
onClick={()=>editorClick(scope.row)}>编辑</i-button>
|
|
|
|
|
</div>
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
}}>
|
|
|
|
|
</el-table-column>)
|
|
|
|
|
}
|
|
|
|
|
</el-table>)
|
|
|
|
|
:
|
|
|
|
|
<el-table height={height ?? tableHeight}/> }
|
|
|
|
|
|
|
|
|
|
<el-backtop
|
|
|
|
|
target=".el-table__body-wrapper"
|
|
|
|
|
visibility-height={120}
|
|
|
|
|
bottom={68}
|
|
|
|
|
right={48}>
|
|
|
|
|
</el-backtop>
|
|
|
|
|
{ createPage() }
|
|
|
|
|
</div>
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
|
@import "../../styles/variables.scss";
|
|
|
|
|
.xy-table-page{
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: right;
|
|
|
|
|
border-bottom-right-radius: 4px;
|
|
|
|
|
border-bottom-left-radius: 4px;
|
|
|
|
|
background: rgba(140,140,140,0.6);
|
|
|
|
|
|
|
|
|
|
z-index: 10;
|
|
|
|
|
padding: 6px 10px !important;
|
|
|
|
|
position: absolute;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
|
|
|
|
|
&__close{
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
border-radius: 100%;
|
|
|
|
|
|
|
|
|
|
padding: 4px;
|
|
|
|
|
z-index: 11;
|
|
|
|
|
position: absolute;
|
|
|
|
|
bottom: 2px;
|
|
|
|
|
left: 8px;
|
|
|
|
|
|
|
|
|
|
&:hover{
|
|
|
|
|
transform: scale(1.1,1.1);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
::v-deep .ivu-page-item,.ivu-page-options{
|
|
|
|
|
background: transparent !important;
|
|
|
|
|
}
|
|
|
|
|
::v-deep .ivu-page-item a{
|
|
|
|
|
color: #fff;
|
|
|
|
|
}
|
|
|
|
|
::v-deep .ivu-page-item-active a{
|
|
|
|
|
color: $primaryColor;
|
|
|
|
|
}
|
|
|
|
|
::v-deep .ivu-page-total{
|
|
|
|
|
color: #fff !important;
|
|
|
|
|
}
|
|
|
|
|
::v-deep .ivu-page-options-elevator{
|
|
|
|
|
color: #fff !important;
|
|
|
|
|
}
|
|
|
|
|
@media (max-width: 430px) {
|
|
|
|
|
::v-deep .ivu-page-options{
|
|
|
|
|
display: none !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.slide-in-bottom {
|
|
|
|
|
transform-origin: 0 100%;
|
|
|
|
|
animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
|
|
|
|
|
}
|
|
|
|
|
@keyframes slide-in-bottom {
|
|
|
|
|
0% {
|
|
|
|
|
transform: scaleY(0);
|
|
|
|
|
opacity: 0;
|
|
|
|
|
}
|
|
|
|
|
100% {
|
|
|
|
|
transform: scaleY(1);
|
|
|
|
|
opacity: 1;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.slide-out-down {
|
|
|
|
|
transform-origin: 0 100%;
|
|
|
|
|
animation: slide-out-down 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
|
|
|
|
|
}
|
|
|
|
|
@keyframes slide-out-down {
|
|
|
|
|
0% {
|
|
|
|
|
transform: scaleY(1);
|
|
|
|
|
opacity: 1;
|
|
|
|
|
}
|
|
|
|
|
100% {
|
|
|
|
|
transform: scaleY(0);
|
|
|
|
|
opacity: 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.icon-scale-left{
|
|
|
|
|
animation: icon-scale-left 0.5s forwards;
|
|
|
|
|
@keyframes icon-scale-left {
|
|
|
|
|
from{
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
to{
|
|
|
|
|
clip-path: polygon(0 30%,100% 30%,100% 100%,0 100%);
|
|
|
|
|
background: rgba(140,140,140,0.7);
|
|
|
|
|
transform: scale(0.8,0.8) translateX(-22px) translateY(-10px) rotate(-90deg);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.icon-recover{
|
|
|
|
|
animation: icon-recover 0.5s forwards;
|
|
|
|
|
@keyframes icon-recover {
|
|
|
|
|
from{
|
|
|
|
|
background: rgba(120,120,120,0.8);
|
|
|
|
|
transform: scale(0.8,0.8) translateX(-30px) rotate(-90deg);
|
|
|
|
|
}
|
|
|
|
|
to{
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
