Vue 代码问题及解决方法

zhengzzzzz

已于 2024-06-12 17:16:22 修改

阅读量301

点赞数

文章标签： vue.js elementui javascript

于 2022-06-15 17:25:21 首次发布

本文链接：https://blog.csdn.net/zhengzzzzz/article/details/125300920

版权

1、el-table 树形结构不展开：

不加 default-expand-all

2、el-tabs 居中：

加上 stretch

3、清除 el-table 多选框选中的数据：

this.$refs.multiTable.clearSelection();

4、使用 el-dialog 出现 z-index 值很大的遮罩：

在 el-dialog 添加属性 :modal-append-to-body=false

5、解决 WebSocket is undefined 的问题：

将 .babelrc 文件中的 "plugins": ["transform-runtime"] 删除即可

6、vue 项目防止请求缓存返回 304：

config.headers["Cache-Control"] = "no-store"

7、安装 stylus 和 stylus-loader ：

npm install stylus --save
npm install stylus-loader --save

8、图标库：

http://doc.icon.cnovel.club/

9、比较时间大小：

startTime = new Date(Date.parse(start_time));
endTime = new Date(Date.parse(end_time));
startTime > endTime // 进行比较

10、el-dialog 禁止关闭的操作：

:close-on-press-escape="false" // 键盘按Esc键不关闭
:close-on-click-modal="false" // 点击dialog遮罩层不关闭
:show-close="false" // 不显示关闭按钮

11、点击按钮调用接口后界面自动刷新的问题：

在 <button> 标签中添加 type="button" 属性即可

12、npm install 由于安装包版本不同安装失败的问题：

npm install paper@0.12.11 --ignore-scripts
npm install paper --save

13、<style></style> 代码不高亮的问题：

VSCode 安装 Vuter 插件

14、v-html 文本空格不显示的问题：

css 加入样式 white-space:pre-wrap;

15、el-form 清除表单内容和验证：

<el-form ref="setForm">
    <el-form-item label="xxx" prop="formName">
        ... ...
    </el-form-item>
</el-form>
... ...
this.$nextTick(()=>{
    this.$refs.setForm.resetFields(); // 清除表单内容和验证消息
    this.$refs['setForm'].clearValidate(); // 只清除验证
    this.$refs.setForm.clearValidate("formName"); // 清除某一项验证
})

16、el-select 多选修改时无法删除，使用 $forceUpdate() 强制刷新：

<el-select ... multiple @change="$forceUpdate()">
    <el-option ...> </el-option>
</el-select>