木偶's Blog

应用场景

用于编写 PC 端的 UI 框架 Element-UI 的 Table 组件有一个属性叫 show-overflow-tooltip 属性，可以实现当单元格的文字太多时，用省略号(ellipsis)展示，鼠标覆上时显示文字全文本的提示框效果。如下：

这阵子在项目碰到一个问题，由于我主要是做后端的，对前端并不是很熟悉，但被迫做了一阵子前端。项目组用的技术栈是 Vue + Vant，移动端的 UI 框架，需要实现一个方框里当文字太多时，用省略号代替超出的文本，当手触碰时，又能够显示所有文本。

找了半天，没发现 Vant 有提供与 ElementUI 类似的，只能自己摸索写了一个

解决方案

1
2
3
4
5
6
7
8
9
10
11

.myClass {
    text-overflow: ellipsis;
    overflow : hidden;
    white-space: nowrap;
}

.myClass:hover {
    text-overflow: clip;
    white-space: normal;
    word-break: break-all;
}

后边发现，Stack Overflow 上有类似的提问，并且有了相关解答，其中一个解决跟我的解决差不多，贴一下地址：https://stackoverflow.com/questions/5474871/html-how-can-i-show-tooltip-only-when-ellipsis-is-activated

问题描述

这两天在实现表单内嵌 el-input 的时候（同：问题：el-table表内行数据发生变化后未能立即重新渲染）遇到一个问题：当输入在 input 中输入数量之后，表单没有反应，不会监听表单数据的变化而重新渲染。

问题分析

本身 el-table 就不支持监听数据列表中某个数据的字段变化而自动再次渲染

解决方案

在 el-table 中添加一个 key，可以设置成 boolean 类型的，表单数据列表中的某个数据字段更新后更新这个 key

1
2
3
4
5

<el-table 
  :data="toApplyGoodsInfoList"
  :key="updateKey">
  ...
 </el-table>

该key 需要在 data 中定义

1
2
3
4
5
6
7

export default {
  data() {
    return {
      updateKey: false  // 辅助变量，值不重要
    }
  }
}

当表单数据发生变化时，更新这个 updateKey

1
2
3
4
5
6
7
8
9

handleInput(val, goodsInfo) {
  goodsInfo.toApplyNum = val
  this.updateKey = !this.updateKey  // 值不重要，有更新就好，直接取反
  // 重新获取 input 的焦点
  this.$nextTick(() => {
    let refName = 'inputRef' + goodsInfo.id
    this.$refs[refName].focus()
  })
}

问题描述

项目中使用到了 dialog 组件去实现业务的新增和编辑操作，这两个操作共用一个表单，因此每次显示 dialog 时，需要调用 $refs.form.resetFields() 方法去重置表单，但发现无法获取到 form 引用，调用会报错。

1
2
3
4
5
6
7

<el-dialog title="新增/编辑" :visible.sync="dialogVisible" width="100%">
  <el-form ref="form">
    ...
  </el-form>
</el-dialog>

this.$refs.form.resetFields()  // => 获取不到 form，为 undefined

问题分析

elementUI 的官方说法 ：Dialog 的内容是懒渲染的，即在第一次被打开之前，传入的默认 slot 不会被渲染到 DOM 上。因此，如果需要执行 DOM 操作，或通过 ref 获取相应组件，请在 open 事件回调中进行。

所以要解决问题，要么就在 dialog 的 open、close、closed 等回调函数中进行操作。要么，就得使用 this.$nextTick(() => {...}) ，等待 DOM 渲染完毕后再去调用。

解决方案

采用this.$nextTick

1
2
3

this.$nextTick(() => { 
  this.$refs.form.resetFields()
})

利用 dialog 的回调函数

1
2
3
4
5
6
7

export default {
    methods: {
        close() {
          this.$refs['form'].resetFields()
        }
    }
}

环境

vue、elementUI、vscode

问题描述

在实现业务编辑时，采用 dialog 内嵌表单，当点击“编辑”按钮，数据传入 dialog 并回显到表单中，其中表单有一个select 下拉框，回显时，输入回显到下拉框中，select 选中的值由'' 变成具体的值，此时我的本意是监听这个变化，尝试调用el-select 的 change 事件，但结果发现，手动赋值并不会触发 el-select 的 change 事件

解决方案

经查阅，尚未发现更好的解决方法，只能在进入的时候，手动触发事件。

问题描述

这两天在开发中碰到需要在 el-table 表单中嵌套 input 组件，可以在表单上直接进行编辑，我使用了 template 的具名插槽进行实现，如下：

1
2
3
4
5

<el-table-column prop="toApplyNum" label="申请数量">
  <template slot-scope="scope">
    <el-input v-model="scope.row.toApplyNum"></el-input>
  </template>
</el-table-column>

但实际运行后，发现 input 控件无法正常输入，每输入一个字符，就会自动失焦，需要再次点击之后才能继续输入。

问题分析

经在网上查阅资料发现

autofocus 是 vue 中 input 的原生属性，element也支持这种方法。但是 element 中的 el-input 组件外面还有其他组件，导致 autofocus 失效

解决方案

知道了原因，尝试采用手动调用 focus 方法来解决问题。

1. 先给 el-input 控件绑定一个 ref，由于要使得每一行均能操作，需要绑定为一个动态 ref

1

<el-input :ref="'inputRef'+ scope.row.id" v-model="scope.row.toApplyNum" />

2. 监听el-input 控件的 input 事件

1
2
3
4

<el-input 
  :ref="'inputRef'+ scope.row.id" 
  v-model="scope.row.toApplyNum"
  @input="handleInput" />

3. 每当输入，就手动会 input 控件获取焦点

1
2
3
4

this.$nextTick((goodsInfo) => {
  let refName = 'inputRef' + goodsInfo.id;
  this.$refs[refName].focus();
})

当在 Linux/Unix 或者 Windows 的命令行执行某个命令时（例如 python），我时常会想这个命令处于什么位置呢？有没有重复的命令被安装在了不同的位置呢？该如何解决这个问题，该文先大概记录一下，后续持续优化

1.1 pm ERR! code EINTEGRITY

1.1.1 问题描述

1

：pm ERR! code EINTEGRITY

1.1.2 问题解决

1. 删除本地的 package-lock.json 文件
2. 【可选】更新自己的 npm 版本 （npm i -g npm）
3. 【可选】清空 npm 缓存 （npm cache clean –force | npm cache verify）
4. 重新安装 （npm install）

1.2 Can’t find Python executable python

1.2.1 问题描述

1

stack Error: Can't find Python executable python

1.2.2 问题解决

因为 node-gyp 的安装需要，它只能支持 python2，官方推荐 python2.7，

1. 下载安装 python 2.7，并设置系统路径

2. 终端中进行设置：npm config set python "C:\Python27\python.exe"

平时我们经常需要各种各样的资源，但不知道如何去找，又或者没有形成系统性的搜索方式，而没有办法找到自己想要的资源，这篇文章就主要记录一下平时个人查找资源的方式。

可以说，掌握了这些技巧，几乎市面上可以看到的任何书籍、任何文档、教程，都能够找到。再也不用买很多书籍，占地方还重，妈妈再也不用担心我的学习了。

跟 Python 不同，Java 中的非 0 不能直接为 true

在 Java 中，HashMap、ArrayList 和 HashSet 等是常用的数据结构，如果我们想在初始化时就直接给它们赋值，该怎么写呢？（而不是创建一个空的集合后，用 put/add 等方法添加进去）