前端的小毛小病小精彩一、点击增加，滚动区域自动滚到底二、el-select在前面添加icon图标三、节点拖拽组件四

一、点击增加，滚动区域自动滚到底

1. 功能描述

在一定区域内，当该区域需要滚动，点击增加按钮，定位到滚动区域的最底，显示增加的那行。

2. 实现

获取元素
点击增加时，设置元素的 scrollTop 为 scrollHeight

const tbody = document.getElementsByTagName('tbody');
tbody.scrollTop = tbody.scrollHeight;

二、el-select在前面添加icon图标

<el-select
    :value="value"
    :placeholder="请选择"
  >
    <template slot="prefix">
        <span>ABC</span>
    </template>
    <el-option
      v-for="item in options"
      :key="item.id"
      :label="item.title"
      :value="item.id"
    >
        <span>
          ABC
        </span>
      <span>{{ item.title }}</span>
    </el-option>
  </el-select>

三、节点拖拽组件

Vue Diagram Editor (vue-diagram-editor.js.org)

源码改吧改吧很好用

四、元素拖拽排序组件

vuedraggable (sortablejs.github.io)

五、SVG 中使用 HTML 元素

用 <foreignObject>

六、element UI 无法选中或选中不显示值的组件的解决办法

1. el-select `@change="$forceUpdate()"`

<el-select
    v-model="value"
    style="width: 100%;"
    @change="$forceUpdate()"
  >
    <el-option
      v-for="option in options"
      :key="option"
      :label="option"
      :value="option"
    />
</el-select>

2. el-date-picker `@input="$forceUpdate()"`

<el-date-picker
    v-model="value"
    type="datetime"
    format="yyyy-MM-dd HH:mm:ss"
    value-format="yyyy-MM-dd HH:mm:ss"
    @input="$forceUpdate()"
/>

3. el-input `@input="$forceUpdate()"`

<el-input
    v-model="value"
    @input="$forceUpdate()"
/>

七、el-form 表单，只有在点击提交的时候校验

在 el-input 标签上增加 :validate-event="false"

<el-input v-model="form.nodeName" show-word-limit :validate-event="false" />

将 rules 的 blur 去掉.

rules: { nodeName: [ { required: true, message: '请输入名称' } ], },

八、H5 的拖拽

手把手带你写 Vue 可视化拖拽页面编辑器 - 掘金 (juejin.cn)

九、Vue EventBus

组件之间使用 EventBus.$on 传值之前需要先 EventBus.$off 注销事件，否则会导致多次监听问题

EventBus.$off('size').$on('size', this.update)

十、`el-input`回车提交

当 el-input 放在 el-form 标签中时

// 阻止表单默认提交事件
<el-form @submit.native.prevent>
    <el-input
        v-model="text"
        @keyup.enter.native="search"
    >
</el-form>

十一、el-tree 阻止点击节点的时候自动展开或者收缩

<el-tree :expand-on-click-node="false" ...>

十二、el-tree 点击行选中复选框，不收缩

点击行不收缩，给el-tree设置:expand-on-click-node="false"
点击行选中复选框，给el-tree设置node-click方法

handleRowClick(data, node) {
    node.checked = !node.checked;
}

可以根据节点的level判断是否选中节点。
可以根据indeterminate判断复选框显示样式

十三、el-table 鼠标 hover 整行，显示 tooltip

在整行的中间的列设置插槽

<el-table
      :data="allDate"
      border
      style="width: 100%"
      :row-class-name="tableRowClassName"
      @cell-mouse-enter="showTooltip"
      @cell-mouse-leave="hideTooltip"
    >
      <el-table-column prop="title" label="标题" :resizable="false"></el-table-column>
      <el-table-column prop="date" label="时间" :resizable="false">
        <template slot-scope="scope">
          <!-- 悬浮提示 -->
          <el-tooltip
            placement="top"
            v-model="scope.row.showTooltip"
            :open-delay="500"
            effect="dark"
            :disabled="!scope.row.showTooltip"
          >
            <!-- 注意 显示单元格浮框时 v-model 和 disabled 属性要一起使用才有效果 -->
            <div slot="content">根据当前设置，此数据需要置灰显示</div>
            <div>{{scope.row.date}}</div>
          </el-tooltip>
        </template>
      </el-table-column>
      ...其他列
</el-table>

methods 中写方法

//进入时显示提示框
showTooltip(row) {
  //需要显示浮框的条件
  if (row.filterFlag) {
    row.showTooltip = true;
  }
},
//退出时隐藏提示框
hideTooltip(row) {
  row.showTooltip = false;
},
tableRowClassName({ row, rowIndex }) {
// 判断使用的 class
  let className = '';
  if (this.disableRow(row)) {
    className += 'disable-row';
  }
  return className;
}

十四、el-table 表头边框

1. boder 的高度可变

利用伪元素，给表头的元素加一个伪元素

/deep/ .el-table__header tr th > .cell {
  position: relative;
}
/deep/ .el-table__header tr th > .cell:after {
  content: '';
  display: block;
  width: 2px;
  height: 20px;
  position: absolute;
  top: 10px;
  right: 0px;
  background: #dcdde0;
}

2. 直接加boder

.el-table__header tr th>.cell { 
    border-right: 1px solid #DCDDE0;
} 
.el-table__header tr th:nth-last-child(2) .cell{
//最后一个标题后没有隔离线
border-right: 0 !important;
}

前端的小毛小病小精彩