木偶's Blog

如果发现能力无法支撑自己的野心，那就静下心来学习吧

发表于 更新于 分类于 ， ，

问题描述

这两天在开发中碰到需要在 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" />
  1. 监听el-input 控件的 input 事件
1
2
3
4
<el-input 
  :ref="'inputRef'+ scope.row.id" 
  v-model="scope.row.toApplyNum"
  @input="handleInput" />
  1. 每当输入，就手动会 input 控件获取焦点
1
2
3
4
this.$nextTick((goodsInfo) => {
  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 事件

解决方案

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

发表于 更新于 分类于

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

阅读全文 »

发表于 更新于 分类于 ，

1.1 pm ERR! code EINTEGRITY

1.1.1 问题描述

1
：pm ERR! code EINTEGRITY

image-20220317132008831

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"

发表于 更新于 分类于

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

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

阅读全文 »

发表于 更新于 分类于

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

阅读全文 »
0%