总结前端开发中遇到的问题，分享前端知识

修改柱状图的宽度，不设时自适应

menu菜单是自己定义的，index获取的是v-for循环的index，出现错误。解决办法：index的是个int类型的值时，则可能出现这个错误。写成字符串，或者toString()转成字符串。<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"> <el-menu-item v-for="ite...

问题如下图：解决办法：在main.js或者main.ts中引入中文包import locale from "element-plus/lib/locale/lang/zh-cn";const app = createApp(App)app.use(store).use(router).use(ElementPlus,{locale})app.mount('#app')效果图：...

注意事项：ref="ruleFormFef"和model="ruleForm"不能重复使用获取全局getCurrentInstance方法，注意路由和store 线上使用有问题，在这里获取表单ref没有问题。完整写法：​​​​​​​​​​​​​​​​​​​...

使用element-ui实现列表分页功能

1.安装npm install vue-quill-editor --save2.页面中使用page.vue// 引入的富文本样式import { quillEditor } from "vue-quill-editor";import "quill/dist/quill.core.css";import "quill/dist/quill.snow.css";import "quill/dist/quill.bubble.css";components:{ quil.

加上:disabled="true"即可效果：

在项目中改变 SCSS 变量Element 的 theme-chalk 使用 SCSS 编写，如果你的项目也使用了 SCSS，那么可以直接在项目中改变 Element 的样式变量。新建一个样式文件，例如element-variables.scss，写入以下内容：/* 改变主题色变量 */$--color-primary: teal;/* 改变 icon 字体路径变量，必需 */$--font-path: '~element-ui/lib/theme-chalk/fonts';@imp.

使用的是element-ui，如果要修改el-table原始样式1.可以自定义class，为了不影响全局样式<div class="liquidataCase border-padding bg-shadow"> <el-table border :data="tableData" style="width: 100%" highlight-current-row :height="tableHeight"> ...... </el-tabl

报错显示：问题原因：（1）查看/build/webpack.base.conf.js文件可以发现，woff或ttf这些字体会经由url-loader处理后在static/fonts目录下生成相应的文件。（2）也就是说实际应该通过/static/fonts/**路径来获取字体图标，而实际却是请求/static/css/static/fonts/**，自然报404错误。解决方式：（1）打开build/utils.js文件，在如下位置添加pu...

1.安装：npm install webpack-bundle-analyzer –save-dev//或yarn add webpack-bundle-analyzer -D2.配置：在build/webpack.prod.config.js添加...if (config.build.bundleAnalyzerReport) { const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnal

App.vue页面：setToken根据自己定义的使用<script>export default { name: "app", mounted(){ //刷新页面时也会执行 window.addEventListener('beforeunload',()=>{ this.$store.dispatch("setToken", ""); }); }}</script>...

增加ref属性 ：<el-form ref="formData"></el-form>ElementUI自带清除表单方法this.$refs[formName].resetFields(); // 重置表单移除校验this.$refs[formName].clearValidate(); // 仅清除验证

计算表格table的高度，mixin分全局引用和局部引用

一般情况解决办法：在按钮上绑定keyup事件，加上.native覆盖原有封装的keyup事件<el-button type="primary" class="sub-btn" style="width:100%;" :disabled="btnDisabled" :loading="logining" @click.native.prevent="handleSubmit" @keyup.native.enter="handleSubmit">{{loginStr}}</el-bu

下载moment.jsnpm install moment --save//或者yarn add moment --savemain.js 引入// 导入时间插件momentjsimport moment from 'moment' // 定义全局时间格式过滤器Vue.filter('dateFormat', function (daraStr, pattern = 'YYYY-MM-DD HH:mm:ss') { return moment(daraStr).fo..

父组件Home.vue<div id="home"> <menutree :data="menuData"></menutree></div><script>export default { components: { menutree: menutree }, data() { return { menuData: [], breadcrumbText: "" .

动态调整左侧菜单栏高度为全body高度，仅供参考<el-container :style="containerHeight"> <el-scrollbar> <el-aside style="width:200px;"> .... </el-aside> </el-scrollbar></el-container>..

<el-form-item label="开关" prop="delivery"> <el-switch v-model="ruleForm.delivery" active-color="#13ce66" inactive-color="#ff4949" :active-value="1" :inactive-value="0"> </el-switch></el-form-item>绑定：ruleForm:{.

仅做参考，可根据实际项目需求实现。可查看当前实现效果HTML:<el-form-item label="时间"> <span style="display:inline-block"> <el-date-picker v-model="toolbarForm.startValue" format="yyyy-MM-dd" value-format="yyyy-MM-dd" :picker-options="pickerOptionsSta...