element-ui踩坑记录
1
2
3
4
5
6
| <div class="blog-page">
<el-scrollbar class="blog-scrollbar h-full overflow-auto">
<el-backtop target=".blog-page .el-scrollbar__wrap"/>
</el-scrollbar>
</div>
|
el-tree显示不全
1
2
3
4
5
6
7
8
9
10
| <el-tree lazy ref="tree" class="tree" node-key="nid" highlight-current :load="lazyLoadNodeData"
:props="defaultProps" :expand-on-click-node="false" :default-expanded-keys="expandedKeys"
:style="{ maxHeight: maxTreeHeight }" @check="checkHandler" @node-click="nodeClickHandle"
@node-expand="nodeExpandHandler">
<span class="custom-tree-node" slot-scope="{ node, data }">
<span :class="{ 'icon member_icon': accountTypes.includes(data.type) }"></span>
<span :title="node.label">{{ node.label }}</span>
<span class="member-nid" v-if="data.leaf">{{ data.nid }}</span>
</span>
</el-tree>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| .el-tree{
.el-tree-node__content{
display: block!important;
}
.el-tree-node__children{
overflow-x: visible!important;
}
.el-tree-node{
width: fit-content;
min-width: 100%;
}
.custom-tree-node {
display: inline-block;
}
.el-tree-node > .el-tree-node__children {
overflow: visible;
}
|
el-date-picker
1
2
3
| <el-date-picker @change="monthChange" class="date-picker" size="small" v-model="datepicker" type="monthrange" value-format="yyyy-MM-dd HH:mm:ss" :range-separator="$t('homepage.separator')"
:start-placeholder="$t('homepage.startplaceholder')" :end-placeholder="$t('homepage.endplaceholder')">
</el-date-picker>
|
选择起始月月初到终止月月底
1
2
3
4
5
6
7
| monthChange() {
if (!this.datepicker) {
return;
}
let date = moment(this.datepicker[1], 'YYYY-MM-DD HH:mm:ss');
this.datepicker[1] = date.endOf('month').format('YYYY-MM-DD 23:59:59');
}
|
el-tree保留展开状态
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <el-tree
ref="tree"
:data="treeList"
:highlight-current="true"
:default-expanded-keys="defaultExpandIds" //这个属性就是记录展开状态的
:filter-node-method="filterNode"
node-key="id" //这个属性不能漏掉
:indent="30"
:accordion="true"
class="filter-tree"
:props="defaultProps"
@node-click="clickTreeItem"
@node-expand="handleNodeExpand" // 展开节点时触发的函数
@node-collapse="handleNodeCollapse" // 关闭节点时触发的函数
>
</el-tree>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
|
data () {
return {
treeList: [],
defaultExpandIds: []
}
}
handleNodeExpand(data) {
if (node.parent) {
let siblings = node.parent.childNodes;
siblings.forEach(sibling => {
const siblingData = sibling.data;
if (siblingData.id !== data.id) {
this.handleNodeCollapse(siblingData);
}
});
}
let flag = false
this.defaultExpandIds.some(item => {
if (item === data.id) {
flag = true
return true
}
})
if (!flag) {
this.defaultExpandIds.push(data.id)
}
},
handleNodeCollapse(data) {
this.defaultExpandIds.some((item, i) => {
if (item === data.id) {
this.defaultExpandIds.splice(i, 1)
}
})
this.removeChildrenIds(data)
},
removeChildrenIds(data) {
const ts = this
if (data.children) {
data.children.forEach(function(item) {
const index = ts.defaultExpandIds.indexOf(item.id)
if (index > 0) {
ts.defaultExpandIds.splice(index, 1)
}
ts.removeChildrenIds(item)
})
}
},
|
el-tree设置高度
1
2
3
| .el-tree-node__content{
height: 40px;
}
|
el-date-picker设置默认时间
1
2
3
4
5
6
7
8
9
10
| <el-date-picker
v-model="pinTraForm.time"
type="datetimerange"
value-format="yyyy-MM-dd HH:mm:ss"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="['00:00:00', '23:59:59']"
>
</el-date-picker>
|
el-upload动态action
1
2
3
4
5
6
7
8
| beforeUpload(file) {
return new Promise((resolve) => {
this.$nextTick(() => {
this.action = '/api/new/' + path;
resolve();
});
});
},
|
表格中卡顿
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <template>
<el-tooltip v-if="show" v-bind="$attrs">
<slot></slot>
</el-tooltip>
<div @mouseenter="show = true" @mouseleave="show = false" v-else>
<slot></slot>
</div>
</template>
<script>
export default {
data() {
return {
show: false
}
}
}
</script>
|
在表格中置顶和取消置顶 因为tooltip被复用 添加key避免被复用
1
2
3
4
5
6
7
8
9
10
11
|
<template v-if="opArrs.includes('sticktop')">
<MyToolTip :key="`${row.nid}_${row.stickyOnTop}`" class="item" effect="dark" :content="$t(`meetingControl.${row.stickyOnTop ? 'cilckStickyTopOff' : 'cilckStickyTopOn'}`)" placement="top">
<i
:class="['op_icon', 'sticktop', row.stickyOnTop ? 'on' : 'off']"
@click="$listeners.changeSticktop(row)"
>
</i>
</MyToolTip>
</template>
|
el-table外flex自适应失效的问题
问题描述
el-table只能自适应变大，不能自适应变小
问题原因
el-table 组件的宽度是动态计算的，源码中resize事件绑定在 this.$el 上，flex容器下的width:100%会一直向上继承，直到flex容器下第一级子元素，但是当某个子元素的宽度出现固定值并且大于flex伸展的宽度的时候，那么容器就不会收缩，也就触发不了resize事件了。
解决方案一
在右侧区域，即 flex：1；区域 添加 overflow-x：hidden 即可解决。（给表格的父元素加）
解决方法二（有效）
flex属性的容器设置相对定位
el-table外多包裹一层div，包裹的容器设置绝对定位及宽度，继承父级宽度
注意：这样会影响下面的元素
el-tree选中几个后禁用其他的
设置props属性的disabled函数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| computed: {
defaultProps() {
return {
label: 'name',
children: 'children',
isLeaf: 'leaf',
disabled: (row) => {
if (!row.leaf) {
return true;
}
if (this.checkedSelectable(row)) {
return false;
} else {
return true;
}
}
};
},
}
|
el-table选中几个后禁用其他的
1
2
3
4
5
| <el-table-column
type="selection"
width="40"
:selectable="checkedSelectable">
</el-table-column>
|
js方面
1
2
3
4
5
6
7
| checkedSelectable(row) {
if (this.members.length >= p2pMaxNum) {
const memberNids = this.members.map(item => item.nid);
return memberNids.includes(row.nid);
}
return true;
},
|
