You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
364 lines
11 KiB
364 lines
11 KiB
<script>
|
|
export default {
|
|
props:{
|
|
stripe: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
highlightCurrentRow: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
height:{
|
|
type:Number
|
|
},
|
|
list:{
|
|
type:Array,
|
|
default:()=> []
|
|
},
|
|
tableItem:{
|
|
type:Array,
|
|
default:()=> []
|
|
},
|
|
indent:{
|
|
type:Number,
|
|
default:18
|
|
},
|
|
expandRowKeys:{
|
|
type: Array,
|
|
default: ()=>[]
|
|
},
|
|
rowKey:{
|
|
type:[String,Function],
|
|
default:'id'
|
|
},
|
|
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
|
|
},
|
|
objectSpanMethod:{
|
|
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
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
tableHeight: 0,
|
|
}
|
|
},
|
|
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)
|
|
},
|
|
rowClick(selection, row){
|
|
this.$emit('rowClick',selection, row)
|
|
},
|
|
cellClick(row, column, cell){
|
|
this.$emit('cellClick',row, column, cell)
|
|
},
|
|
selectAllClick(selection){
|
|
this.$emit('select-all',selection)
|
|
},
|
|
selectChange(selection){
|
|
this.$emit('selection-change',selection)
|
|
},
|
|
createIndexRow(){
|
|
return <el-table-column type="index" align="center" fixed="left"></el-table-column>
|
|
},
|
|
toggleRowSelection(row){
|
|
this.$nextTick(()=>{
|
|
this.$refs.table.toggleRowSelection(row);
|
|
})
|
|
},
|
|
clearSelection(){
|
|
this.$refs.table.clearSelection();
|
|
},
|
|
toggleAllSelection(){
|
|
this.$refs.table.toggleAllSelection()
|
|
},
|
|
doLayout() {
|
|
this.$refs['table'].doLayout();
|
|
},
|
|
toggleRowExpansion(row,expanded){
|
|
this.$refs['table'].toggleRowExpansion(row,expanded)
|
|
},
|
|
getSelection(){
|
|
return this.$refs.table?.store?.states?.selection ?? []
|
|
},
|
|
},
|
|
created() {
|
|
this.initLoad()
|
|
},
|
|
mounted() {
|
|
},
|
|
render(h) {
|
|
let {highlightCurrentRow,rowKey,expandRowKeys,selectChange,selectAllClick,summaryMethod,cellClick,btnWidth,selectClick,height,createIndexRow,tableStyle,treeProps,showSummary,showHeader,$scopedSlots,showIndex,defaultExpandAll,headerCellStyle,headerRowStyle,rowStyle,cellStyle,indent,tableHeight,tableItem,list,deleteClick,editorClick,rowClick,objectSpanMethod} = this
|
|
return (
|
|
<div className="table-tree" style={{ 'position': 'relative' }}>
|
|
{tableItem && tableItem.length > 0 ?
|
|
(<el-table
|
|
ref="table"
|
|
size="small"
|
|
span-method={objectSpanMethod}
|
|
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}
|
|
highlight-current-row={highlightCurrentRow}
|
|
expand-row-keys={expandRowKeys}
|
|
height={height ? height : tableHeight}
|
|
className="v-table"
|
|
style={tableStyle}
|
|
row-key={rowKey}
|
|
border={true}
|
|
default-expand-all={defaultExpandAll}
|
|
tree-props={treeProps}
|
|
fit={true}
|
|
stripe={this.stripe}
|
|
on={{
|
|
['row-click']: rowClick,
|
|
['select']: selectClick,
|
|
['cell-click']: cellClick,
|
|
['select-all']: selectAllClick,
|
|
['selection-change']: selectChange,
|
|
['expand-change']: (row, expanded) => this.$emit('expand-change', { row, expanded })
|
|
}}
|
|
>
|
|
<el-table-column
|
|
label=" "
|
|
fixed='left'
|
|
align='center'
|
|
width='60'
|
|
type='index'
|
|
>
|
|
</el-table-column>
|
|
{
|
|
tableItem.filter(i => !i.hidden).map((item, index) => {
|
|
//自定义表格内容
|
|
if (item.customFn) {
|
|
return (
|
|
<el-table-column
|
|
fixed={item.fixed ?? false}
|
|
render-header={item.renderHeader ?? undefined}
|
|
align={item.align ?? 'center'}
|
|
sortable={item.sortable ?? false}
|
|
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, scope)
|
|
}
|
|
}}
|
|
>
|
|
</el-table-column>
|
|
)
|
|
} else if (item.multiHd) {
|
|
//二级表头结构表格内容
|
|
return (
|
|
<el-table-column
|
|
render-header={item.renderHeader ?? undefined}
|
|
header-align={item.headerAlign ?? 'center'}
|
|
label={item.label}
|
|
>
|
|
{item.multiHd.map((item1, index1) => {
|
|
if (item1.customFn) {
|
|
return (
|
|
<el-table-column
|
|
render-header={item1.renderHeader ?? undefined}
|
|
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 ?? false}
|
|
prop={`${item.Fprop ? item.Fprop + '.' : ''}${item1.prop}`}
|
|
scopedSlots={{
|
|
default(scope) {
|
|
return item1.customFn(scope.row)
|
|
}
|
|
}}
|
|
>
|
|
</el-table-column>
|
|
)
|
|
} else {
|
|
return (
|
|
<el-table-column
|
|
render-header={item1.renderHeader ?? undefined}
|
|
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 ?? false}
|
|
type={item1.type ?? ''}
|
|
formatter={item1.formatter}
|
|
>
|
|
</el-table-column>
|
|
)
|
|
}
|
|
})}
|
|
</el-table-column>
|
|
)
|
|
} else {
|
|
//默认内容
|
|
return (
|
|
<el-table-column
|
|
render-header={item.renderHeader ?? undefined}
|
|
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}
|
|
show-overflow-tooltip={item.showOverflowTooltip ?? false}
|
|
prop={item.prop}
|
|
sortable={item.sortable ?? false}
|
|
type={item.type}
|
|
reserve-selection={item.reserveSelection}
|
|
selectable={item.selectable}
|
|
scopedSlots={item.type === 'expand' ? {
|
|
default(props) {
|
|
return item.expandFn(props)
|
|
}
|
|
} : ''}
|
|
>
|
|
</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={100}
|
|
right={36}
|
|
>
|
|
</el-backtop>
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
|
|
</style>
|