- it
- vue 自定义组件实例
1、关于element-ui分页
<template
>
<el
-pagination @size
-change
="handleSizeChange" background
@current
-change
="handleCurrentChange" :current
-page
="currentPage"
:page
-sizes
="pageSizes" :page
-size
="pageSize" :total
="total" :layout
="layout">
<slot
>
<ul
class="el-pager">
<li
class="number active">{{currentPage
}}</li
>
<li
class="number" @click
="handlePage(item)" v
-for="item in pager">{{item
}}</li
>
</ul
>
</slot
>
</el
-pagination
>
</template
>
<script
>
export default {
props
: {
currentPage
: {
type
: [String
, Number
],
default: 1
},
total
: {
type
: [String
, Number
],
default: 0
},
pageSizes
: {
type
: Array
,
default:function(){
return [10,20,50,100,200,300,400]
}
},
pageSize
: {
type
: [String
, Number
],
default: 10
},
layout
: {
type
: String
,
default: 'total,prev,slot,next,sizes'
}
},
data() {
return {
}
},
computed
:{
pager
:function(){
let pager
=this.total
/this.pageSize
pager
=Math
.ceil(pager
)
if(pager
<this.currentPage
){
return []
}
let flag
=this.currentPage
+4
if(flag
>pager
){
let arr
=[]
let total
=pager
-this.currentPage
for(let i
=1;i
<=total
;i
++){
arr
.push(this.currentPage
+i
)
}
return arr
}else if(flag
<=pager
){
return [this.currentPage
+1,this.currentPage
+2,this.currentPage
+3,this.currentPage
+4]
}
}
},
methods
: {
handlePage(page
){
this.handleCurrentChange(page
)
},
handleSizeChange(val
) {
this.$emit('size-change', val
)
},
handleCurrentChange(val
) {
this.$emit('current-change', val
)
}
}
}
</script
>
<style lang
="scss" scoped
>
.page
{
text
-align
: center
;
color
: #
409EFF
;
}
</style
>
2、弹框树组件
<template
>
<div v
-if="update">
<el
-popover popper
-class="selectTree" placement
="bottom-start" transition
="fade-in-linear"
v
-model
="visible" min
-width
="200" trigger
="click">
<el
-tree
:data
="data" :props
="defaultProps" empty
-text
="无数据"
:node
-key
="defaultProps.id" :default-expanded
-keys
="defaultExpandedKeys"
:check
-on
-click
-node
="true" ref
="tree1" :expand
-on
-click
-node
="false"
:filter
-node
-method
="filterNode" :highlight
-current
="true" @node
-click
="handleNodeClick">
</el
-tree
>
<el
-input v
-model
="filterText" @clear
="clear" :placeholder
="placeholder"
:disabled
="disabled" slot
="reference" :clearable
="clearable" :suffix
-icon
="icon">
</el
-input
>
</el
-popover
>
</div
>
</template
>
<script
>
import { getDepartment
} from '@/api/systemManager/userMng'
export default {
name
: 'selectTree',
props
: {
value
: String
,
data
: Array
,
placeholder
: {
type
: String
,
default: '请选择'
},
disabled
: {
type
: Boolean
,
default: false,
},
clearable
: {
type
: Boolean
,
default: true,
},
filterable
: {
type
: String
,
default: undefined
,
},
defaultProps
: {
type
: Object
,
default () {
return {
children
: 'children',
label
: 'label',
id
: 'id',
}
}
},
nodeKey
: {
type
: String
,
default: 'id',
}
},
data() {
return {
defaultExpandedKeys
: ['-1'],
filterText
: '',
visible
: false,
icon
: 'el-icon-arrow-down',
update
: true,
}
},
async created() {
if (this.filterable
) {
this.setFilter(this.data
)
}
},
mounted() {
this.setFilterText()
},
watch
: {
value(val
) {
if (!val
) {
this.filterText
= ''
}else {
if (!this.$refs
.tree1
) {
this.$nextTick(() => {
this.$refs
.tree1
.setCurrentKey(val
)
let obj
= this.$refs
.tree1
.getCurrentNode()
if (!obj
) {
return
}
this.filterText
= obj
[this.defaultProps
.label
]
return
})
} else {
this.$refs
.tree1
.setCurrentKey(val
)
let obj
= this.$refs
.tree1
.getCurrentNode()
if (!obj
) {
return
}
this.filterText
= obj
[this.defaultProps
.label
]
}
}
},
visible(val
) {
if (val
=== true) {
this.icon
= "el-icon-arrow-up"
} else {
this.icon
= "el-icon-arrow-down"
}
},
filterable(val
) {
this.update
= false
this.setFilter(this.data
)
this.$nextTick(() => {
this.update
= true
})
}
},
methods
: {
setFilterText() {
if (!this.value
) {
return
} else {
this.$refs
.tree1
.setCurrentKey(this.value
)
let obj
= this.$refs
.tree1
.getCurrentNode()
this.filterText
= obj
[this.defaultProps
.label
]
}
},
setFilter(arr
) {
arr
.map(item
=> {
if (item
.id
=== this.filterable
) {
item
.disabled
= true
if (item
.children
&& item
.children
.length
!= 0) {
this.setDisabled(item
.children
)
}
} else {
item
.disabled
= false
if (item
.children
&& item
.children
.length
!= 0) {
this.setFilter(item
.children
)
}
}
})
},
setDisabled(arr
) {
arr
.map(item
=> {
item
.disabled
= true
if (item
.children
&& item
.children
.length
!= 0) {
this.setDisabled(item
.children
)
}
})
},
filterNode(value
, data
) {
if (!value
) return true;
return data
.label
.indexOf(value
) !== -1;
},
handleNodeClick(obj
, node
) {
if (node
.data
.disabled
=== true || this.disabled
=== true) {
return
}
this.$refs
.tree1
.setCurrentKey(obj
[this.defaultProps
.id
])
this.$emit('input', obj
[this.defaultProps
.id
])
this.filterText
= obj
[this.defaultProps
.label
]
this.visible
= false
},
clear() {
this.$refs
.tree1
.setCurrentKey('')
this.$emit('input', '')
}
},
beforeDestroy() {},
destroyed() {}
}
</script
>
<style lang
="scss">
.selectTree
{
max
-height
: 600px
;
overflow
-y
: auto
;
overflow
-x
: hidden
;
div
[aria
-disabled
="true"] {
.el
-tree
-node__content
{
cursor
: not
-allowed
;
}
}
}
</style
>
