使用element-ui中碰到的棘手问题

Posted on | Post modified:
记录下最近一周对前端的麻烦问题记录

使用el-tree来实现动态覆盖掉原生图标

需要直接覆盖掉原生的样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.el-tree .el-tree-node__expand-icon.expanded {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg) !important;
}
.el-tree .el-icon-caret-right:before {
  content: "\e78a";
  font-size: 18px;
  color: #606266;
}
.el-tree .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
  content: "\e784";
  font-size: 18px;
  color: #606266;
}
.el-tree .el-tree-node__expand-icon.is-leaf:before {
  content: "\e785";
  font-size: 18px;
  color: #606266;
}
  • 这里的content可以直接从element-ui的主页面，查看元素，然后查看具体的before字段里的content即是可以直接从css中复用的部分

textarea的一些属性设置

  • 内容不换行，增加横向滚动条 white-space: nowrap
  • 默认的框会检查英语语法，不通过会出现红色的波浪条，这里去除掉 spellcheck="false"
1
2
<textarea v-model="operRecords" spellcheck="false"
          style="height: 550px;width: 100%;background-color: black;color:whitesmoke;white-space: nowrap;"></textarea>

针对el-tree组件懒加载的方式，重置load所有节点

在el-tree组件中定义ref值，然后通过这个值重新生成最初始的nodes值

1
2
3
4
5
6
refresh () {
  this.fileName = ''
  this.fileCreated = ''
  this.operRecords = ''
  this.$refs.fileTree.root.setData([{name: '/web/logs', 'nodeKey': '/web/logs'}])
}