Vue 代码问题及解决方法_vue 接口 304-优快云博客

本文链接：https://blog.youkuaiyun.com/zhengzzzzz/article/details/125300920

本文汇总了前端开发中常见的问题及其解决方案，包括el-table树形结构展开、el-tabs居中、清除el-table多选数据、处理WebSocket错误、防止请求缓存等。还介绍了Vue项目的实用技巧，如el-dialog配置、按钮点击后自动刷新问题的解决，以及v-html文本显示和el-form表单操作。同时，提供了 stylus 和 stylus-loader 的安装方法，以及图标库资源链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>

17、单行、多行文本溢出显示省略号：

// 单行
width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

// 多行
width: 100px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 5;// 行数
-webkit-box-orient: vertical;
word-break: break-all;

18、el-tree 勾选指定节点、清空勾选：

// 必须设置 node-key="xxx"
this.$refs.tree.setCheckedKeys([3, 5]);
// 清空勾选
this.$nextTick(() => {
    this.$refs.tree.setCheckedKeys([]);
});